[CSS] Layer 100% hoogte property

[Saeverix]

He mensen,

Ik ben bezig een site te maken met alleen maar CSS layers ipv TABLES voor de layout. Dit lukt tot nu toe erg goed, alleen merk ik zonet een ding wat niet goed is...

Ik heb de site zo gemaakt dat ik een main layer heb waar alle content in komt. Ik dacht ik doe net als bij tables de hoogte 100%. Ziet er allemaal mooi uit, totdat ik het browserscherm kleiner maar zodat hij moet gaan scrollen. Ik zie dan dat de main layer de hoogte heeft van het browserscherm ipv de hoogte van de pagina zelf.

Dit komt omdat hij de andere layers (menu en content) niet IN de main layer ziet maar gewoon erbuiten.

Hoe kan ik ervoor zorgen dat de andere layers echt IN de main layer komen? De andere layers zijn al nested in de main layer, maar ik denk dat ik iets verkeerd doe bij de POSITION property.
Als ik die op relative zet werkt het wel zoals ik bedoel, alleen maar bij 1 layer. De content layer gaat dan onder de menu layer zitten...

Het gaat om de volgende site: http://www.visior-designs.com/dev/webhost4you/site/

hieronder zie je de css file die ik gebruik...

code:

body {
    background-image: url(../images/background.gif);
    color: #E1EFFF;
    margin: 0px;
}

a {
    font-family: Tahoma,Arial;
    font-size: 11px;
    color: #E1EFFF;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    font-family: Tahoma,Arial;
    font-size: 11px;
    color: #E1EFFF;
    text-decoration: underline;
    font-weight: bold;
}

#page {
    width:650px;
    height:100%;
    background-image: url(../images/base.gif);
    padding-top:240px;
    padding-left:31px;
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
}

#menu {
    width:202px;
    background-image: url(../images/boxes/menu_back.gif);
    position:absolute;
    left:46px;
    top:240px;
    z-index:1;
}

#menucontent {
    font-family: Tahoma,Arial;
    font-size: 11px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
}

#content {
    width:368px;
    background-image: url(../images/boxes/content_back.gif);
    position:absolute;
    left:248px;
    top:240px;
    z-index:1;
}

De bron van de pagina zelf moet even via BRON WEERGEVEN, omdat ik php includes gebruik...

Ik hoop dat iemand me kan helpen, want op W3Schools en via de search wordt ik niet veel wijzer...

[JHS]

Ik zie (in FF) het probleem niet Daar wordt de site gewoon weergegeven, juiste formaten, als het formaat wordt aangepast blijft het even groot, maar dat is logisch, je geeft overal absolute waardes voor op . En wat bedoel / wil je met die "layers" ? . Overigens voegt die page div lijkt me niet zoveel toe . Je kan wat daar nu bij staat verplaatsen naar body { } en de andere dingen in je css lijkt me .

[Saeverix]

het gaat om de #page layer... die moet 100% over de pagina komen... zolang het browserscherm groter is dan de inhoud van de pagina lijkt het allemaal super, maar zodra je de pagina kleiner maakt zodat je moet gaan scrollen zie je dat de #page layer de hoogte van de browser aanneemt in plaats van de content...

dit komt dus zoals ik al zei omdat hij de overige layers niet IN de #page layer zet.
de browser ziet dan dat de #page layer leeg is en dus zo klein kan worden als het browserscherm.

maak je browser maar eens een stuk minder hoog zodat de scrollbar verschijnt en scroll naar beneden, dan zie je wat ik bedoel...

En wat ik bedoel met layers? De hele site bestaat uit LAYERS...
En waarom voegt de div PAGE niets toe? Die zorgt voor de achtergrond, en die kan ik later gebruiken als ik bijvoorbeeld de site in het midden van het scherm wil hebben in plaats van links... Hij voegt dus zeker wel wat toe...

Want zou ik die achtergrond in body doen dat is het probleem al weg...

[Koeniepoenie]

Zie dit kleine handige artikel op Quirksmode voor meer info.

offtopic:
Dit behoort in W&G btw

[ Voor 6% gewijzigd door Koeniepoenie op 22-11-2004 21:36 ]

[Saeverix]

KoenieMan schreef op maandag 22 november 2004 @ 21:36:
Zie dit kleine handige artikel op Quirksmode voor meer info.

offtopic:
Dit behoort in W&G btw

