SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header that stretches entire width

    Hi,

    I'm new to this forum.. And I haven't designed a site for years and now I'm going to give it a go again.

    I would like to know how you guys get a header that extends the full width of a page at all resolutions.
    As an example the blue bar/header on top of this site: http://www.nokia.com/global/about-no...ors/investors/ or even facebook has it.
    Is this done by a css code with the div?

    Thx in advance.. And i'm very sorry if this is one of those stupid questions.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to Sitepoint Stukken.

    To answer your question: first remeber that the header is actually an element beign centered. there is no set technique as CSS and HTML will interact to produce the visual (illusion ) of the effect desired. So let forget the sample site and start from scratch.


    by default, all BLOCK level elements stretch to occupy the whole width of their CONTAINER
    IF ALL YOU WANT is a BLUE rectangle across the page, any UNCONTAINED block element will do.

    Code:
    header{background:blue; color:#fff;display:block; }
    <body>
     <header>I am a blue header that goes across the page</header>
    </body>
    that simple.

    If the content is text and all you want to do is center it, add text-align:center;

    However if you wanted to center other block level tags then you will need another element to act as a wrapper and you will need to give the inner element a defined WIDTH

    Code:
    .hed{background:blue; }
    header{color:#fff;display:block; width:960px; margin:0 auto; }
    <body>
      <div class="hed">
              <header>
                        ...html code here....
              </header>
      </div>
    </body>
    I hope that helps

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much!

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Location
    North Carolina
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .header {
    	background-color: #000;
    	height: 50px;
    
    }
    .container {
    	margin: 0 auto;
    	width: 960px;
    }
    Code:
     <div class="header">
                <div class="container">
                    <!-- Content Goes Here -->
                </div>
            </div>
    That should be what you're looking to accomplish.

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much, I had to alter it to this to get it without a margin, if anyone wants to know in the future.

    Code:
            margin: -8 -8 auto;
    	top 0;
    	left: 0;
    	right: 0;


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
  •