Tekst verdelen in kolommen m.b.v. CSS II
In het item Tekst verdelen in kolommen m.b.v. CSS wordt uit de doeken gedaan hoe je
tekst in twee kolommen kunt splitsen. Dat is een statische methode. Die heeft het nadeel dat de content vast zit in een kolom.
Als de kolommen niet even lang zijn, krijg je een scheve beeldspiegel.
Voor sommige toepassingen is dat gewenst of handig, maar soms is dat juist ongewenst, en wil je juist dat de kolommen altijd
even lang zijn, zoals in een boek. Dit laatste is lastig te realiseren met een statische benadering; daarvoor heb je een dynamische
werkwijze nodig. Gelukkig is dat met CSS heel eenvoudig, met de eigenschap column.
Eerst een voorbeeld:
Voorbeeld met drie kolommen
Lorem ipsum dolor sit amet, consectetaur adipisicing velit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetaur adipisicing velit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
llamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
De CSS- en HTML-code luidt:
<style> /* Mag in de HEAD en in de BODY */
.kolommen {
column-count: 3;
column-gap: 20px;
}
</style>
<!-- onderstaande code in de BODY -->
<p class="kolommen">Lorem ipsum dolor . . . id est laborum.<br>
Lorem ipsum dolor . . . id est laborum.</p>
De mogelijkheiden die er zijn voor het werken met kolommen staan in de tabel hieronder.
| Eigenschap | Betekenis | |
| column‑width | Minimum breedte van de kolommen, in pixels. Normaal worden de kolommen
gelijk verdeeld, maar als het aantal kolommen (in column-count) niet kan worden gemaakt met de minimale
breedte, wordt alles in één kolom gezet. |
|
| column‑count | Aantal kolommen dat moet worden gemaakt. Geheel getal groter dan nul. |
|
| columns | Verkorte schrijfwijze voor column-width en column-count, in deze
volgorde. De schrijfwijze is: columns: 150px 3; |
|
| column‑fill | Manier waarop de kolommen (verticaal) worden uitgevuld. Hier zijn twee instellingen
mogelijk: balance en auto. • balance : Dit is de default waarde. Elke kolom wordt gevuld met ongeveer dezelfde hoeveelheid content. Als de hoogte is opgegeven worden de kolommen niet hoger dan die hoogte. • auto : Elke kolom wodt gevuld tot de aangegeven hoogte. Dit wordt gedaan tot het einde van de content die in de kolommen moet komen. Dit houdt in dat niet alle kolommen noodzakelijk tot het eind gevuld worden en ook dat de verdeling over de kolommen niet noodzakleijk gelijk is. Dit werkt alleen als de hoogte van de kolommen is opgegeven (height). |
|
| column‑gap | Breedte van de witruimte tussen de kolommen, in pixels. |
|
| column‑rule‑color | Kleur van de verticale streep tussen de kolommen. Dit is een standaard kleurnaam
of een hexadecimale code |
|
| column‑rule‑style | Uiterlijk van de verticale streep tussen de kolommen. Dit is één van
de keywords die je ook gebruikt bij border: solid, dashed, dotted, double, groeve,
ridge, inset, outset, hidden of none. |
|
| column‑rule‑width | Breedte van de verticale lijn tussen de kolommen, in pixels. |
|
| column-rule | Verkorte schrijfwijze voor column‑rule‑width, column‑rule‑style
en column‑rule‑color, in deze volgorde. De schrijfwijze is: column‑rule: 2px dotted #d00. |
|
| column‑span | Dit is bedoeld voor een kop boven of onder de kolommen. Er zijn hier twee keywords
mogelijk: none en all: • none : Dit is de default-waarde. De kop heeft de beedte van de eerste kolom. • all : De kop wordt verdeeld over alle kolommen. Dit beínvloedt alleen de plaatsing van de kop. Verdere opmaak (zoals tekst centreren) moet je zelf doen. In het voorbeeld is column–span: all gebruikt. |