ziet er leuk uit, maar t is geen oplossing voor mijn probleem...

[JHS]

Als ik je goed begrijp wil je dat er een minimale hoogte zit aan de pagina . Dan voeg je toch min-heigt toe .

[Creepy]

P&W -> W&G

[Saeverix]

is het zo moeilijk te begrijpen?

maak je browser kleiner zodat er een scrollbar komt.
scroll naar beneden en kijk naar de achtergrond (het blauwe met de schaduw erachter)

wat ik dus wil is dat die achtergrond over de hele pagina komt in plaats van de hoogte van het browserscherm aannemen...

dit kan dus door op 1 of andere manier die andere 2 layers in de hoofd layer te krijgen... maar hoe doe ik dat...

[Verwijderd]

Lees dit eens:

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

Ik heb niet eens echt gekeken naar je precieze div's maar dit soort problemen zijn niet zeldzaam. Div's doen dit nu eenmaal als de content ze niet oprekt en dat gebeurt iig niet als de inhoud er absoluut gepositioneerd in staat. (enigszins kort door de bocht gezegd.)

[Foutlook]

Saeverix schreef op dinsdag 23 november 2004 @ 09:16:
wat ik dus wil is dat die achtergrond over de hele pagina komt in plaats van de hoogte van het browserscherm aannemen...

Komt het niet gewoon omdat je naast de 100% hoogte ook nog een padding-top meegeeft van zoveel pixels? Vaak wordt deze bij de hoogte van de layer opgeteld?

Oplossing is dan evt met javascript de hoogte van het venster binnenhalen, de padding-top eraf trekken en dat als hoogte van de layer zetten.

edit: het tweede, betere idee is volgens mij ook al 2x genoemd. Waarom zet je de achtergrond uit de #page layer niet gewoon in de body {}? Dit is ook grofweg het idee van de fauxcolumns van ALA.

[ Voor 16% gewijzigd door Foutlook op 23-11-2004 09:35 ]

[1st_Ro]

Voeg aan die #page DIV eens "bottom: 0px" toe?

Ik heb net even een fake documentje gemaakt met de volgende code (gedeeltelijk overgenomen van jouw CSS):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<body style="padding: 0px; margin: 0px;">
<div style="position: absolute; width:650px; height:100%; padding-top:240px;
padding-left:31px; bottom: 0px; background: #FF0000">
</body>
</html>

En dat werkt in zowel Firefox als in IE 6.0
(tiz nog vroeg, dus als ik het verkeerd heb begrepen: mep me maar op mijn achterhoofd ofzo )

[ Voor 12% gewijzigd door 1st_Ro op 23-11-2004 09:39 ]

[Saeverix]

1st_Ro schreef op dinsdag 23 november 2004 @ 09:37:
(tiz nog vroeg, dus als ik het verkeerd heb begrepen: mep me maar op mijn achterhoofd ofzo )

bij deze

is het nou echt niet mogelijk om die andere 2 layers (menu en content) IN die andere layer te krijgen? als ik dan de positie van de 'pagina' layer verander dat de andere layers meegaan... net zoals dat bij tabellen het geval is....

op dit moment zijn die andere 2 layers wel nested in de 'pagina' layer alleen zo ziet de browser het niet... de browser ziet nu de 'pagina' layer gewoon leeg en denkt die layer kan ik zo klein mogelijk maken...
zodra die andere layers er echt IN zaten zou de browser denken: hey... de layer kan niet kleiner dan de content en dan blijft hij dus evengroot zoals ik het wil hebben, maar HOE DOE IK DAT?

[Saeverix]

niemand?

[Verwijderd]

Vanuit semantiek-oogpunt een beetje 'schmutzig', maar het volgende doet het wel redelijk.

• mainContainer div met daarin:
• een left-float linkermenu
• een left-float content-div
• een footer-div met clear:both , dat is de 'vieze' van het stel. Deze zorgt ervoor dat de mainContainer meerekt.

Ik heb dit zelf nog nooit zo toegepast en ook maar ff snel op IE en FF gecheckt dus meeschien zie ik iets over het hoofd en is dit helemaal niets maar toch...

Voorbeelden (zie source):
veel tekst aan de rechterkant
veel tekst aan de linkerkant

[Saeverix]

hmm dit ziet er goed uit... ik had het inmiddels opgelost met de body bg, maar als ik straks wat wil uitbreiden kan ik dat mooi gebruiken...

thanks