[CSS] Basis website

[SvenZ]

Wat ik wil bereiken:

code:

___________________________________
|                                 |
|                1                |
|                                 |
|_________________________________|
|     |                     |     |
|     |                     |     |
|     |                     |     |
|     |                     |     |
|  2  |          3          |  4  |
|     |                     |     |
|     |                     |     |
|     |                     |     |
|     |                     |     |
|_____|_____________________|_____|
|               5                 |
|_________________________________|

Uitleg:
Het geheel moet in het midden van de pagina staan. Het geheel is 600px breed. De hoogte is de hoogte van de browser OF als de content groter is moet hij automatisch groter 'groeien'. De vakken 1 en 5 hebben een bepaalde grootte die altijd zo moeten zijn (1 staat altijd bovenaan, 5 staat altijd onderaan). Vak 2,3 en 4 hebben een bepaalde breedte die vooraf al bepaald is. Deze 3 moeten wel weer met de hoogte meegroeien. Duidelijk?

Hoe krijg ik dit in totaal klaar met CSS en XHTML. Ik heb pagina's doorgespit op het internet en andere website bekenen, maar kom er toch niet uit. Bijv. http://www.manisheriar.com/holygrail/ , maar deze is niet minsten zo lang als de browser is, en krijg het er zelf ook niet ingebouwd.

Wie o wie weet hoe ik dit toch kan bereiken...

[Verwijderd]

De "veiligste" methode is met javascript de offsetHeight van het content element uitlezen, en als die kleiner is dan een bepaalde waarde stel je gewoon de hoogte in door met Javascript een style property toe te kennen.

[edit]
Ikzelf vind het onzin om een pagina minstens zo hoog als de browser te maken, een hoop lege ruimte is ook niet mooi, maar dat is een kwestie van mening uiteraard. Ik vind het doodnormaal om rond te surfen met vensters van 800 pixels breed en zo'n 1100 hoog. De door jou genoemde pagina zou er echt niet mooier op worden als er 3 lege kolomen de ruimte moeten vullen.

[ Voor 48% gewijzigd door Verwijderd op 09-07-2005 14:14 ]

[André]

Gebruik deze voor 1-4:
http://www.glish.com/css/3.asp

En deze voor 5:
[rml][ CSS] De perfecte CSS-only footer[/rml]

Verwijderd schreef op zaterdag 09 juli 2005 @ 14:11:
De "veiligste" methode is met javascript de offsetHeight van het content element uitlezen, en als die kleiner is dan een bepaalde waarde stel je gewoon de hoogte in door met Javascript een style property toe te kennen.

Of zo:

code:

#content {
  min-height: 600px; 
  height: expression(document.getElementById("content").offsetHeight < 600 ? '600px' : '100%'); 
}

[ Voor 60% gewijzigd door André op 09-07-2005 14:16 ]

[SvenZ]

zo snel ik nu even zie bij 1-4 op die website is dat 2-4 zo groot zijn als de tekst, en niet opvullend tot onderaan... ik ga het dalijk even proberen

edit:

Ikzelf vind het onzin om een pagina minstens zo hoog als de browser te maken, een hoop lege ruimte is ook niet mooi, maar dat is een kwestie van mening uiteraard. Ik vind het doodnormaal om rond te surfen met vensters van 800 pixels breed en zo'n 1100 hoog. De door jou genoemde pagina zou er echt niet mooier op worden als er 3 lege kolomen de ruimte moeten vullen.

Daar heb je gelijk in, maar hoe kan ik er wel voor zorgen dat 2-4 allemaal even groot zijn?

[ Voor 67% gewijzigd door SvenZ op 09-07-2005 14:20 ]

[André]

SvenZ schreef op zaterdag 09 juli 2005 @ 14:17:
zo snel ik nu even zie bij 1-4 op die website is dat 2-4 zo groot zijn als de tekst, en niet opvullend tot onderaan... ik ga het dalijk even proberen

Dat zul je dus aan moeten passen

Daar heb je gelijk in, maar hoe kan ik er wel voor zorgen dat 2-4 allemaal even groot zijn?

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

[Verwijderd]

http://www.pmob.co.uk/temp/3colcentred_2a.htm

[Neejoh]

Is het niet gewoon deze?

edit:
Mja, is al genoeg geantwoord dus

[ Voor 24% gewijzigd door Neejoh op 09-07-2005 17:15 ]

[Verwijderd]

Neejoh schreef op zaterdag 09 juli 2005 @ 17:15:
Is het niet gewoon deze?

Nee, hier staat de footer niet onderaan.

[SvenZ]

Verwijderd schreef op zaterdag 09 juli 2005 @ 16:34:
http://www.pmob.co.uk/temp/3colcentred_2a.htm

Hiermee is het perfect gelukt! danku

[Neejoh]

André schreef op zaterdag 09 juli 2005 @ 14:13:
Gebruik deze voor 1-4:
http://www.glish.com/css/3.asp

En deze voor 5:
[rml][ CSS] De perfecte CSS-only footer[/rml]




[...]


Of zo:

code:

#content {
  min-height: 600px; 
  height: expression(document.getElementById("content").offsetHeight < 600 ? '600px' : '100%'); 
}

Cool, wist niet dat je javascript in een CSS document kon gebruiken

[André]

In IE kan dat ja

[Verwijderd]

http://cross-browser.com/x/examples/layout3.html

Hier is wel juiste js manier