[XHTML/CSS] twee <td>'s met <div>'s

[Verwijderd]

Zo nu en dan wil ik in de layout van een webpagina twee elementen naast elkaar zetten, vroeger deed ik dat middels een table.

HTML:

<table class="container">
    <tr>
        <td class="links">tekst-1</td>
        <td class="rechts">tekst-2<br>tekst-2<br>tekst-2<br>tekst-2<br></td>
    </tr>
</table>

Maar dat is nogal vies. Tegenwoordig doen we dat natuurlijk (bijvoorbeeld) zo:

HTML:

<div class="container">
    <div class="links">tekst-1<div>
    <div class="rechts">tekst-2<br />tekst-2<br />tekst-2<br />tekst-2<br /><div>
</div>

Als we nu wat met css spelen kunnen we de twee items zonder problemen naast elkaar plaatsen:

Cascading Stylesheet:

.links {
    float: left;
}

Maar ik krijg het met geen mogelijkheid voor elkaar hetzelfde gedrag als dat van twee <td>'s te simuleren. Twee <td>'s naast elkaar hebben namelijk altijd dezelfde hoogte, namelijk de hoogte van de hoogste (meeste content) van de twee.

De <table> kan bijvoorbeeld zo 'gestyled' worden:

Cascading Stylesheet:

.container {
    width: 400px;    /* fixed width, variable height */
}
.links {
    background: blue;
    width: 100px;    /* fixed width */
}
.rechts {
    background: red;
}

Wat er nu door de browser 'gerenderd' wordt is een 400px brede table met aan de linker kant een blauwe kolom van 100px breed. De rechter kant is rood. Beide zijn even hoog, zo hoog als de hoogste van de twee. De breedte van de rechterkolom is 100% van de breedte van de parent minus de 100px van de 'links' <td>.

Hoe kan ik in godensnaam het hierboven beschreven gedrag zonder gebruik van een <table> voor elkaar krijgen? Ik heb persoonlijk het idee, na heel lang prutsen met zowel display, float, clear en veel meer, dat dit zonder gebruik van tabellen gewoonweg niet mogelijk is.

Iemand suggesties?

[ Voor 22% gewijzigd door Verwijderd op 20-06-2004 13:36 ]

[Verwijderd]

http://alistapart.com/articles/fauxcolumns/

[Verwijderd]

Helaas heeft deze (in mijn ogen nogal vieze) hack geen success als de breedte van één van de kolommen onbekend is.

[oscarvdb]

height: 100% bij allebei en dan een header of footer maken die de twee verbindt...

[Verwijderd]

oscarvdb schreef op 20 juni 2004 @ 14:11:
height: 100% bij allebei en dan een header of footer maken die de twee verbindt...

Dit zal helaas niet gaan werken. De css height property is altijd de hoogte van de parent. In het volgende geval levert dat dus enge resultaten op:

HTML:

<div class="container">
    <div class="top" />
    <div class="left" />
    <div class="right" />
    <div class="bottom" />
</div>

[ Voor 13% gewijzigd door Verwijderd op 20-06-2004 14:30 ]

[MBV]

Het grote voordeel van div's gebruiken voor opmaak is natuurlijk de toegankelijkheid, zodat blinden het beter kunnen 'zien'. Volgens mij is het nog prima 'zichtbaar' voor blinden als je in je CSS zet dat container eigenlijk table betekent, en left en right table cells zijn
[html]
.container {
display: table;
}
.left, .right {
display: table-cell;
}

bron: http://www.w3.org/TR/REC-CSS2/tables.html#q2

[Verwijderd]

MBV schreef op 20 juni 2004 @ 14:36:
.container {
display: table;
}
.left, .right {
display: table-cell;
}

Damn, deze syntax heb ik nog nooit van gehoord! Thanx, hier ga ik eens naar kijken.

Grote voordeel van div's is natuurlijk ook de uiterst semantische neutraalheid. Je gaat geen informatie in een table zetten als het niet in een table thuishoort. Er hoeft (mag) uit het XHTML document niet duidelijk te worden hoe items worden weergegeven, naast of onder elkaar.

