[css] annoying background and body height

[Serge Hartmann]

hi there,

I created two different backgrounds for the same page to obtain a (fake)
left margin and a (true) right margin.
-> left background, defined in body section, aligned bottom and with
vertical repeat.
-> right background, defined in html section, aligned top and without repeat

it may look weird, but I don't think my problem is due to these margins.

now, the problem :
if I define html,body{height:100%;} then for long pages (much content - text
or images) the background isn't displayed while scrolling down :
http://www.antipolis.fr/fr/concept-hommes.php

if I *don't* define html,body{height:100%;} then for short contents the
background is cut in the window.
you may try this page, removing height:100%; in html and body sections :
http://www.antipolis.fr/fr/even-hall.php

my goal :
I would like the left background being continued while scrolling down *and*
this background being displayed even if the content (class "bloc-texte") is
smaller than the window's height.
FYI here is my stylesheet : http://www.antipolis.fr/style/antipolis.css

--
Serge Hartmann
jabber-id : le******@amessage.info

[Markus Ernst]

Serge Hartmann wrote:

now, the problem :
if I define html,body{height:100%;} then for long pages (much content
- text or images) the background isn't displayed while scrolling down
: http://www.antipolis.fr/fr/concept-hommes.php

if I *don't* define html,body{height:100%;} then for short contents
the background is cut in the window.
you may try this page, removing height:100%; in html and body
sections : http://www.antipolis.fr/fr/even-hall.php

my goal :
I would like the left background being continued while scrolling down
*and* this background being displayed even if the content (class
"bloc-texte") is smaller than the window's height.
FYI here is my stylesheet :
http://www.antipolis.fr/style/antipolis.css

I have exactly the same problem, I have just been googling for several hours
and playing around with Barbara de Zoetes tutorial at
http://home.wanadoo.nl/b.de.zoete/vo...en-layout.html

My test case may be a little bit easier to get through than yours, though it
shows the same issue:
http://www.markusernst.ch/zanre/
When scrolling down, the left menu bars are not extended to the bottom of
the contents.

I know there are solutions with tricky floats, but I need absolute
positioning for the top illustration color change to work at variing font
sizes.

Though this problem has been discussed over and over, I doubt that there is
an elegant solution for this, and rather than applying a sequence of
browser-specific hacks I will go back to a simple table layout for the macro
structure of the page.

Anyway I still hope there is a nice CSS only solution out there...

--
Markus

[Blacksmith]

> My test case may be a little bit easier to get through than yours, though

it shows the same issue:
http://www.markusernst.ch/zanre/
When scrolling down, the left menu bars are not extended to the bottom of
the contents.

I assume you know about faux columns:

http://www.alistapart.com/articles/fauxcolumns/

[Markus Ernst]

Blacksmith wrote:

My test case may be a little bit easier to get through than yours,
though it shows the same issue:
http://www.markusernst.ch/zanre/
When scrolling down, the left menu bars are not extended to the
bottom of the contents.

I assume you know about faux columns:

http://www.alistapart.com/articles/fauxcolumns/

Thank you for pointing me to this article; I knew it before and also used
this technique in the past, and will use it again. But it requires column
widths to be defined in px instead of em, which is elsewhere considered as
bad style. Even the ALA layout breaks at big font sizes. So it is actually a
very good workaround, but not a solution to a lack in CSS.

--
Markus

[Serge Hartmann]

Markus Ernst wrote:

I assume you know about faux columns:
http://www.alistapart.com/articles/fauxcolumns/

this technique in the past, and will use it again. But it requires column
widths to be defined in px instead of em, which is elsewhere considered as
bad style. Even the ALA layout breaks at big font sizes. So it is actually
a very good workaround, but not a solution to a lack in CSS.

These solutions requires absolute width.
I don't want to "control" the user's window size, or the displayable area.
And I don't wan't to choose between small screens capability and wasting
space on left or right sides.

To understand my grievance, here is a screenshot of "faux columns" on my
1280x1024 screen :
http://www.antipolis.fr/tmp/capturetmp-browser02.jpg
More than a half of the window is wasted.

In comparison my website matches the browser's window, whatever is the
size : http://www.antipolis.fr/fr/accessmap.php
I just want the background beeing displayed correctly, but the min-height
parameter (for body and html sections) seems totally inefficient.

--
Serge Hartmann
jabber-id : le******@amessage.info

[Blacksmith]

> These solutions requires absolute width.

I don't want to "control" the user's window size, or the displayable area.
And I don't wan't to choose between small screens capability and wasting
space on left or right sides.

To understand my grievance, here is a screenshot of "faux columns" on my
1280x1024 screen :
http://www.antipolis.fr/tmp/capturetmp-browser02.jpg
More than a half of the window is wasted.

In comparison my website matches the browser's window, whatever is the
size : http://www.antipolis.fr/fr/accessmap.php
I just want the background beeing displayed correctly, but the min-height
parameter (for body and html sections) seems totally inefficient.

--
Serge Hartmann
jabber-id : le******@amessage.info

can you use background-attachment ?

[kchayka]

Markus Ernst wrote:

Blacksmith wrote:

http://www.alistapart.com/articles/fauxcolumns/

it requires column
widths to be defined in px instead of em, which is elsewhere considered as
bad style.

You can make widths in em or % if you want, it just requires modifying
the background image and its positioning. % is quite easy to do, em
takes more experimenting to get the positioning where you'd like it. 2
columns is also pretty easy. More columns mostly means more containers,
each with a different background image. Transparent images are often
required.

For just a vertical bar separating columns, make your image width the
size you want it and position at whatever horizontal em or % position
suits you.

For different colored columns in %, use a very wide image, like 2000px,
color one end, and position accordingly.

I'm sure I've done different colored columns in em, but can't find any
of my samples at the moment. IIRC, the image width is not as wide, maybe
500px or so, just positioned at em.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Serge Hartmann]

Blacksmith wrote:

I just want the background beeing displayed correctly, but the min-height
parameter (for body and html sections) seems totally inefficient.

can you use background-attachment ?

I did.
it does not solve anything, the only difference is : fixed or scrollable
background
but it disapears anyway while scrolling down.

--
Serge Hartmann
jabber-id : le******@amessage.info

[Daniel Déchelotte]

Serge Hartmann a écrit :

| Blacksmith wrote:
|
| > can you use background-attachment ?
|
| I did.
| it does not solve anything, the only difference is : fixed or scrollable
| background but it disapears anyway while scrolling down.

My web site is in no way a CSS-reference, but I managed to have
- #content {width: 100%, max-width: 50em; } (content uses available width
but avoids long lines)
- background to the bottom on short pages[1,2]
- background "to the bottom" on long pages[3], because background is attached
on the viewport (background is inside DIV's whose position are fixed)

[1] http://yo.dan.free.fr/bridge.phtml
[2] http://yo.dan.free.fr/TSI.phtml.en
[3] http://yo.dan.free.fr/profils-reseau.phtml.en

I had the added complexity of using a non-solid background, and that
required a somewhat complicated markup. Also, it degrades poorly in older
IEs (this is of little concern to me, maybe not to you).

Not a reference, as I said earlier, but it could hint you to a solution.
Especially, fixed background could be the way to go.
HTH,
--
Daniel Déchelotte
http://yo.dan.free.fr/