Tabulatortruc met CSS

Toen onderaan een boeklogje alleen nog verwezen werd naar verwante boektitels was het simpel. Hoe lang zo’n titel ook mocht uitpakken, de kantlijn links bleef een keurige verticaal.

Dit werd iets anders toen ik ook de auteursnamen ging tonen bij de verwante titels. Want, er wordt lang niet altijd verwezen naar de boeken van maar éen auteur. Dit maakte de lijst aan vetgedrukte titels onrustig, voor het oog. Maar CSS, de stijlbladen waarmee webpagina’s hun vorm krijgen, leek geen simpele oplossing te hebben voor het instellen van tabulatorstops.

Had ik die verwijzingen ook in een tabel kunnen gooien. Lekker ouderwets. Maar tabellen in HTML, de opmaaktaal voor webpagina’s, zijn onhandig.

Bleek de oplossing uiteindelijk nog verrassend simpel. Er bestaat een CSS-stijlelement ‘display:inline-block;’. Als ik dus de auteursnaam zou tonen als een blokelement, dan schoof de boektitel vanzelf zo ver naar rechts op als ik maar wilde.

Was er éen nadeel aan om ‘display:inline-block;’ te combineren met een waarde als ‘width:110px;’. Als de auteursnaam meer ruimte innam dan 110 pixels, ging die ineens daaronder door op een nieuwe regel; zoals een keurig blokelement betaamt.

Moest ik dus ‘min-width:110px;’ gebruiken. Wordt de code dus iets als:

<span style="display:inline-block;min-width:110px;padding-right:5px;">

Enfin, zijn er ook altijd nog boektitels zonder auteur. Perfect wordt het nooit. En waarom Opera als enige browser ook een lijstelement toont voor de datering helemaal rechts, is weer een heel nieuw raadsel.

De wet van behoud van ellende in actie.


[x]#6268 fan zaterdag 3 oktober 2009 @ 11:00:06


© eamelje.net 2001-2019. Alle rechten voorbehouden

4 kommentaren

Branko Collin  op 4 oktober 2009 @ 01:09:03

Waarom zijn tabellen onhandig hier?

eamelje.net  op 4 oktober 2009 @ 10:31:28

Er zijn drie problemen. De Html-code is ingewikkelder dan een CSS-oplossing, omdat uiterlijke vormgeving gecombineerd moet worden met PHP-code, die de informatie uit de database vist.

Met CSS is het <li>< a href …>aan het begin van elke regel, en </a><li> aan het eind. Met tabellen moet elk stuk PHP-code om de drie informatieve elementen aan te roepen omringd worden door <td>…</td>. Wat alleen al vervelend is omdat Mozilla Firefox de inhoud van zulke cellen anders behandeld dan andere browsers, en dit dus ook weer extra CSS-stijlen vraagt.

Verder: als in een tabel een vak niet ingevuld wordt, als bijvoorbeeld de auteursnaam ontbreekt, klapt de hele kolom met boektitels naar links. Dat gebeurt nu weliswaar ook, maar zonder dat er een lege tabelcel voor staat.

En als de auteursnaam te lang is, gaat die in een tabelcel door op de regel daaronder. Tenzij je daar weer een oplossing voor vindt. Maar ook dat kost veel extra code.

Branko Collin  op 4 oktober 2009 @ 11:42:55

Wat betreft die PHP-code, dat lijkt me 1 keer programmeren, 1000 keer gebruiken. Maar als je je prettiger voelt bij CSS dan bij PHP, moet je het vooral zo doen.

Overigens, op de overige-telefoontarievenpagina van UPC gebruikte ik die naar links gesprongen vetgedrukte tekst als kopjes binnen een tabel (werd zo aangeleverd door de klant, heb ik dan ook maar niet veranderd). Misschien is het het overwegen waard om eerst de titel te laten zien, dan pas de auteur.

eamelje.net  op 4 oktober 2009 @ 12:15:56

Het is meer CSS + PHP, zoals nu, is simpeler, dan HTML + veel CSS + PHP.

Op eamelje.net wordt in voorkomende gevallen, zoals vandaag op de nieuw aangevulde Lichtenberg-pagina de titel voor de schrijversnaam genoemd. Omdat lang niet alle postjes schrijversnamen hebben.

Maar de variatie in lengte is bij boektitels erg veel groter dan bij schrijversnamen, wat voor de vormgeving ongelukkig uitpakt. Want, waar mik ik dan op?

Maar goed, daarom zet ik de boektitel dus vet, en de auteursnaam niet.