uitleg multi kolommen
Als jouw browser multi kolommen ondersteunt, zal duidelijk zijn wat deze pagina probeert te laten zien. Zonder extra scripts wordt de tekst in twee of meer kolommen opgedeeld, terwijl de tekst doorloopt van de onderkant van de éne kolom, naar de bovenkant van de volgende kolom. Ondersteunt jouw browser geen multi columns dan wordt de tekst "normaal" weergegeven, waarbij de bezoeker niet gehinderd zal worden door het ontbreken van de "betere opmaak". Progressive enhancement wordt dit ook wel genoemd.
afbeeldingen in multi columns
De strekking van de plaatjes heeft niets te maken met het onderwerp van deze pagina. De afbeeldingen dienen er
alleen maar voor om te laten zien dat het eenvoudig is om images toe te voegen (zonder je het hoofd te breken over de positionering daarvan). En alle langdradige tekst die in deze paragraaf staat, heeft ook niet meer of minder functie dan er alleen maar voor te zorgen dat er voldoende tekst is om dit voorbeeld wat "inhoud" te geven. Als er alleen maar drie regels tekst staan, kan je niet zien wat voor effect de procedure eigenlijk heeft. Het zou ook mogelijk geweest zijn om een lorem ipsum op deze kolom te plaatsen. Maar dat is zo onzinnig voor web-site voorbeelden. De "lorem ipsum" dient er meer voor om een graphicus te laten zien of de layout en het lettertype een "prettig gezicht" zijn. Buiten dat is het altijd slimmer om alle ruimte op een pagina te gebruiken om "zinnige" informatie aan de bezoekers te geven. Het is alleen jammer dat het op jouw website "zetten" van multiple columns zó eenvoudig is, dat er nauwelijks wat over te vertellen valt. Ook de hoeveelheid code die je nodig hebt om het doel te bereiken is niet erg veel. En dat maakt dat ik deze tekst aan het typen ben...
Nu ik toch bezig ben met het vullen van de pagina, kan ik ook even aandacht geven aan de vindbaarheid van deze pagina bij de zoekmachines. Als de trefwoorden (waarop je gevonden wilt worden) niet voorkomen op de pagina zélf, zal het duidelijk zijn dat een zoekmachine jouw pagina op dié woorden nooit in de index zal (kan) tonen. Ik maak van de gelegenheid gebruik om de volgende trefwoorden in de tekst van dit voorbeeld extra te benadrukken: multi, muliple, column, kolom, text, tekst, kolommen, effect, effecten, css. Dat is wel voldoende, dunkt mij...
stylesheet voor de multi kolommen
Plaats de onderstaande stylesheet in de head-sectie van jouw pagina
<style type="text/css">
.multi-column{
padding:2em 0.2em 0 0.5em;
width:70%;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
border:solid thin #808080}
</style>
html code voor de multi kolommen
<div class="multi-column">
<p><strong>geef hier een omschrijving</strong></p>
<p>Plaats in deze tag alle tekst die je maar kwijt wilt</p>
</div>
tot slot
Plaats de stylesheet in de head-sectie van jouw web-pagina en de html code in de body-sectie van de pagina. Je kan in de stylesheet elke mogelijke eigenschap meegeven aan de "multi-kolommen".
Nog wat nutteloze tekst om het geheel wat op te vullen: Op deze pagina is geprobeerd om een zo "ongelukkig mogelijke" tekst-verdeling te gebruiken. De stylesheet houdt namenlijk geen rekening met het "afbreken" van zinnen of van paragrafen. Dit om duidelijk te laten zien dat er wel degelijk nadelen aan deze procedure kleven. Wil je zeker weten dat alles zonder problemen zal werken, moet je er voor zorgen dat er alleen maar tekst wordt gebruikt zonder verder opmaak met "kopjes" en afbeeldingen.