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?
Related
I have a page where there are two images on top which are floated to left and right as below :
.floatLeft{ float:left;}
.floatRight{ float:right; }
<div>
<img src="firstImage" class="floatLeft"/>
<img src="secondImage" class="floatRight"/>
<!-- wright here -->
</div>
Issue is when i write anything after images (be it in div or a plain text ) and if it goes beyong page width ,
the text after maximum width shifts downwords entirely after images . That is text doesn't wrap inbetween two images
What i understand about float is text should "FLOW" in between two images (unless we use clear which "clears" area around images ) , but its not working like that.
I want to have a text in between two images.
Any help is higly appreciated as a I have done a lot of efforts but it is not working.
Logically, you have 3 blocks of data here, so I suggest using 3 floating divs with set width:
.floatLeft{ float:left}
.div1{width:X%}
.div2{width:Y%}
.div3{width:Z%}
.overflow{overflow: hidden} /* this is optional */
<div class="overflow">
<div class="floatLeft div1">
<img src="firstImage"/>
</div">
<div class="floatLeft div2">
<!-- text here -->
</div">
<div class="floatLeft div3"><!-- or make it float right if you want -->
<img src="secondImage"/>
</div">
</div>
If you want your images a fixed width, try using CSS calc:
.div1{width:100px}
.div2{width:-moz-calc(100%-300px);-webkit-calc(100%-300px);calc(100%-300px);} /* not supported in some browsers */
.div3{width:200px}
But honestly I recommend to go classic way and use a table here:
.table {width:100%;border-collapse:collapse}
.table td {padding:0;margin:0}
.block1 {width:X%} /* or width:Xpx */
.block3 {width:Z%} /* or width:Zpx */
/* do not touch block2 here */
<table class='table'>
<tr>
<td class='block1'>
<img src="firstImage"/>
</td>
<td class='block2'>
<!-- text here -->
</td>
<td class='block3'>
<img src="secondImage"/>
</td>
</tr>
</table>
Remember to wrap your content in "blocks", it always helps when you mark up.
I guess this is the answer that you need jsfiddle
I will explain a little about.
in your div add a class of imgcontainer
in your css, add the following
.imgcontainer{
position:relative;
}
you can add the width of the div, in jsfiddle I set it as 150px. and each of the image is 50px. there you add paragraph with some text
Try this way
<div>
<img src="firstImage" class="floatLeft"/>
<p class="floatLeft">Some textgoes here</p>
<img src="secondImage" class="floatRight"/>
</div>
but give proper width
Another variation is using a CSS version of the table approach proposed by igorpavlov. You have to replace the table/tr/td by divs and to adapt the CSS as proposed here :
.table {width:100%; display: table;}
div{ display: table-cell; vertical-align: top;}
.block1 {width:33%} /* or width:Xpx */
.block3 {width:33%} /* or width:Zpx */
img {width: 100%; height: auto;}
<div class='table'>
<div class='block1'>
<img src="firstImage"/>
</div>
<div class='block2'>
<!-- text here -->
</div>
<div class='block3'>
<img src="secondImage"/>
</div>
</div>
It provides better semantics and works IE8+!
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...
My problem can be better understood by the image below.
I have several div elements (div A) which have a variable size that depends on their content.
They are displayed inblock inside a larger container with a max-with defined(the large outer rectangle without a name).
Everything works fine until I had inside divs A two other divs (B and C) which I what that look like the image.
I haven´t been successful. I've tried several combinations of css properties like display, margin, padding, float... negative margins... tables...
Any help would be welcome.
Update
the code looks like the example:
html
<div style="max-width: 800px;">
<div class="div_a">
<div class="div_b">
short text
</div>
<div class="div_c">
short text
</div>
</div>
<div class="div_a">
<div class="div_b">
looooong text
</div>
<div class="div_c">
looooong text
</div>
</div>
<div class="div_a">
<div class="div_b">
huuuuuge text
</div>
<div class="div_c">
huuuuuge text
</div>
</div>
</div>
css
.div_a{
display: inline;
}
.div_b{
display: block; /* doesn't work*/
}
.div_c{
display: block; /* doesn't work*/
}
If I understand correctly, this should do it:
.div_a{
display: inline-block;
}
:)
...assuming you don't have other styles, besides border and spacing properties.
A fiddle example here
I am looking to insert/move my search bar into my header image similar to the example below. If someone had a minute to show me how to accomplish this it would be greatly appreciated. Thanks for your time. Here is the link to my website http://www.jobspark.ca/
Chris
Just add your search box inside
<div id="logo" class="image">
...
<h1>
...
</h1>
"search box code goes here"
</div>
Give an id in the search div and Finally position using CSS padding.
you can keep the background image into body tag. set no repeat, use background-size to 100% width.
example:
body{
backgroud-image:url() no-repeat center;
background-size: --;
}
HTML STRUCTURE:
<div id="header">
<div ="#">
<h1></h1> //float:left
<div id="menu"></div> //float:right;
</div>
<div ="search-box">
<form>
</form> //use margin and padding for keep it center;
</div>
</div>
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.