Beschrijving: Met CSS, Cascading Stylesheets zijn fraaie effecten te bereiken. Deze serie pagina's die horen bij de sectie Webontwerp, geeft een aantal voorbeelden daarvan. Specifiek betreft deze pagina het creëren van twee kolommen in de viewport van de browser. Trefwoorden: HTML, CSS, Cascading Stylesheets, twee kolommen.
Blijf op de hoogte van wijzigingen aan PretLetters site: abonneer je op PretLetters Actueel, een RSS Feed met de laatste nieuwtjes.
voorbeelden
[Alt]+ gaat naar
Accesskeys
S Sla sectienavigatie over
0 CSS voorbeelden
1 twee kolommen
2 centreren content
3 verticaal centreren
4 menu's met effecten
5 frames simuleren
6 tabellen
7 news alert
8 pop-up's
9 testpagina's

twee kolommen

met CSS

Met Cascading Style Sheets is het heel eenvoudig om op je scherm in mainstream grafische browsers meerdere gebieden te creëren, die zich keurig aanpassen aan je wensen.

Deze tekst verschijnt in het inhoudelijke gebied op je scherm. Zwarte tekst, zonder opmaak, op een witte achtergrond

De hoogte van het gebied is schermvullend.

Door een margin op de zelf gecreëerde container div#content te plaatsen, in je stijlblad, krijg je het effect in de viewport van een lange kolom langs de inhoud van de pagina.

Zie de uitleg in het stylesheet voor hoe dit effect van optisch twee kollomen die beide de hoogte van het venster volledig gebuiken, wordt bereikt.

Overigens: om dit effect te bereiken, de height van de div#content op 100% zetten en zo optisch twee kolommen in de viewport plaatsen, moet je wat spelen met Quirks Mode versus Standards Compliance Mode. Daarnaast kan je in je stijlblad eventueel body>div#content {height:auto;} wel of niet toepassen, net of de Gecko browsers een beetje een fatsoenlijke pagina willen tonen of niet.
De Quirks Mode is in deze pagina niet toegepast en die body>div#content is wel toegepast.

Check ook even de Test directory. Daar bevinden zich verschillende test- en voorbeeldpagina's waarvan er sommige relevant kunnen zijn bij het onderwerp van deze pagina.

Als mijn site je werkelijk bevalt en ik heb je met mijn voorbeelden of testpagina's en de uitleg wat kunnen helpen, overweeg dan een kleine contributie, zodat ik de kosten en moeite in deze site kan blijven steken. Door een kleine bijdrage helpt u mij u te helpen, en anderen. Bezoekt u alstublieft mijn pagina over contributies en donaties. Dank u,