Background stripe 100% of document? Last piece of the jigsaw...

[seajays]

OK, I've managed to get just about everything working in CSS and XHTML,
but there is one last peice of the jigsaw.

http://www.seajays.org.uk/2know_dev/

At the moment on the site, I have a gray striped background behind the
left hand menu. This was achieved using a body background image.

It looks OK, until you change the size of the text in the browser (i.e.
larger, smaller etc), and then the menu items start to float out past
the edge of the background image (because the image is a fixed width).

Here's what I've tried:

1) Creating a div in the background, or putting an image in the
background of the menu area;
Problem: can't get it to be 100% of the document (only the viewport)

2) Creating the background image as *all* stripes over the whole screen
and having a white background for the content area;
Problem: on high resolution displays, when maximised the whole width
of the bottom of the screen ends up covered in the stripey background.

Any suggestions about ways to achieve this? I've looked around and it
seems 100% of document is very difficult to achieve (Out of interest,
is this an ommission in CSS? Does CSS3 address this?)

Cheers,
Colin.

[Jim Moe]

se*****@hotmail .com wrote:

At the moment on the site, I have a gray striped background behind the
left hand menu. This was achieved using a body background image.

It looks OK, until you change the size of the text in the browser (i.e.
larger, smaller etc), and then the menu items start to float out past
the edge of the background image (because the image is a fixed width).

Try a fixed width "sitemenu" div. You have it set to 14em which, of
course, expands with font size.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[seajays]

Jim Moe wrote:

se*****@hotmail .com wrote:

At the moment on the site, I have a gray striped background behind the left hand menu. This was achieved using a body background image.

It looks OK, until you change the size of the text in the browser (i.e. larger, smaller etc), and then the menu items start to float out past the edge of the background image (because the image is a fixed width). Try a fixed width "sitemenu" div. You have it set to 14em which,

of course, expands with font size.

Thanks - this is certainly a possibility, but as the text in the menu
increases in size it will start to wrap onto two lines, which I'd
prefer to avoid. If possible I'd like the width to expand along with
it, so that the whole page stays in proportion.

Cheers,
Colin.

[Jim Moe]

se*****@hotmail .com wrote:

Try a fixed width "sitemenu" div. You have it set to 14em which, of
course, expands with font size.

Thanks - this is certainly a possibility, but as the text in the menu
increases in size it will start to wrap onto two lines, which I'd
prefer to avoid. If possible I'd like the width to expand along with
it, so that the whole page stays in proportion.

You have a very generous menu area. The text doesn't wrap until a 170%
font size increase. By then other font-related spacing has distorted your
layout significantly.
Live with the text wrap, or set the "sitemenu" div to
"white-space:nowrap", or use single word menu text.

Aside: Your font choices (verdana, tahoma, georgia, times new) are
Windows-only. Is this intentional?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[seajays]

Jim Moe wrote:

se*****@hotmail .com wrote:

Try a fixed width "sitemenu" div. You have it set to 14em which, ofcourse, expands with font size.
Thanks - this is certainly a possibility, but as the text in the menu increases in size it will start to wrap onto two lines, which I'd
prefer to avoid. If possible I'd like the width to expand along with it, so that the whole page stays in proportion.

You have a very generous menu area. The text doesn't wrap until a

170% font size increase. By then other font-related spacing has distorted your layout significantly.
Live with the text wrap, or set the "sitemenu" div to
"white-space:nowrap", or use single word menu text.
Thanks - I think you are right here - I will have a go at fixing the
width of the menu.
Aside: Your font choices (verdana, tahoma, georgia, times new) are Windows-only. Is this intentional?

I mainly want Verdana and the Copperplate (the graphic designers
specified these). Hence Copperplate is also an embedded font for IE on
PCs in case it is not installed. I thought this was a reasonable
compromise, otherwise we may have had to go for graphic images instead.

I understand these fonts are actually available for all the platforms;
PC/Mac/Unix, however of course if they aren't installed there's a
problem - in which case I am less concerned about what fonts are being
used.

I then just specified some general fonts, like Georgia etc. some of
which are also all platforms according to the font surveys here
http://www.codestyle.org/css/font-family/index.shtml

Cheers,
Colin.

[Jim Moe]

se*****@hotmail .com wrote:

You have a very generous menu area. The text doesn't wrap until a 170%
font size increase. By then other font-related spacing has distorted
your layout significantly.
Live with the text wrap, or set the "sitemenu" div to
"white-space:nowrap", or use single word menu text.

Thanks - I think you are right here - I will have a go at fixing the
width of the menu.

You could change the "bodybackgr ond" div's left position to match the
sitemenu div's width, too. The boundary between the menu and main content
stays fixed while the text adjusts around it.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)