SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    H1 and Image, same line

    I probably should just do this with a table, but I love to try to do everything on a page with CSS. I would like to put a H1 tag in my header on the left, then display a banner on the right. Same line. Possible and browser compatible?

  2. #2
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    HTML Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     
     <html>
     <head>
     <title>Untitled</title>
     <style type="text/css">
     	#shell {
     		border: 1px solid #ccc;
     		min-height: 100px;
     	}
     	* html #shell {
     		height: 100px;
     	}
     	h1 {
     		float: left; 
     		background: #cccccc;
     		width: 45%;
     	}
     	#banner {
     		float: right;
     		width: 45%;
     		background: #ff0000;
     	}
     </style>
     </head>
     
     <body>
     <div id="shell">
     	<h1>Heading H1</h1>
     	<div id="banner">Banner here </div>
     </div>
     
     </body>
     </html>
    That's a basic, but should work
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net

  3. #3
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The <h1> tag is by default a block-level element, so unless you specify a width it will take up 100% of its container.

    You can either:

    a) Float it (floated elements "shrink-wrap" their contents, so its width will be reduced to the width of the text)
    b) Change its display property to "display: inline;"

    Personally, I would float the <h1> left and float the banner image right.

    Edit: -Ox is following me around the threads!!

  4. #4
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!

  5. #5
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    after the two floats, what div would I put "clear:both" because I think I have to do that for Firefox to not think it's taking up two lines.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are talking about the code above then the gap above the header in mozilla is caused by the default top margin on the h1. If get rid of the margins then it will start at the top.

    Code:
    * {margin:0;padding:0}
    The #shell style has a height of 100px so unless your floats are going to be higher than 100px then there should be no need to clear because #shell is static.

  7. #7
    SitePoint Wizard subnet_rx's Avatar
    Join Date
    Aug 2001
    Location
    Hattiesburg, MS
    Posts
    1,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually, you can see what's happening in FF if you go to this page

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    If your image is just decoration you can apply it as a background on the H1

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its the margin on the banner h1 as explained in my other post. The margin pokes through the bottom and offsets the left float.

    There are three things that will all fix it.

    Add clear:both to sidebar-a. Or reduce the margin on the h1 to zero. Or increase the height on the header by 5px.

    As Vinnie said you could also simplify it with a bg image.


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
  •