SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Heading BG image, floated DIV

    I am working on a page, and I have images inside of DIV's which I can float to the right or left. This works fine, and text wraps around it fine, but I am using a background image to give an icon to all of my headings.

    When I have a heading next to a left-floated image, the text is properly wrapped and indented, but the image is over on the very left edge of the page, underneath the floated image.

    What can I do to get this background image into the proper position? I am guessing that there is a simple solution to this problem that is probably resulting from a misunderstanding on my part of element positioning and sizing.

    Internet Explorer 6, no doubt due to a buggy implementation, positions the image as I want it, but Firefox and Safari do not.

    Relavant CSS:

    Code CSS:
    div.imgleft {
        float:left;
        font-style:italic;
        text-align:center;
        font-size:10px;
        margin:4px;
    }
     
    div.imgright {
        float:right;
        font-style:italic;
        text-align:center;
        font-size:10px;
        margin:4px;
    }
     
    h3 {
        font-weight:bold;
        font-size:14px;
        background:url(arrowhead.png) no-repeat;
        text-indent:36px;
        line-height:32px;
        height:32px;
    }

    HTML:
    Code HTML4Strict:
    <p>lots of text here</p>
    <div class="imgleft"><img src="picture.png" width="100" height="100"></div>
    <h3>Heading</h3>
    <p>more lines of text here</p>

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    You can't ? because only text wraps, background colors/images, borders, will drop under the float
    Positioning the background images, left right as wide as image + margins, probably presents a maintenance problem

    Make the header always fit between with a overflow auto, not wrapping
    Make use of how IE behaves, and it needs some more code to kill the 3 pixel jog of IE < 7

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<!-- saved from url=(0022)http://www.domain.com/ -->
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.imgleft,.imgright{
    	font-style:italic;
    	text-align:center;
    	font-size:10px;
    	}
    	
    	.imgleft img,.imgright img{margin:4px;}
    	
    	.imgleft {float:left;}
    	
    	.imgright {float:right;}
    	
    	h3{
    	overflow:auto;
    	font-weight:bold;
    	font-size:14px;
    	background: url(http://www.google.nl/images/firefox/fox1.gif) no-repeat;
    	text-indent:36px;
    	line-height:32px;
    	height:32px;
    	}
    	* html .imgleft{left:3px;position:relative;margin-left:-3px;}
    	* html .imgright{left:-3px;position:relative;margin-right:-3px;}
    	
    	.x{text-align:right;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    
    <p>lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here </p>
    
    <div class="imgleft"><img src="http://www.google.nl/images/firefox/fox1.gif" alt="" width="100" height="100" /></div>
    
    <h3>Heading</h3>
    
    <p>more lines of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here </p>
    
    <div class="imgright"><img src="http://www.google.nl/images/firefox/fox1.gif" alt="" width="100" height="100" /></div>
    
    <h3>Heading</h3>
    
    <p class="x">more lines of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here lots of text here </p>
    
    </body>
    </html>
    wrap demo with borders background under float ( first on top )
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	.wra{width:768px;background:#ffffcc;overflow:hidden;}
    	
    	.l{float:left;width:200px;height:200px;border:1px solid #000000;}
    	
    	.x{border:1px solid #000000;background:#ccccff;}
    	
    	.y{overflow:auto;} * html .y{height:1&#37;;}
    	* html .ll{float:left;}
    	</style>
    </head>
    <body>
    
    <div class="wra">
    <div class="l"></div>
    <p class="x">Test Text Test </p>
    <p>
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    </p>
    </div>
    <p>&nbsp;</p>
    <div class="wra">
    <div class="l"></div>
    <p class="x y">Test Text Test </p>
    <p>
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    </p>
    </div>
    <p>&nbsp;</p>
    <div class="wra">
    <div class="l"></div>
    <div class="ll">
    <p class="x y">Test Text Test </p>
    <p class="y">
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test Test Text Test 
    </p>
    </div>
    </div>
    
    </body>
    </html>
    Last edited by all4nerds; Sep 5, 2007 at 04:48.

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thanks a lot for the help.
    Code CSS:
    overflow:auto;
    fixed the issue, and my page looks much better now!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •