Tekst verdelen in kolommen m.b.v. CSS
Op veel websites is de tekst verdeeld over kolommen, net zoals in een boek of in de krant. Traditioneel wordt dat gedaan met behulp van tabellen, maar het kan ook met CSS. Op deze pagina wordt besproken hoe je dit kunt aanpakken.
- De werking is getest met Internet Explorer 7, FireFox 2.0.0.16 en Opera 9.26. Correcte werking met oudere
versies van deze browsers is onzeker. Het is daar mogelijk dat de kolom toch met de content mee scrollt. Dat
geldt ook bij andere browsers dan de hier genoemde. In het slechtste geval lijkt de opmaak helemaal nergens op...
- De volgende zaken worden besproken:
- De opzet van de CSS- en HTML-code
- Verwijzingen naar uitgewerkte voorbeelden
- Opbouw van de code
De eerste regel luidt:<!doctype html>. - Het voert te ver om diep in te gaan op CSS zelf. Daarover zijn al heel veel boeken geschreven en op internet zijn ook veel sites over dit onderwerp te vinden.
- Het ontstaan van dubbele code is niet te voorkomen. Dat hangt direct samen met deze aanpak. Je moet nl.
op elke pagina van je website de verdeling in kolommen opnieuw maken.
- De opmaak van de bladzijde wordt vastgelegd in een style-sheet. Het beste kun je dat in een apart .CSS-bestand
zetten en linken vanuit de HEAD. Daarmee voorkom je toch veel dubbele code:
<link rel="stylesheet" href=".....css">
- De verdeling van de bladzijde wordt geregeld met <div>-tags. De BODY bevat één <div>-tag, die alle andere code omvat. Het is dus een 'container'. De kolommen in de pagina worden gepositioneerd ten opzicht van deze <div>-tag.
- De kolommen zet je in een block dat alle nuttige content bevat. Hiervoor definieer je een id dat bijvoorbeeld content heet.
- De kolommen zelf worden ook elk gemaakt met een <div class="...">-tag. Elke kolom heeft een dezelfde class. De class wordt gedefinieerd in het style-sheet.
- In dit voorbeeld heeft de class de naam kolom. De eerstgenoemde eigenschap is display:block. Daarmee schrijf je voor dat de inhoud van kolom moet worden weergegeven. Sommige browsers doen dat niet uit zichzelf. Met display:block weet je zeker dat het goed gaat.
- De tekst in kolom wordt uitgevuld met behulp van text-align:justify. Voor het weergeven van plaatjes is dat niet handig. Die kun je het beste links, rechts of gecentreerd laten plaatsen. De <img>-tags die binnen kolom voorkomen moeten dus anders worden behandeld. In het voorbeeld worden plaatjes rechts uitgelijnd. Dat doe je met: .kolom img {float:right;}.
- De belangrijkste eigenschap van een kolom is de breedte. Die geef je op als percentage van de breedte van het block waarin de kolom wordt gemaakt. Als je twee kolommen wilt is 44% het maximum. Dat komt doordat je ook nog witruimte tussen en naast de kolommen nodig hebt. De breedte van de kolommen geef je op met width. Voor de witruimte kun je het best padding (binnenmarge) gebruiken.
- Alle opmaak-eigenschappen die niet in kolom zijn genoemd worden geërfd (overgenomen) van de blokken waarin de kolommen zijn gemaakt.
- Kolommen worden gemaakt met een class, niet met een id.
Voor elke kolom maak je een block met<div class="kolom"> ... </div>, binnen een container voor de inhoud. Zie de voorbeeld-code hier onder.
- Voorbeeld: De structuur van een HTML-code met twee kolommen ziet er als volgt uit:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href=".....css">
.
.
</head>
<body>
<div> <!-- Main container -->
.
. Hier zou bijvoorbeeld een menu kunnen staan
.
<div id="content"> <!-- Inhoud container -->
<div class="kolom"> <!-- kolom 1 -->
.
. Tekst en illustraties in kolom 1 staan hier
.
</div><!-- einde kolom 1 -->
<div class="kolom"> <!-- kolom 2 -->
.
. Tekst en illustraties in kolom 2 staan hier
.
</div><!-- einde kolom 2 -->
</div> <!-- Einde Inhoud container -->
</div> <!-- Einde Main container -->
</body>
</html>
- Uiteraard hoort hier een .CSS-file bij. Die zou er als als volgt uit kunnen zien:
/* Onderstaande regel geldt algemeen voor de hele <html>-sectie */
* html {overflow:hidden;}
/* Voorbeeld voor de opmaak van de <body>. Natuurlijk kan dit door andere id's
en classes worden overschreven. */
body {background-color:#fafafa; background-attachment:fixed; margin:0;
padding:0 10px 0 10px; border:0; height:100%;}
/* Maak een scrollbalk als het blok niet in het window past */
* html body { overflow:scroll;}
/* meer opmaak voor de <body> */
body {font:83.333%/1.3em verdana,arial,sans-serif; letter-spacing:.08ex;}
/* Definitie van de content */
#content {position:relative; display:block; margin:10px 20px 10px 20px;
background:transparent; overflow:hidden; z-index:10;}
/* Afmetingen en opmaak voor de kolommen */
.kolom {display:block; padding:10px 10px 10px 10px; width:44%;
margin-left:5px; text-align:justify; float:left; color:#000;}
.kolom img {float:right;}
- Merk op dat het bovenstaande alleen een globale indruk geeft van hoe de code er uit ziet!
Uitgewerkte voorbeelden
Aparte uitgewerkte voorbeelden voor dit onderwerp zijn niet beschikbaar. Voorbeelden waarbij deze techniek
is toegepast als deel van een groter geheel zijn er wel. Zie daarvoor de code-voorbeelden in het item Frames
simuleren met CSS.
Opmerking:
In het item Tekst verdelen in kolommen m.b.v. CSS II vind je een andere
benadering van het verdelen van content in kolommen, met behulp van de CSS-eigenschap column.
