By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

2 column layout with different bg colors

P: n/a
I've got what I think is a fairly simple design aim: left column for
ul#navigation, rest of viewport for everything else (div#content,
copyright notice, address). Because ul#navigation comes after
div#content, I'm using position: absolute to place it in the left top
corner of the window, and margin-left on body element to provide the
space necessary.

I'd like to have a green background for the navigation, white on black
for everything else. To that end, I've set the height on #navigation
to 100%. It works on short pages. However, when one scrolls down on
long pages, the green background of the left column disappears.

< http://www.tsmchughs.com/ >

I'd appreciate any tips on extending the green down the entire page,
if such a thing is possible.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Brian wrote:
I've got what I think is a fairly simple design aim: left column for
ul#navigation, rest of viewport for everything else (div#content,
copyright notice, address). Because ul#navigation comes after
div#content, I'm using position: absolute to place it in the left top
corner of the window, and margin-left on body element to provide the
space necessary.

I'd like to have a green background for the navigation, white on black
for everything else. To that end, I've set the height on #navigation
to 100%. It works on short pages.
hmmm - no it doesn't, well it does in Moz and opera but not in IE6, but of
course neither does position: fixed
However, when one scrolls down on
long pages, the green background of the left column disappears.

< http://www.tsmchughs.com/ >

I'd appreciate any tips on extending the green down the entire page,
if such a thing is possible.


Do you have any pages where the content will be 'shorter' than the
navigation in 'normal' browsing conditions? If not then make the body
background green and colour the content to suit.

or use a green background image on the body - sized to suit most 'normal'
variants

nice work ;o)

--
William Tasso - http://WilliamTasso.com
Jul 20 '05 #2

P: n/a
William Tasso wrote:
Brian wrote:
design aim: left column for ul#navigation, rest of viewport for
everything else
I'm using position: absolute to place #navigation in the left top
corner of the window, and margin-left on body element to provide
the space necessary.

I'd like to have a green background for the navigation, white on
black for everything else. To that end, I've set the height on
#navigation to 100%. It works on short pages.
hmmm - no it doesn't, well it does in Moz and opera but not in IE6


It doesn't work in IE6? How so? Is there something I didn't notice
that doesn't work?
but of course neither does position: fixed
Well, true. But I use a child selector so that IE gets absolute, and
Moz and Opera get fixed. The fixed #nav works really well. I'm quite
happy with it. But position: absolute means background color of the
left column is green only for the first screenful.
< http://www.tsmchughs.com/ >


Do you have any pages where the content will be 'shorter' than the
navigation in 'normal' browsing conditions?


Afraid so. The home page, for one.
or use a green background image on the body - sized to suit most
'normal' variants
and repeat-y, I suppose? That's a thought. Of course, it'd be nice
to have a fallback for someone who has image-loading turned off in
their graphical browser, but the image thing is at least something.
nice work ;o)


Why thank you. :)

--
Brian
follow the directions in my address to email me

Jul 20 '05 #3

P: n/a
Brian wrote:
...
It doesn't work in IE6? How so? Is there something I didn't notice
that doesn't work?

http://williamtasso.com/usenet/tsmchughs.jpg
--
William Tasso
Jul 20 '05 #4

P: n/a
William Tasso wrote:
Brian wrote:
It doesn't work in IE6? How so? Is there something I didn't notice
that doesn't work?


http://williamtasso.com/usenet/tsmchughs.jpg


Ah. Thanks for the screen capture. Interesting that IE5.0/Win seems
closer to Mozilla in this case (I tesed Mozilla using position:
absolute). Well, for longer pages, I don't see how IE6 is
significantly worse than 5/Win. I'm still thinking about how to make
this look a little nicer in the IE/win browsers.

--
Brian

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.