nee, niet dat kinderliedje. stel je wilt drie berichten naast elkaar op een webpagina presenteren.
helaas kan ik je geen voorbeeld laten zien, omdat die in een beschermd intranet zit, maar gebruik je fantasie en bedenk met mij mee dat je 3 berichten op een regel wilt laten zien en vijf regels op een pagina.
hoe doe je dat?
dat doe je met CSS, komt ie:

.three-on-a-row {
display: block;
margin: 0;
padding: 0;
z-index: 8;
}
.three-on-a-row li {
float: left;
list-style-type: none;
list-style-image: none;
}
.three-on-a-row ul {
top:auto;
display: inline;
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
z-index: 300;
}
.three-on-a-row ul li {
top:auto;
display: inline;
width: 31%;
padding-right: 2%;
max-height: 405px;
min-height: 385px;
z-index: 500;
}


blokje 1
beginnen bij het eerste blokje. dat een class descriptor, die erft namelijk waarden van bovenliggende classes. dat blijft het zaakje niet bij elkaar. het eerste blokje kun je als een soort container zien waarin de regels en de kolommen komen te staan, dat is dus een block. de z-index geeft aan in welk niveau die thuis hoort.
blokje 2
tweede blokje met de li, dat komt van list of lijst, gaat er voor zorgen dat er een volgorde komt. de li met wel aan de linkerkant beginnen, float left. li gaat standaard gepaard met een stip of een ander teken voor de regel, maar daar hebben wij nu geen behoefte aan, dus staan die uit.
blokje 3
derde blokje is ul van unordered list, een lijst zonder volgorde, maar moet wel boven aan beginnen top: auto en dient zich in een lijn te gedragen display: inline. geen marges enzo ook geen punten of streepjes voor het item. gewoon lekker schoon. de z-index is al een stuk verder weg, minder belangrijk.
blokje 4
het vierde blokje is waar het om gaat. die bepaalt de individuele cel-grootte, width: 31% vereist het nodige rekenwerk. als je 3 kolommen wilt maken, dan deel je de beschikbare ruimte (meestal 100%) door drie-en. nee, toch niet! 1% moet je inleveren vanwege allerlei ondergronds gerommel, dus wordt het 99% : 3 en dat nog de marges en de paddings. samen met de breedte van de cel mogen die niet boven de deelsom uit komen, anders lopen ze rap uit het beeld. nog even: celbreedte 31% plus padding 2% = …..
waarom procenten? dat is veel makkelijker rekenen. stel dat je 4 cellen op een rij wilt hebben, dan heb je 24% ruimte tot je beschikking (dus geen 25%, OK?).
dan kun je nog de hoogte aangeven van een cel (of regel, wat je wilt). in mijn ontwerp had ik die twee waarden nodig om een mooi evenwicht te krijgen tussen de verschillende hoogten van de berichten.
toepassen

nu de nog de three-on-a-row in het de php file plaatsten. als voorbeeld neem ik een category-XX.php waar de XX voor het nummer staat van de rubriek van je keuze.

• vóór de loop plaats je de container three-on-a-row.
• direct daaronder geef je aan dat het om een ongesorteerde lijst gaat, want de ordening wordt al in de loop gedaan.
• dan de aanzet van de loop
• dan wil je de individuele cellen formeren, dat gebeurt in de loop vanaf de li.
• loop gaat lekker zijn gangetje, maar vlak voordat die eindigt, sluit je de li op regel 37.
• regel 38 sluit de loop af.
• en daarna doen wij dat ook met de container

succes.
vragen?
geen vragen???