Spread the navigation background across the whole browser

[Got Josh?]

Hey there!

I need to spread the navigation background across the whole browser, any suggestions?

http://bibliotecapjb.com/cloudit-dev/

 

[brisbaneguy29]

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

 

[Got Josh?]

also i cant seem to center the clouds with the links any help ?

 

[angelwatt]

also i cant seem to center the clouds with the links any help ?

Use padding and text alignment on the list item.

ul#nav li {
 ...
 padding-top: 50px;
 text-align: center;
}

 

[smilinmonki666]

Is it the div id "nav-container" your looking to fit the width of the page?

 

[smilinmonki666]

Looking at your css & your HTML your over complicating the page with containers pushing the page layout to how you want it...

 

[Got Josh?]

Thanks angel ! That worked, perfectly. Yes, it's the nav container that i want to make full width on the page.

 

[smilinmonki666]

Thanks angel ! That worked, perfectly. Yes, it's the nav container that i want to make full width on the page.

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.

 

[Got Josh?]

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.

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

 

[angelwatt]

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.

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]
 */
}

 

[astroot]

That Coda slider is pretty wonky.