SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header causing extra scroll

    So, my site is starting to look decent but for someone reason I'm getting some horizontal scroll. I think that it is being caused by the header section and my nav but I can't get rid of the the extra scroll. I tried overflow hidden, but that didn't help. Any suggestions?

    http://connect4webdesign.com/New%20S...SiteHeader.php

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hm, there are several problems there. The Phone div, the MiddleHeader and Nav divs are all placed too far right—the latter two because they are set to width: 100% but then have left padding, which doesn't work.

    To fix this, you need to change your layout strategy. The first thing to do is to wrap the whole page in an outer "wrapper" div and set it to the preferred width of your content. Give it margin: 0 auto; to center it. Then remove the left/right paddings / margins of the elements inside it. There will be some extra tweaking for things like the phone div, but that will have to come later.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    319
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, I did what you said and put the content within a div and set that div to 70% of page(body which is set at 100%). However, the reason I did it the way that I originally did is that the background image of nav and middle portion of the header would be restricted to 70% of the page and not fill the whole screen. However, I tried putting everything in the div and the nav and middle header background were limited to 70% of the screen. So, I just took the background of the middle part of the header and nav and placed them above the div and used a negative top margin to pull the images up to the background of the middle header section. However, when i tried this with the ul it became hidden under the image i wanted to act as its background. So, did I do what you were suggesting or was I wrong and how do i get the nav list to appear above its background image? thx

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,792
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    the gist of what Ralph was trying to say is that padding ( and margin and border) are ADDED to the calculated EFFECTIVE WIDTH of an element.

    So , for example if you had a div with 100% width and then gave it 20px of padding-left, you actually have a div that is 100%+20px wide. so you end up needing to get rid of either the padding or the width somehow.
    if you cant get rid of the width ( generally block elements such as divs are '100%' width anyway) , then you can do wrap and assign the width to the OUTER element ( the wrap) and padding, etc, to the INNER element.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    the reason I did it the way that I originally did is that the background image of nav and middle portion of the header would be restricted to 70% of the page and not fill the whole screen.
    OK, the way around that (as you guessed) is to take the header out of the main wrapper and let it stretch to 100% width (which it will do naturally anyhow) and place the cloud image on that as a background. THEN ... create a div inside that with a width of 70% (like the wrapper) and center it with margin: 0 auto; (like the wrapper). Inside that you put your logo etc, just as you put other content inside your wrapper. That will save you having to put nasty margins on the logo etc. which don't work properly anyway (as you'll see if you scale the width of the browser).

    So, anything that needs to be centered should be in a centered div, and if you need a backgrond image that stretches the full width of the browser, wrap another div around that (which will be 100% width) and put the image on that as a background. Don't put decorative images in the HTML itself.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Tags for this Thread

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
  •