SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get a header that spans the entire page

    Hi guys,

    I am working on a site that has a header that spans the entire page width (see below). I've run into a bit of an issue. I'm unsure how I should be styling the background. Is it acceptable to have the black bar and background gradient in one image that is say 20x700px repeating-x as my body background (the bit in the red boundary) then just put my content in a container (the blue boundary)?

    homepageexample.jpg

    Many thanks

    Jonno
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by JonnoW View Post
    Is it acceptable to have the black bar and background gradient in one image that is say 20x700px repeating-x as my body background (the bit in the red boundary) then just put my content in a container
    That's certainly an option, but my preference is to have a div that's 100% wide at the top for the background, and have a centered div inside that for the header content. then have the rest of the site content in a separate, centered wrapper below that.

    One advantage of this is that, if text is enlarged, the header content won't spill down beyond the black band across the top. Instead, it can just expand with the content.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I did that orginally, I got stuck when it came to inserting the content though. I couldn't work out how to centre my content that is in the header if you see what I mean. But would you have something like so:

    <body>
    <div id="background">
    </div>
    <div id="container">
    <div id="header">
    </div>

    <div id="main">
    </div>

    </div>


    ?

    Thanks as ever Ralph!

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's certainly an option, but my preference is to have a div that's 100% wide at the top for the background, and have a centered div inside that for the header content. then have the rest of the site content in a separate, centered wrapper below that.

    One advantage of this is that, if text is enlarged, the header content won't spill down beyond the black band across the top. Instead, it can just expand with the content.
    How do you style the height for that?

    Thanks

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'd not use a background div and instead move the background to your body.

    Then:

    Code HTML4Strict:
    <div id="header">
      <div class="inner">content</div>
    </div>
    <div id="wrap">
      main content goes here
    </div>

    Code CSS:
    #header {
      width:100%;
      overflow:hidden; /* contain floats */
      height:200px;
    }
     
    .inner, #wrap {
      width:80%;
      margin:auto;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, just thought of another question then: Does using percentages over fixed pixel width make it more responsive i.e. more versatile.

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Definitely.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kohoutek View Post
    I'd not use a background div and instead move the background to your body.

    Then:

    Code HTML4Strict:
    <div id="header">
      <div class="inner">content</div>
    </div>
    <div id="wrap">
      main content goes here
    </div>

    Code CSS:
    #header {
      width:100%;
      overflow:hidden; /* contain floats */
      height:200px;
    }
     
    .inner, #wrap {
      width:80%;
      margin:auto;
    }
    I would move the bg image to the #header div, as then it can expand/contract with the content in the .inner div.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Maybe this has been said already, or maybe I am misunderstanding the challenge here...
    It seems to me that you need 3 bg tiles and the following structure:

    Code:
    <body>
    <div id="hed"><div class="center">...</div></div>
    <div class="center">
        <div id="content">..</div>
        <div id="foot">..</div>
    </div>
    </body>
    Make a tile of that chipped gray pattern assign it as the REPEATING bg of the body tag
    Make a tile of the black top INCLUDING THE DROP SHADDOW ON THE GRAY of the body, let's call it hedTyle1.jpg assign #hed {bakground:url(hedTyle1.jpg ) repeat-x left bottom #000;}
    Make a tile of the black top INCLUDING THE DROP SHADDOW ON THE WHITE of the content , let's call it hedTyle2.jpg assign #hed .center {bakground:url(hedTyle2.jpg ) repeat-x left bottom #000;}

    .center is a generic center class {margin: 0 auto; width: (the width or your page in EMs, %s or PXs as needed)}

    DO NOT assign HEIGHT!!! but you may want to add a few PXs padding-bottom to #hed .center so that the content doesnt o on the drop shadow part.


    After that all you have to do is #content{background:#fff;} and #foot{background:maroon;}

    Style the rest of your layout as needed.

    Hope that simplifies things for you.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice guys, I've just about finished with the page however I'm getting issues when viewing in IE7 and IE Compatibility mode.
    The page can be seen here:
    http://www2.hull.ac.uk/files/homepag...iHomepage.html
    In IE7 and Compat mode it gives the following header:

    ie7header.png


    If I remove the padding as suggested by Dresden then I get no banner in Chrome Firefox etc.

    Does anyone have any ideas why this is and how I can fix it?

    Thanks again

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Perhaps modify your styles a bit, like so:

    Code:
    div#centre {
      background: url("../images/headTyl2.png") repeat-x scroll left bottom #000000;
      margin: 0 auto;
      overflow: hidden;
      padding-bottom: 40px;
      padding-top: 10px;
      width: 960px;
    }
    See if that works better.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Location
    Hull, UK
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did it, could you explain what this has done please?

    Thanks again!

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The overflow:hidden was needed because you have children who float, and as a result the parent doesn't recognize they are even there. Children being floated, to the parent, is like them not even being there. The overflow:hidden makes the parent recognize the floated children and thus will contain them. Most likely your parent collapsed in height (due to it not even recognizing it had children).

    Hopefully that was enough of an explanation.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •