I have an html file that I want to use to produce some product tags that will fit a standard 3.5" x 2" business card format.
It uses 3 premade images as backgrounds to fill out 3 div's to specific sizes.
http://www.orcasoul.com/images/bowls/fullpage.jpg is 8.5" x 11", the size of the sheet of paper.
http://www.orcasoul.com/images/bowls/pagebox.jpg is 7" x 10", the size of the area on the paper that holds the cards.
http://www.orcasoul.com/images/bowls/cardbox.jpg is 3.5" x 2", the size of the individual cards.
I have styles for the div for each page image, and 2 div's for the cardbox - left and right.
The style code:
<style>
html, body {height:100%;}
div.fullpage
{
position:relative;
width:8.5in;
height:11in;
background-image:url("http://www.orcasoul.com/scw/fullpage.jpg");
background-position:center center;
background-repeat:no-repeat;
}
div.pagecard
{
position:relative;
top:0px;
width:7in;
height:10in;
margin-left:0.75in;
margin-right:0.75in;
margin-top:0.5in;
margin-bottom:0.5in;
background-image:url("http://www.orcasoul.com/scw/pagebox.jpg");
background-position:center center;
background-repeat:no-repeat;
}
div.card-block-left
{
position:relative;
float:left;
width:3.5in;
height:2in;
background-image:url("http://www.orcasoul.com/scw/cardBox.jpg");
background-repeat:no-repeat;
}
div.card-block-right
{
position:relative;
float:left;
width:3.5in;
height:2in;
background-image:url("http://www.orcasoul.com/scw/cardBox.jpg");
background-repeat:no-repeat;
}
p.single_record
{
page-break-after: always
}
</style>
In I have the following code:
<body>
<div class="fullpage">
<div class="pagecard">
<div class="card-block-left">
<img class="image-bowl" src="http://www.orcasoul.com/scw/MyrtleTiBurl07-005.jpg" />
<div class="info-box">
<p>10½" Tiger Myrtle Burl Bowl</p>
<p>MyrtleTiBurl07-005</p>
<p class="text-index">Product #337</p>
</div>
<div class="price-box">
<p>$120</p>
</div>
<div class="link-box">
<p>http://www.splinterscraftworks.us/</p>
</div>
<img class="logo" src="BowlPhotos/SCW_Logo.jpg" />
</div>
<div class="card-block-right">
<img class="image-bowl" src="http://www.orcasoul.com/scw/MyrtleTiBurl07-005.jpg" />
<div class="info-box">
<p>10½" Tiger Myrtle Burl Bowl</p>
<p>MyrtleTiBurl07-005</p>
<p class="text-index">Product #337</p>
</div>
<div class="price-box">
<p>$120</p>
</div>
<div class="link-box">
<p>http://www.splinterscraftworks.us/</p>
</div>
<img class="logo" src="BowlPhotos/SCW_Logo.jpg" />
</div>
</div>
<p class="single_record"></p>
<div>
</body>
The actual code repeats the code for 9 pages, to see if everything lines up properly...
It doesn't.
The left to right alignment is perfect, as is the first page of cards (10 in all).
But after a page or so, there seems to be a drift downward on the page and the last page bleeds onto the next one.
The is supposed to go to the top of the next page.
I have uploaded the HTML to http://www.orcasoul.com/images/bowls/testtags.html
This should give me the exact pages - why doesn't it?
Your first page is containing 10 cards, which is OK for your layout, but the next pages only contain 2 cards.
With your 10 inches fixed heights on your page divs, you get that big white space.
Related
Image that describes my situation:
How does it currently look like:
**I have an issue with aligning the text to the images, under the Express Yourself Page.
I have tried setting the paragraphs to be of the same width as each other, based on the wrapper's total width.
The Pictures were able to float left successfully; with the images side by side. However, the text which is supposed to be centrally aligned with it's respective image aren't shifting.
When I experiment with the text, it's either all the text stays at the left or it's centralised; all in a row, below each other. How am I able to shift the respective paragraphs to be side by side each other, centrally aligned to their images?**
<Style>
#wrapper {
width:970px;
margin-left:auto;
margin-right:auto; /* Most crucial thing to align the whole page plus margin-left */
}
#section1 img, #section2 img, #section3 img, #section4 img {
max-width:100%;
float:left;
display:block;
padding-bottom:30px;
}
#section1, #section2, #section3, #section4 {
font:Arial, Helvetica, sans-serif;
font-size:
text-align:center;
}
p.title {
width:323px;
}
hgroup {
font:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
padding-top:24px; /*To give space inbetween image and Text*/
width:323px;
}
</style>
<body>
<div id="wrapper">
<section id="section1">
<img src="img/showcase_project1.jpg">
<img src="img/showcase_project2.jpg">
<img src="img/showcase_project3.jpg">
<hgroup>PAVÉ</hgroup>
<p class="title">Illustration Design<br>Avina Tan</p>
<hgroup>REBRANDING HAW PAR VILLA</hgroup>
<p>Branding Design<br>Tan Chin Hwee</p>
<hgroup>DREAMS</hgroup>
<p class="title">Photography<br>Jessie Lam</p>
</section>
<section id="section2">
<img src="img/showcase_project4.jpg">
<img src="img/showcase_project5.jpg">
<img src="img/showcase_project6.jpg">
<hgroup>PAPER NEVER FORGETS</hgroup>
<p class="title">Graphic Design<br>Janelle Qua</p>
<hgroup>‘O THAT TWISTED STORY</hgroup>
<p class="title">Illustration Design<br>Jennifer Soon</p>
<hgroup>HOMEBREW</hgroup>
<p class="title">Branding Design<br>Fiona Lim</p>
</section>
<section id="section3">
<img src="img/showcase_project7.jpg">
<img src="img/showcase_project8.jpg">
<img src="img/showcase_project9.jpg">
<hgroup>FIVE (MUSIC IN PRINT)</hgroup>
<p class="title">Photography<br>Jonathan Liu</p>
<hgroup>PRECIOUS</hgroup>
<p class="title">Graphic and Editorial Design <br>Tzeng Li Syuan</p>
<hgroup>26 HOURS</hgroup>
<p class="title">Digital Design<br>Evelyn Chew & Rachall Tay</p>
</section>
<section id="section4">
<img src="img/showcase_project10.jpg">
<img src="img/showcase_project11.jpg">
<hgroup>JOY IN A CUP</hgroup>
<p class="title">Digital Design<br>Chua Pei En & Lim Si Hui</p>
<hgroup>AZURE AIRLINE APP</hgroup>
<p class="title">Digital Design<br>Tulasi & Lock Phutthaphon</p>
</section>
</div>
</body>
There are a few issues here, but to solve your problem, I'd recommend grouping each image wih its associated <hgroup> and <p class="title"> by wrapping them in a <div> or something and then floating the wrapper. Something like this: http://jsfiddle.net/Lp32mtkm/ .
The reason your version isn't working is because <p> tags and <hgroup> tags are block elements by default (this can be set explicitly with the css property display), which means they automatically start a new line, even if there is space for them on the previous line. <img> tags are actually inline elements by default, which means they will line up next to each other.
EDIT: missed the part about centering the text. All you have to do is put text-align:center on the wrapping element, like so: http://jsfiddle.net/Lp32mtkm/1/ .
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I am trying to get my footer, which has a grey color to show this color all the way to the bottom in my responsive design. It goes all the way across the page when in PC view mode, when I take it to the mobile size, the box only shows for half of the footer and then cuts off. I am not sure why it's not working for me.
Thanks ahead of time for taking a look.
HTML:
div id="footer">
<div class="container">
<div class="row">
<h3 class="footertext">About Us:</h3>
<br>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
<br>
<h4 class="footertext">Sitemap info 1</h4>
<p class="footertext">here is some site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">Sitemap info 2</h4>
<p class="footertext">here is some more site map info<br>
</center>
</div>
<div class="col-md-4">
<center>
<img src="http://oi61.tinypic.com/307n6ux.jpg" class="img-circle" alt="...">
<br>
<h4 class="footertext">sitemap info 3</h4>
<p class="footertext">This is some more of it.<br>
</center>
</div>
</div>
<div class="row">
<p><center>Contact Stuff Here <p class="footertext">Copyright 2014</p></center></p>
</div>
</div>
</div>
CSS:
#footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 280px;
background-color:#B6B6B4;
/*
You are using col-md-4 classes for your grid, causing each column take a full row in mobile view and your footer is not going all the way to the bottom of page because of its fixed height (280px).
Try using col-xs-4 for x-small devices and appropriate classes for other windows sizes.
This can be achieved by doing something like <div class="col-md-4 col-xs-6">Content</div> which means this columns will use 4 grids in desktop view and 6 grids in mobile viewport.
More documentation can be found here, under 'Grid options' section.
By the way, <center> tag is obsolete, I would recommend you to use Bootstrap's text-center CSS class.
First of all I would recommend posting your code in jsfiddle for easier debugging: http://jsfiddle.net/r7mTc/
In jsfiddle above you will see that content of the footer is way higher than the footer itself and stick out of it.
Now look here: http://jsfiddle.net/r7mTc/1/ I just deleted height line in CSS ;)
I also see few other problems in your code:
<p><center>Contact Stuff Here <p
class="footertext">Copyright 2014</p></center></p>
Tag p can contain only inline elements like span or img, so there shouldn't be nested p tags.
<p class="footertext">here is some more site map info<br>
Tag p should always has be closed, so you should add </p> after <br>
<center> tag is deprecated. Better practise is to use CSS for that - for example text-align:center for inline elements or margin:auto for blocks.
I have a problem with fixed image width only in Internet Explorer (I have IE8)
First the image is not appear at all when padding is not defined
Second when i specify padding:5px; for the img it appears like this
Note that I can't set a special width for image container div because
below is my code
HTML:
<div class="block_div">
<div>
<div class="img_about">
<img src="test_img.jpg" alt="test_img" width="150" />
</div>
<div class="img_about">
about: "Adapted from Betty Crocker".
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.img_about{float:left; }
.img_about img{padding:5px; }
and if i delete the float from .img_and_text dev it looks normal width:150
try this:
.img_about img { width:150px; height:150px; }
Using inline width tags is only helpfull for e-mail clients these days afaik...
I'm trying to update some code to use CSS sprites. In some situations it works fine, in others it screws up the page layout, and I can't figure out what I'm doing wrong.
Here's a fragment of the html ....
<div id="footer"><!-- footer -->
<div class="footer-top">
<div class="footer-left">
<div class="footer-right">
<img src="footer-logo.gif" />
<br /><br />
<div>
<p>blah blah blah</p>
<div class="clearfloat"></div>
</div>
</div>
</div>
</div>
... and the CSS:
.footer-left {
background: url(/images//footer-left_.gif) no-repeat left top;
}
I've created my sprite, and tried changing the CSS to:
.footer-left {
background:url('/images/sprites.gif') -66px -2px no-repeat;
width:20px;
height:99px;
}
The dimensions and offsets are correct, but the result isn't pretty. The sprite region shows in roughly the right place, but footer-logo.gif and the text are messed up.
Any ideas please?
The only things that have any effect on the logo and the text, are the dimensions you added; you set the width of the footer to 20px and if that wasn´t there before, that definitely has an effect on your bla bla bla text and .footer_right.
Note that .footer_right and the text are both located inside your 20px wide footer_left.
Are you sure your nested div structure is correct?