Spread the navigation background across the whole browser

Discussion in 'Web Design and Development' started by Got Josh?, Jan 30, 2010.

  1. Got Josh? macrumors member

    Joined:
    Mar 27, 2009
    #1
  2. brisbaneguy29 macrumors 6502

    brisbaneguy29

    Joined:
    Nov 27, 2007
    Location:
    Brisbane
    #2
    Wouldn't you just put a div behind the nav container, make it a full width div with the background, and have the nav container on top, with no background? Like my home page here
     
  3. Got Josh? thread starter macrumors member

    Joined:
    Mar 27, 2009
    #3
    also i cant seem to center the clouds with the links any help ? :(
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Use padding and text alignment on the list item.
    Code:
    ul#nav li {
     ...
     padding-top: 50px;
     text-align: center;
    }
     
  5. smilinmonki666 macrumors regular

    Joined:
    Jan 20, 2008
    #5
    Is it the div id "nav-container" your looking to fit the width of the page?
     
  6. smilinmonki666 macrumors regular

    Joined:
    Jan 20, 2008
    #6
    Looking at your css & your HTML your over complicating the page with containers pushing the page layout to how you want it...
     
  7. Got Josh? thread starter macrumors member

    Joined:
    Mar 27, 2009
    #7
    Thanks angel ! That worked, perfectly. Yes, it's the nav container that i want to make full width on the page.
     
  8. smilinmonki666 macrumors regular

    Joined:
    Jan 20, 2008
    #8
    Hey dude, thats not a problem as such. Thats easily done as shown in image 1.jpg. The only issue is that it places everything within the 100% width. The only thing I would suggest at this moment in time is:

    Have it the way you have got it formatted already or use absolute reference on all of you id's.
     

    Attached Files:

    • 1.jpg
      1.jpg
      File size:
      75.8 KB
      Views:
      45
  9. Got Josh? thread starter macrumors member

    Joined:
    Mar 27, 2009
    #9
    What do you mean by having absolute reference on all of my ID's? The way i see it it's only beign streched to one side and not across left part of the browser as well. I want to spread it equally on both sides.

    brisbaneguy29's suggestion did not work because i used a grid to design this page and i'm using a grid to code it as well. Perhpaps anyone has a detailed solution to my problem. I'm almost done coding the rest of the page the only problems i've been having are with that nagivation background and another div that i want to repeat across the right part of the browser!

    Thanks in advance!
    Josh
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    Your grid design is what's kind of getting in the way. There is a quick fix, though not sure if it works in all browsers.
    Code:
    body {
     [COLOR="SeaGreen"]background: #284259 url("../img/nav_bg.png") 0 364px repeat-x;[/COLOR]
    }
    
    .nav-container {
     /* [COLOR="Red"]delete
     background: url(../img/nav_bg.png) repeat-x;[/COLOR]
     */
     height: 130px;
     /* [COLOR="Red"]delete these lines
     -webkit-box-shadow: 0 -1px 3px #FFFFFF;
     -moz-box-shadow: 0 -1px 3px #FFFFFF;[/COLOR]
     */
    }
     
  11. astroot macrumors regular

    Joined:
    Nov 12, 2009

Share This Page