Help:Kolommen: verschil tussen versies
kGeen bewerkingssamenvatting |
k (Cierick Goos heeft de pagina Help/Kolommen hernoemd naar Help:Kolommen zonder een doorverwijzing achter te laten) |
||
| (Een tussenliggende versie door dezelfde gebruiker niet weergegeven) | |||
| Regel 15: | Regel 15: | ||
* <code>class="kolommen-4"</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 | 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 | 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-2 krant"</code> | ||
* <code>class="kolommen-3 krant"</code> | * <code>class="kolommen-3 krant"</code> | ||
| Regel 35: | Regel 35: | ||
Een lijst: | Een lijst: | ||
<div class="kolommen-4"> | <div class="kolommen-4"> | ||
* Item 1: | * Item 1: Mandarijnen | ||
* Item 2: Appels | * Item 2: Appels | ||
* Item 3: Peren | * Item 3: Peren | ||
| Regel 42: | Regel 42: | ||
* Item 6: Druiven | * Item 6: Druiven | ||
* Item 7: Bananen | * Item 7: Bananen | ||
* Item 8: | * Item 8: Papaja's | ||
* Item 9: | * Item 9: Ananas | ||
* Item 10: Bosbessen | * Item 10: Bosbessen | ||
</div> | </div> | ||
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.