[disjfa]

Dat betekend dat je een div weer laat werken als een table...... Lekker onhandig denk ik dan maar. En daarnaast ondersteund IE die properties ook weer niet.....

[Verwijderd]

disjfa schreef op 20 juni 2004 @ 14:58:
Dat betekend dat je een div weer laat werken als een table...... Lekker onhandig denk ik dan maar. En daarnaast ondersteund IE die properties ook weer niet.....

Nee, dat vind ik niet onhandig. Ik heb één XHTML document en misschien wel tien stylesheets. Er is er misschien maar één die het als een table wil weergeven. Het is nu dus de stylesheet die de plaatsing bepaald. Mooi toch

[Verwijderd]

Het werkt! Dol enthousiast al ik ben post ik hier de code:

code:

<style type="text/css">
.container {
    border: solid 1px black;
    width: 400px;
    padding: 2px;
    display: table;
}
.links {
    width: 100px;
    display: table-cell;
    background: blue;
}
.rechts {
    background: red;
    display: table-cell;
}
</style>

<!-- ................ -->

<div class="container">
    <div class="links">tekst-1</div>
    <div class="rechts">
        tekst-2<br />
        tekst-2<br />
        tekst-2<br />
        tekst-2<br />
    </div>
</div>

[ Voor 18% gewijzigd door Verwijderd op 20-06-2004 15:14 ]

[Verwijderd]

Er hoeft (mag) uit het XHTML document niet duidelijk te worden hoe items worden weergegeven, naast of onder elkaar.

En wat als we het over tabulaire data hebben?

[Verwijderd]

Verwijderd schreef op 20 juni 2004 @ 15:18:
[...]
En wat als we het over tabulaire data hebben?

Die 'tabulairiteit' zegt iets over de onderlinge relatie van de informatie. Hoe dat uiteindelijk weergegeven wordt is niet relevant. Misschien dat ze azie tabellen wel heel anders oriënteren dan hier in europa, zonder dat de onderlinge relatie verdwijnt.

http://www.w3.org/TR/REC-CSS2/tables.html#q2
Tables represent relationships between data. Authors specify these relationships in the document language and specify their presentation in CSS, in two ways: visually and aurally.

[ Voor 25% gewijzigd door Verwijderd op 20-06-2004 15:33 ]

[Clay]

Verwijderd schreef op 20 juni 2004 @ 13:50:
Helaas heeft deze (in mijn ogen nogal vieze) hack geen success als de breedte van één van de kolommen onbekend is.

Ik moet je toch tegenspreken dat dit een hack zou zijn. Een hack is in mijn ogen een vorm van misbruik van om iets voor elkaar te krijgen wat nooit zo de bedoeling is geweest. bv. de

code:

* html body {
}

selector die door IE ten onrechte toch wordt toegepast op de body (imo nog een milde hack/misbruik vergeleken met b.v. de voice-family boxmodelhack). Fauxcolumns belichaamt naar mijn mening eerder de essentie van CSS. Onbekend maakt onbemind, maar dat betekent niet dat een "ohja zo kan het idd ook, jeetje nooit gedacht" aanpak automatisch een vieze hack is. Veel mensen roepen dat ten onrechte van alles wat ze CSS zien doen en nooit gedacht hadden, en die mensen commenten o.a. ook op ALA.

CSS werkt gewoon anders, en het ombouwen van table based markup naar css based layout heeft toch wel iets meer om het lijf dan van alle td's een div maken en deze fysiek dezelfde afmetingen geven. Een visueel effect kan los staan van de fysieke afmetingen van een element. Die 2 divs van je hoeven niet even hoog om dat toch zo te doen lijken. Kan wel, maar daar maak je het jezelf alleen maar moeilijker mee.

[Verwijderd]

Clay schreef op 20 juni 2004 @ 15:36:
[...]
Ik moet je toch tegenspreken dat dit een hack zou zijn. Een hack is in mijn ogen een vorm van misbruik van om iets voor elkaar te krijgen wat nooit zo de bedoeling is geweest. bv. de
[...]

