[CSS] Kolommen met gelijke hoogte / uitlijning

[Wouter]

Ik ben met een website bezig voor een nieuw te starten bedrijfje van mijn zus.
Een vrij eenvoudige site, niets overdreven moeilijks, maar ik loop nu toch tegen wat layoutprobleempjes aan, welke ik maar niet opgelost krijg.

Ik ben niet helemaal nieuw met CSS, maar heel veel ervaring heb ik ook niet. Het probleem zit hem in het gelijk krijgen van de hoogte van verschillende kolommen in de layout.

Ik weet dat dit een ontzettend veelbesproken thema is en dat hier op internet erg veel over terug te vinden is, maar ik heb de afgelopen uren al een paar verschillende technieken geprobeerd om mijn kolommen goed uitgelijnd te krijgen, maar geen van allen bleek te werken voor mijn layout. Het is in mijn geval een nét iets complexere layout dan in de voorbeelden, en de tutorials die ik heb gevonden behandelen een dergelijke situatie niet.

Dus bij deze wil ik het toch aan de experts vragen hoe ik dat zou kunnen oplossen voor deze specifieke layout.


Hoe ik het in CSS heb aangepakt kan ik denk ik het duidelijkst illustreren met een afbeelding van de layout, waarin de verschillende geneste div's zijn aangegeven:



Schematische weergave van de nesting:

code:

page
   header
   wrapper
      leftcol
      maincol
         maincontentarea
         [afbeeldingen]
      rightcol
         rightmenu
         [afbeeldingen]

De afbeelding hierboven is het ideale ontwerp.
De huidige stand van zaken van de Joomla template die ik voor de site aan het maken ben is als volgt:




Wat ik precies wil:

Ik wil dat alle elementen onderaan op dezelfde hoogte uitkomen, zoals in het ontwerp.
Specifieker:

De hoogte van de site moet bepaald worden door de langste kolom.

Voor #rightcol wil ik dat #rightmenu in de hoogte schaalt.
Voor #maincol wil ik dat #maincontentarea in de hoogte schaalt.

Als ik geen afbeeldingen zou gebruiken onderaan deze kolommen, zou het een stuk eenvoudiger zijn en had ik genoeg gehad aan de tutorials op internet.

Maar in deze situatie kom ik er niet uit.

De afbeeldingen zullen per pagina gaan verschillen en kunnen ook andere afmetingen hebben.
Toch wil ik dat #rightmenu en #maincontentarea variabelen blijven schalen om 't geheel onderaan de pagina op 1 lijn te krijgen.

Sommige pagina's hebben misschien helemaal geen afbeeldingen onderaan de kolommen. In dat geval moeten #maincontentarea en #rightmenu gewoon de hele hoogte vullen.


Ik hoop dat een beetje duidelijk is wat ik bedoel.

Mocht het nodig zijn, dan zijn hier ook de links naar de HTML / PHP en CSS files:

index.php
template.css


Hoop dat iemand me een beetje in de juiste richting kan sturen

[Bosmonster]

Ander design maken waarin hoogte niet van belang is. Pagina's hebben namelijk geen hoogte, dus dit is iets om in je design rekening mee te houden.

Anders kun je terugvallen op trucjes en scriptjes, maar dat is symptoombestrijding.

[ Voor 84% gewijzigd door Bosmonster op 28-03-2011 16:50 ]

[Wouter]

Hmm, dus als ik het goed begrijp is wat ik wil niet mogelijk met CSS?

[ Voor 95% gewijzigd door Wouter op 28-03-2011 16:52 ]

[Bosmonster]

Alleen normale CSS niet. Je zou wat kunnen pielen met min-height:100% en display: table-cell of weet ik het, maar het blijft aanmodderen.

[ Voor 79% gewijzigd door Bosmonster op 28-03-2011 17:57 ]

[Wouter]

Okay, fair enough.

Eigenlijk hoeft het er ook alleen op de 1e pagina zo uit te zien wat mij betreft,
gewoon lekker clean en strak als binnenkomer.

Dat heb ik nu opgelost met min-height.

Dan hoeft alleen nog het menu links mee te schalen, maar dat is niet zo'n grote uitdaging.


Thnx.

[fonsoy]

Bosmonster schreef op maandag 28 maart 2011 @ 17:56:
Alleen normale CSS niet. Je zou wat kunnen pielen met min-height:100% en display: table-cell of weet ik het, maar het blijft aanmodderen.

Volgens mij werkt min-height niet in bepaalde versies van Internet Explorer. Dat werd mij verteld tijdens een webdesign vak dat ik deed.

[Bosmonster]

Min-height werkt in IE7+

[Verwijderd]

Bosmonster schreef op dinsdag 29 maart 2011 @ 07:47:
Min-height werkt in IE7+

En in IE6- werkt de height property zoals min-height zou moeten werken

[fonsoy]

Bosmonster schreef op dinsdag 29 maart 2011 @ 07:47:
Min-height werkt in IE7+

Ik wist dit niet! Ontzettend bedankt, dit maakt mijn leven namelijk ook makkelijker

Verwijderd schreef op dinsdag 29 maart 2011 @ 07:55:
[...]

En in IE6- werkt de height property zoals min-height zou moeten werken

Toepasbaar dus met de css [If IE6] CSS attributen.

Zo zie je maar dat webdesign kennis snel veroudert. Die docent was al een ouwe rot in het vak.

[mcDavid]

fonsoy schreef op dinsdag 29 maart 2011 @ 10:17:
[...]

Ik wist dit niet! Ontzettend bedankt, dit maakt mijn leven namelijk ook makkelijker
[...]

Toepasbaar dus met de css [If IE6] CSS attributen.

Zo zie je maar dat webdesign kennis snel veroudert. Die docent was al een ouwe rot in het vak.

Of gewoon de hack gebruiken zoals die wereldwijd al jaren door iedereen gebruikt wordt (althans, iedereen die uberhaupt nog de moeite neemt IE6 te supporten):

code:

min-height: 100px;
height: auto !important;
height: 100px;

Overigens moet de layout van TS prima met alleen CSS te maken zijn. Gewoon een combinatie van faux-columns met één van de 100-en "sticky footer" of "100% height" layout voorbeelden die je met google kunt vinden.

-edit- even wat specifieker:
- container met een min-height
- divs die met de onderkant gelijk moeten, absoluut positioneren t.o.v. de onderkant van de container
- de variable-content divs een margin-bottom geven even groot als de div die eronder staat.

Volgens mij moet dat al genoeg zijn.

[ Voor 15% gewijzigd door mcDavid op 29-03-2011 22:35 ]