Over verticale lijnen in een document
Een horizontale lijn maken is in HTML5 niet moeilijk. Dat wordt besproken in het item Over
horizontale lijnen in een document. Het maken van een verticale lijn lijkt lastiger, omdat er geen tag voor is. Met wat
CSS is het echter eenvoudig voor elkaar te krijgen.
Op deze pagina wordt uitgelegd hoe je het kunt aanpakken.
Verticale lijnen worden in een document op verschillende manieren toegepast:
- Als aandacht-trekker, meestal in de linker marge, soms in de rechter marge.
- Als scheiding tussen tekst kolommen.
Lijn in de marge
Het is belangrijk dat de lijn altijd even lang is als nodig is voor de hele tekst. Verder moet de lijn echt in de marge staan.
Dat bereik je door de CSS-eigenschappen margin en padding slim te gebruiken.
Voor een lijn in de linker marge zet je margin-left op een negatieve waarde. Vervolgens herstel je de beeldspiegel
door padding-left op dezelfde waarde te zetten, maar dan positief.
Voor deze paragraaf is gebruikt:
<p style="border-left:1px solid maroon; margin-left:-10px;
padding-left:10px">
. . . </p>
Een lijn in de rechter marge is hier een
variant van: vervang -left door -right.
Als voorbeeld:
<p style="border-right:1px solid maroon; margin-right:-10px;
padding-right:10px">
. . . </p>
Lijn tussen twee kolommen
Hiervoor wordt de CSS-eigenschap column gebruikt Zie het onderstaande voorbeeld.
N.B.: Als het window te smal is (op een PC-scherm) worden de twee kolommen onder elkaar gezet.
Als dat gebeurt moet je het window wat breder maken, dan komen de kolommen naast elkaar te staan.
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.
Merk op dat de kolommen door CSS automatisch gelijk worden verdeeld.
De HTML-code is:
<div style="column-count: 2; column-gap: 30px;
column-rule: 1px solid maroon">
Lorem ipsum dolor sit amet, . . . anim id est laborum.<br>
<br>
Lorem ipsum dolor sit amet, . . . anim id est laborum.
<br>
<b>Merk op . . . verdeeld.</b>
</div>
Het item Tekst verdelen in kolommen m.b.v. CSS II beschrijft een werkwijze voor het verdelen van tekst (met figuren) in kolommen.