Misschien heb je gelijk, maar ik vind dit een beetje mierenneuken om een definitie. Het blijft een "truukje" omdat er blijkbaar geen lekkere andere oplossing lijkt te zijn. Want een mooie oplossing vind ik het niet.

selector die door IE ten onrechte toch wordt toegepast op de body (imo nog een milde hack/misbruik vergeleken met b.v. de voice-family boxmodelhack). Fauxcolumns belichaamt naar mijn mening eerder de essentie van CSS. Onbekend maakt onbemind, maar dat betekent niet dat een "ohja zo kan het idd ook, jeetje nooit gedacht" aanpak automatisch een vieze hack is. Veel mensen roepen dat ten onrechte van alles wat ze CSS zien doen en nooit gedacht hadden, en die mensen commenten o.a. ook op ALA.

Ik verwacht van dit soort standaarden eigenlijk dat dit soort dingen gewoon mogelijk zijn (dit blijkt gelukkig ook zo te zijn). Ik vind het niet de essentie van CSS dat je door de ene helft van de standaarden creatief te gebruiken het falen van de andere helf weg-truukt.

CSS werkt gewoon anders, en het ombouwen van table based markup naar css based layout heeft toch wel iets meer om het lijf dan van alle td's een div maken en deze fysiek dezelfde afmetingen geven. Een visueel effect kan los staan van de fysieke afmetingen van een element.

Ik denk dat er niemand is die je hierin tegenspreekt.

Die 2 divs van je hoeven niet even hoog om dat toch zo te doen lijken. Kan wel, maar daar maak je het jezelf alleen maar moeilijker mee.

Het zou heel prettig zijn als ze wel even hoog zouden zijn, zonder allerlei ingrepen te doen op het parent object. Deze heeft, naar mijn mening, niets te maken met de onderlinge visuele relatie van de twee 'inner' <div>'s.

[Clay]

Verwijderd schreef op 20 juni 2004 @ 15:54:
Misschien heb je gelijk, maar ik vind dit een beetje mierenneuken om een definitie. Het blijft een "truukje" omdat er blijkbaar geen lekkere andere oplossing lijkt te zijn. Want een mooie oplossing vind ik het niet.

Ik verwacht van dit soort standaarden eigenlijk dat dit soort dingen gewoon mogelijk zijn (dit blijkt gelukkig ook zo te zijn). Ik vind het niet de essentie van CSS dat je door de ene helft van de standaarden creatief te gebruiken het falen van de andere helf weg-truukt.

Hoe zou je een andere oplossing dan voor je zien? Aan de ene kant heb je je markup, aan de andere de gewenste layout. CSS biedt de mogelijkheid dit samen te voegen tot een werkend geheel. De <img /> tag is niet geschikt voor layout, aangezien er dan een stuk layout in je markup staat, dus backgroundkleuren en -images blijven over. Het is anders, maar ik blijf erbij dat het geen truuk is, en toch wel een deel van de essentie.

Ik ga niet beweren dat alles aan de standaard goed is, en er zijn inderdaad beperkingen (het falen van een helft is wat overdreven ). Met tables zijn blokken die naast elkaar staan makkelijk even hoog te maken; da's ook logisch gezien de onderlinge relatie met elkaar. Het suffe is dat even hoge blokken ook een pure design kwestie kan zijn, en bepaalde designs zijn dan (zonder gebruik te kunnen maken van display:table-cell;) wel heel erg moeilijk te realiseren. Maar is dit een beperking van de techniek?

Het zou heel prettig zijn als ze wel even hoog zouden zijn, zonder allerlei ingrepen te doen op het parent object. Deze heeft, naar mijn mening, niets te maken met de onderlinge visuele relatie van de twee 'inner' <div>'s.

Klopt. Maar fysiek heeft de linker div ook niets te maken met rechter, puristisch gezien kan je die fysieke relatie dan niet misbruiken om een visuele te realiseren de parent omvat de 2 childs, en is juist omdat je er dus geen ingrepen op hoeft te doen uitermate geschikt voor een visuele overeenkomst.