Menig webdesigner zit er wel eens mee te vechten: Het gezijk waar je mee te maken krijgt als je een <div> strookje wilt gebruiken in plaats van een <table>. Ik moet zeggen dat ik op het moment absoluut niet achter de 'Gebruik geen tables meer voor layout!' roepende webmenigte sta. Een table is gewoon de enige slimme tag in de hele markup encyclopedie waarvan de child elementen van elkaar weten waar ze zitten. Het argument dat het niet xhtml dtd compatible is is bullcrap; mijn site valideert prima als dtd-strict, en gebruikt tables. Een beter argument is dat de semantiek van de tags verloren gaat wanneer een table voor layout wordt gebruikt. Dan komt de accuratie van indexing services zoals google in het geding. In een productie is dat iets om over na te denken, bijvoorbeeld als je de gegevens van 4 miljard mensen en 12 ziljoen planeten in je productie moet verwerken en je wilt dat alle robots die over je site crawlen precies weten wat waar op slaat. Maar in mijn geval - en ik ben vast niet de enige - scheelt die transparantie me niets en vind ik dat bijvoorbeeld google de bladiebla op mijn site goed genoeg indexeert.

Daarnaast wil je soms een balkje op het scherm hebben waarbij je denkt 'Ja Jezus, daar wil ik geen table voor bouwen!' en dan is een div tag helemaal zo gek nog niet. Op het gezijk dat je je op de hals haalt wanneer je tableërig wilt gaan doen na. Zo moet je child span tags laten floaten om zowel een tekst links als rechts uit te lijnen. En dan zijn verschillende browsers het niet met elkaar eens.

Ik heb een simpel voorbeeldje. Check dit stukje markup. In onderstaande plaatjes hebben de tags al wat css meegekregen zodat het wat duidelijker wordt. Zo heeft de div een fixed height, width en achtergrondplaatje en hebben de spans margins links en rechts. De classe small houdt simpelweg een kleiner lettertiepe in.Opera (8.01) doet wat je kunt verwachten:


Mozilla Firefox (1.0.6) vind dat de eerste span zich als een div gedraagt en alle ruimte links en rechts ervan niet gebruikt mag worden:


Internet Explorer (6.0.bladiebla) denkt het zelfde, maar vind ook nog dat de fixed-height van de div overtreden moet worden:


Internet Explorer geeft ook nog eens een andere breedte aan omdat zij de interne padding van de totale breedte afhalen terwijl de rest van de wereld dat er juist bij optelt. Maar dat is weer een ander verhaal.

Omdat de beste browser helaas niet de populairste browser is moeten we hier wat op verzinnen. Zo is een floater als het ware een layer, waardoor andere tags zich er weinig van aantrekken. Een oplossing zou dan zijn om de eerste span tag ook te laten floaten:Opera:


Firefox:


Internet Explorer:


Ik weet niet wat jouw gevoel voor design dan zegt, maar ik wil de kleine letters op de zelfde denkbeeldige lijn als waarop de grote letters staan hebben. Bij een table kon je dan gewoon de rechtercel vertical-alignen, maar een floatende span heeft geen align relatie met zijn parent meer, dus dat gaat niet op. Maar je moet niet vergeten dat de floatende span wel een relatie heeft met zijn childs. Dus als we de inhoud van de rechter spantag in een nieuwe childspantag stoppen kunnen we gebruik maken van de baselineheight van de fontgrootte in de parentspantag omdat childs hier altijd op uitgelijnd worden wanneer je de alignment niet zelf in kunt stellen, als je me nog volgt. Zie het voorbeeld:Opera:


Firefox:


Internet Explorer:


Tadaa! :D

Okee, het lijkt meer werk dan het is. Je moet het gewoon weten en dan wordt zoveel meer mogelijk! Ben je zo'n designer die veel met position tags werkt en heb je een ingewikkelde layout waar dit soort dingen fout gaan wanneer het lettertiepe verandert of de grootte van het font, dan kan je ook slim gebruik maken van maten. Iedereen kent de px en de %. Maar de volgende die je eigenlijk moet kennen is de em. Dat is precies de grootte van het font dat actief is in de huidige tag, dus kan je child tags positioneren op een dynamische wijze (in tegenstelling tot de px) zonder de maten te baseren op de grootte van een andere tag (in tegenstelling tot de %). Zie je, de em heeft het goede van beiden en kan goed van pas komen.

Voor de volledigheid zal ik hier alle grootheden waarmee maten kunnen worden aangegeven neerzetten. Er zijn twee soorten grootheden om posities op te geven:

Relatieve maten
Maten die afhangen van de grootte van een beeldpunt op het medium waarop de pagina getoond wordt

px (aantal beeldpunten)
em (M-hoogte, grootte van de hoofdletter 'm' )
ex (x-hoogte, grootte van de kleine letter 'x' )
% (percentage, bepaald percentage van dezelfde maat in de parent tag)

Absolute maten
Maten die afhangen van de grootte van het medium. Dat is bijvoorbeeld standaard 72 pixels per inch op een computerscherm, maar dat zou moeten veranderen als je de resolutie van je scherm verandert.

in (inches, 1 in = 2.53 cm)
cm (centimeters, 1 cm = 0.394 in)
mm (milimeters, 1 mm = 0.1 cm)
pt (punten, 1 pt = 1/72 in, dus alleen wanneer je browser ingesteld staat op de standaard 72 dpi is een pt even groot als een px)
pc (picas, 1 pc = 12 pt)

Alsjeblieft!