artikelen > erik > Relatief gepositioneerde table-cells
Volgens de web-standaarden is het effect van de css regel "position:relative" ongedefinieerd voor een aantal tabel elementen. In de meeste browsers heeft het dus geen zin om table-cell elementen relatief te positioneren. Microsoft besloot echter (wijselijk) om table-cell elementen hetzelfde te behandelen als andere elementen wat betreft "position:relative".
Tabel layout
In de huidige browsers wordt het gebruik van html-tabellen voor de layout van een pagina afgeraden. Maar wanneer een bepaald element zowel verticaal als horizontaal moet worden gecentreerd kan een tabel uitkomst bieden. Een element(bijvoorbeeld een img) wordt in een table-cell element geplaatst en dmv css gecentreerd op de volgende wijze:
HTML:
<table><tr><td>
<img src="afbeelding.jpg" alt="Afbeelding" />
</td></tr></table>
CSS:
td{vertical-align:middle;text-align:center}
Op deze manier kan eenvoudig een overzicht van foto's worden weergegeven waarbij de foto's in het midden zijn uitgelijnd:
Waarom table-cell elementen relatief positioneren?
Bij het toevoegen van een rollover effect(het oplichten van de foto's nadat er met de muis overheen wordt bewogen) ontstaat er echter een probleem in non-IE browsers(FireFox,
Opera, Safari e.d.).
Het effect is opgebouwd uit een absoluut gepositioneerde div(in de table-cell) met een semi-transparante afbeelding als achtergrond.
Met behulp van een stukje script wordt de div aan en uit gezet tijdens muisbewegingen over de table-cell.
Om de div absoluut in de table-cell te positioneren(op een eenvoudige manier) moet de table-cell relatief gepositioneerd worden.
Helaas blijkt dit niet te werken in non-IE browsers waardoor de rollover uitsluitend in IE kan worden gebruikt.
De cross-browser oplossing
Gelukkig is er een eenvoudige cross-browser oplossing in css.
Met behulp van de css regel "display:table-cell" kan het gedrag van table-cell elementen worden nagebootst.
Een div wordt nu omgevormd tot table-cell dmv de volgende css:
div{position:relative;width:100px;height:100px;display:table-cell;vertical-align:middle;text-align:center}
De div vormt nu een relatieve positionerings context voor de absoluut gepositioneerde rollover effecten en
elementen binnen de div worden zowel verticaal als horizontaal gecentreerd.
Update: Helaas wordt de regel "display:table-cell" door zowel IE6 als IE7
niet ondersteund. Er moet dus een keuze gemaakt worden tussen:
- Tabellen: goede uitlijning in alle browsers maar geen rollover effecten in non-IE browsers.
- Divs: rollover effecten in alle browsers maar slechte uitlijning in IE6 en IE7.
Opmerkingen, suggesties? Geef uw reactie. Wij behouden ons het recht niet ter zake doende reacties te verwijderen.
E-mail is niet verplicht
Ja, waarschijnlijk dus het is