Help:Kolommen: verschil tussen versies

Huidige versie van 7 jan 2024 om 11:47

Om kolommen te maken zijn zijn er een aantal opmaakprofielen (classes) aangemaakt. De opmaak van de kolom hoeft hiermee niet meer met in-line opmaakistructies in de wikicode gedaan te worden, de opmaakinstructies zijn nu overgbracht overgebracht naar MediaWiki:Common.css en MediaWiki:Mobile.css. In de wiki code hoeft slechts de tekst die in kolommen gezet moet worden tussen <div>...</div> instructies gezet te worden en aan de <div> moet een opmaakprofiel (class) gekoppeld worden.

<div class="kolommen-2">
Tekst...
</div>

De inhoud van de kolommen hoeft overigens niet alleen uit platte tekst te bestaan. Alle normale inhoud kan in kolommen geplaatst worden. Op de index pagina is deze techniek gebruikt om de lijsten met wiki pagina's in kolommen te zetten.

De volgende opmaakprofielen zijn er beschikbaar:

class="kolommen-2"
class="kolommen-3"
class="kolommen-4"

Het cijfer geeft het maximale aantal kolommen aan. Als er niet voldoende ruimte beschikbaar is (als de pagina breedte onvoldoende is) en de kolommen te smal dreigen te worden wordt het aantal kolommen automatisch verminderd. Zo zal het opmaakprofiel "kolommen-4" vier smalle kolommen geven op een desktop in een voldoende groot venster. Op een telefoon zal dit herschalen naar drie kolommen als de telefoon in landscape mode staat (telefoon over dwars), en nog maar twee kolommen in portret mode (telefoon rechtop).

Bovenstaande opmaakprofielen kunnen nog gecombineerd worden met het opmaakprofiel krant. Dit zorgt ervoor dat de kolom opgemaakt wordt als in een krant; de tekst wordt uitgevuld en tussen de alinea's komt geen extra witruimte meer maar bij elke alinea springt de eerste regel een stukje in. Combineren van opmaakprofielen gaat als volgt:

class="kolommen-2 krant"
class="kolommen-3 krant"
class="kolommen-4 krant"

Voorbeelden

Kolommen-4

Alleen tekst:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Een lijst:

Item 1: Mandarijnen
Item 2: Appels
Item 3: Peren
Item 4: Fruit met echt een heel lange naam
Item 5: Kiwi's
Item 6: Druiven
Item 7: Bananen
Item 8: Papaja's
Item 9: Ananas
Item 10: Bosbessen

Kolommen-3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Kolommen-2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Kolommen-3 krant

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Kolommen-2 krant

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Kolommen op basis van FlexBox

Maakt twee kolommen met controle over het einde van de eerste kolom. Als er te weinig ruimte is zoals op een kleiner scherm worden de twee kolommen onder elkaar geplaatst en lijkt het een doorlopende tekst.

Om het voor de gebruiker gemakkelijker te maken om te gebruiken en te lezen is de wikicode verplaatst naar een aantal sjablonen.

{{BeginFlexKolommen}}
{{NieuweFlexKolom}}
{{EindeFlexKolommen}}

De volgende wikicode:

{{BeginFlexKolommen}}
Lorem ipsum ... arcu. {Alinea 1}

In enim ... laoreet. {Alinea 2}

Quisque rutrum. ... ipsum. {Alinea 3}
{{NieuweFlexKolom}}
Nam quam ... libero. {Alinea 4}

Fusce vulputate ... lacinia. {Alinea 5}
{{EindeFlexKolommen}}

Geeft het volgende resultaat:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.

Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

@@ Regel 1: / Regel 1: @@
 {{Help/Navigatie}}
+Om kolommen te maken zijn zijn er een aantal opmaakprofielen (classes) aangemaakt. De opmaak van de kolom hoeft hiermee niet meer met in-line opmaakistructies in de wikicode gedaan te worden, de opmaakinstructies zijn nu overgbracht overgebracht naar [[MediaWiki:Common.css]] en [[MediaWiki:Mobile.css]]. In de wiki code hoeft slechts de tekst die in kolommen gezet moet worden tussen <code>&lt;div>...&lt;/div></code> instructies gezet te worden en aan de <code>&lt;div></code> moet een opmaakprofiel (class) gekoppeld worden.
-Om kolommen te maken zijn is er onder andere een standaard HTML oplossing.
+<pre>
+<div class="kolommen-2">
+Tekst...
+</div>
+</pre>
-==Kolommen op basis van "columns"==
+De inhoud van de kolommen hoeft overigens niet alleen uit platte tekst te bestaan. Alle normale inhoud kan in kolommen geplaatst worden. Op de [[index]] pagina is deze techniek gebruikt om de lijsten met wiki pagina's in kolommen te zetten.
-===Smalle kolommen, maximaal 4===
-<div style="columns: 150px 4; column-gap: 32px;">
-3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9
+De volgende opmaakprofielen zijn er beschikbaar:
+* <code>class="kolommen-2"</code>
+* <code>class="kolommen-3"</code>
+* <code>class="kolommen-4"</code>
+Het cijfer geeft het <u>maximale</u> aantal kolommen aan. Als er niet voldoende ruimte beschikbaar is (als de pagina breedte onvoldoende is) en de kolommen te smal dreigen te worden wordt het aantal kolommen automatisch verminderd. Zo zal het opmaakprofiel "kolommen-4" vier smalle kolommen geven op een desktop in een voldoende groot venster. Op een telefoon zal dit herschalen naar drie kolommen als de telefoon in landscape mode staat (telefoon over dwars), en nog maar twee kolommen in portret mode (telefoon rechtop).
+Bovenstaande opmaakprofielen kunnen nog gecombineerd worden met het opmaakprofiel <code>krant</code>. Dit zorgt ervoor dat de kolom opgemaakt wordt als in een krant; de tekst wordt uitgevuld en tussen de alinea's komt geen extra witruimte meer maar bij elke alinea springt de eerste regel een stukje in. Combineren van opmaakprofielen gaat als volgt:
+* <code>class="kolommen-2 krant"</code>
+* <code>class="kolommen-3 krant"</code>
+* <code>class="kolommen-4 krant"</code>
+==Voorbeelden==
+===Kolommen-4===
+Alleen tekst:
+<div class="kolommen-4">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
+Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
 </div>
-===Medium  kolommen, maximaal 3===
+Een lijst:
-<div style="columns: 200px 3; column-gap: 32px;">
+<div class="kolommen-4">
-3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9
+* Item 1: Mandarijnen
+* Item 2: Appels
+* Item 3: Peren
+* Item 4: Fruit met echt een heel lange naam
+* Item 5: Kiwi's
+* Item 6: Druiven
+* Item 7: Bananen
+* Item 8: Papaja's
+* Item 9: Ananas
+* Item 10: Bosbessen
+</div>
+===Kolommen-3===
+<div class="kolommen-3">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
+Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
 </div>
-===Normale kolommen, maximaal 2===
+===Kolommen-2===
-<div style="columns: 300px 2; column-gap: 32px;">
+<div class="kolommen-2">
-3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9 1 3 5 7 9
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
+In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
+Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
+</div>
+===Kolommen-3 krant===
+<div class="kolommen-3 krant">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
 In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
+Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
+</div>
+===Kolommen-2 krant===
+<div class="kolommen-2 krant">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
+In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
+Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
 </div>