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. In deze pagina wordt de broodtekst van de pagina gecentreerd in de viewport van de browser, zowel horizontaal als verticaal. Er worden geen frames gebruikt, slechts cascading style sheets met semantische markup. Trefwoorden: HTML, CSS, Cascading Stylesheets, verticaal centreren, simuleren frames.
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

Centreren Content

In het verlengde van het op het scherm toveren van twee kolommen kan je met CSS die daar sprekend op lijkt ook de content van je pagina centreren natuurlijk.

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.

De breedte is gecentreerd in de viewport.

Zie de stylesheet voor hoe dit effect van optisch twee kollomen die beide de hoogte van het venster volledig gebuiken, wordt bereikt.
Eigenlijk gebruik je deze keer de padding op het element body, waar je bij de layout voor twee kolommen gebruik maakt van de margin-right op de div#content. Andere methode, zelfde effect.

Overigens: om dit effect te bereiken, de height van de div#content op 100% zetten en zo optisch één gecentreerde kolom 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 en die body>div#content zijn in deze pagina beide 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,

Flaptekst

Het centreren van je content doe je niet zomaar. Toch? Dat doe je met een reden.

Bijvoorbeeld omdat je een stukje tekst hebt dat over de site of pagina gaat, maar niet tot de inhoud behoort.
Een soort flaptekst dus, metacommunicatie, zoals dit stukje.