creating variable height bgimage in nav

@LizzyBJan 31.2007

Hi,

Ive created this page
~~[url]~~http://www.whizzliz.co.uk/littlemasters/[/url]

behind the navigation is a paint splatter image and I’ve set it a min height to fill down to the bottom. What I want to do though is have it auto fill against the lenght of the content section as the other pages will be different lengths.

I have a feeling its something simple but I just cant figure it out.

Thanks
Liz

to post a comment

CSS

@CentauriJan 31.2007 — #Cheat. As there is really no way of getting the left column height the same as the main content, don't bother putting the background on the left column.

Remove the background image info and height from #navigation. Change the margin on #maincontent to zero and change the padding to give 160px wide left padding (this padding will be under the menu). Then apply the background to the #maincontent div, repeated-y instead. This applies the background to the left side of teh main content div itself, which happens to be under the navigation column.

Css changes:

[CODE]#maincontent{
 background-image: url(navbg.jpg);
 background-repeat:repeat-y;
 padding:10px 10px 10px 160px;
 margin:0; 
 } 
 
 #navigation{
 float:left;
 width:150px; 
 }	[/CODE]

Cheers

Graeme

@LizzyBauthorJan 31.2007 — #Hi Graeme - you are my hero! thank you!

Just one question - you have put margin:0 in the #maincontent - is this needed as i set margins etc to 0 with * at the very start of my stylesheet (trick you taught me earlier)

Liz

@CentauriJan 31.2007 — #I'm not overly sure on that margin. I used the Firefox Webdeveloper Bar to change the css on the fly, and it seemed to require that zero setting. That may be just a quirk of the Webdeveloper Bar environment, or it could be because of the margins on the container - not sure as I haven't tried this standalone. See what happens if you leave that out.

Cheers

Graeme

@LizzyBauthorJan 31.2007 — #HI - I removed it and it looks the same so posiibly not needed. Ill leave it out and get a few people to test on different browsers. Thanks for you help again. I also need that trick on another site!

Liz

creating variable height bgimage in nav

4 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

creating variable height bgimage in nav

4 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #CSS _↴