[HTML/CSS] Tabel in TD rekt de TD uit

[Mexxus]

Beste mensen,

Ik heb een layout opgemaakt, bestaande uit een linker en een rechter vlak. Het linkervlak is voor de content, en het rechtervlak is voor het menu. Deze vlakken moeten beide even hoog blijven, ook als de hoeveelheid content het linker vlak meer doen oprekken dan het rechtervlak van het menu. Ik heb hiervoor dus een tabel gebruikt, met twee TD's. Normaliter gebruik ik div's voor de layout opbouw, maar ik kreeg het met div's niet voor elkaar de twee continu even hoog te houden.

Nu is het probleem dat, zodra er in het linker vlak een tabel in de content word geplaatst, de TD van het linker vlak een stuk uitrekt naar rechts. Dit ook als de tabel in de content nog niet eens de volledige breedte van de TD heeft. Echter, de TD rekt niet met de zelfde hoeveelheid uit als ik de tabel breder maakt, maar rekt wel iets uit. Als ik de tabel heel groot maak, vult 'ie uiteindelijk de hele TD, maar dan is deze dus wel al heel erg veel uitgerekt. Het is dus een nieuwe tabel, binnen een TD, die de TD uitrekt...

Ter verduidelijking:



Dan nog de CSS verhoudingen...

code:

#content_table{
    width: 710px;
    margin-left: 25px;
    margin-right: 40px;
}

#content{
    vertical-align: top;
    background: url(img/bg_rack.jpg);
    width: 575px;
}

#menu{
    text-align: right;
    vertical-align: top;
    width: 200px;
    
}

Iemand enig idee?

[Sappie]

Mexxus schreef op vrijdag 20 mei 2005 @ 11:55:
Beste mensen,

Ik heb een layout opgemaakt, bestaande uit een linker en een rechter vlak. Het linkervlak is voor de content, en het rechtervlak is voor het menu. Deze vlakken moeten beide even hoog blijven, ook als de hoeveelheid content het linker vlak meer doen oprekken dan het rechtervlak van het menu. Ik heb hiervoor dus een tabel gebruikt, met twee TD's. Normaliter gebruik ik div's voor de layout opbouw, maar ik kreeg het met div's niet voor elkaar de twee continu even hoog te houden.

Ik wil je toch een duwtje in de (goede) richting van table-less design geven.. kijk daarvoor hier eens naar: http://www.alistapart.com/articles/fauxcolumns/

Het stelt niet veel voor, maar daarmee zul je wel van je table voor de layout kunnen afzien. Mocht je desondanks toch met de tabellen verder willen dan ga ik nog ff verder kijken

[Mexxus]

Ik maak m´n layouts normaal altijd tabelloos, maar dit keer greek ik het echt niet voor elkaar om die twee div´s naast elkaar telkens de juiste hoogte te geven.. dus vandaar..

Maar ik zal ff die pagina doornemen..

[BtM909]

Volgens mij was je toch beter uitgeweest zonder een tabel
http://www.alistapart.com/articles/fauxcolumns/

Anywee: enige wat ik kan bedenken is het feit dat je totale 'kolom-breedte' niet overeenkomt met je tabel-breedte, waardoor de browser alsnog de juiste afmetingen gaat forceren en dus kolommen verbreden / versmallen indien nodig?

[Reinier]

• Gebeurt er iets als je alle margins en paddings expliciet op 0 zet?
• In welke browser(s) gaat het fout?
• Underscores in classnames mochten toch niet, in CSS? Of heb ik het mis?

[Verwijderd]

Underscores in classnames mochten toch niet, in CSS? Of heb ik het mis?

Mis.

Voor IE zou je 'table-layout' op 'fixed' kunnen zetten. Zie: http://www.w3.org/TR/CSS21/tables.html#width-layout

Dat werkt echter niet lekker (niet) cross-browser. Gewoon twee divjes naast elkaar floaten en vervolgens een achtergrondplaatje met eventueel wat clear truucjes werkt veel beter.

[Mexxus]

Ik heb het voormekaar!

code:

#content_table{
    width: 710px;
    margin-left: 25px;
    margin-right: 40px;
}

Hier ging ik er vanuit dat de totale tabel 775px breed zou zijn, omdat ik de margins bij had geteld. Dit is dus fout. De 575px en 200px van de TD's zijn bij elkaar 775px, terwijl de tabel zelf maar 710px is! Ik heb dus de right-margin van content_table weg gehaald, gezien die toch geen nut had, en de breedtes voor de rest goed aan elkaar angepast. Nu werkt het perfect

[Verwijderd]

Blijft het uiteraard nog steeds fout om hiervoor een tabel te gebruiken.

[Reinier]

Verwijderd schreef op vrijdag 20 mei 2005 @ 12:20:
[...]
Mis.

Je hebt gelijk, maar in CSS versie mocht het niet

[Verwijderd]

Nou wordt 'ie helemaal mooi. CLASS en ID komen uit de HTML specificatie. CSS zal dus dezelfde dingen toestaan als HTML4. HTML4 staat het volgende toe:

quote: http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.
class = cdata-list [CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

Het type NAME staat het volgende toe:

quote: http://www.w3.org/TR/html401/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Huh, een underscore...

Het probleem is dat sommige oudere browsers (niet echt meer in gebruik iirc) de underscore niet echt goed ondersteunden. Dat heeft echter niks met de specificatie te maken.

[ Voor 4% gewijzigd door Verwijderd op 20-05-2005 18:29 ]