[CSS] divjes 'auto' laten uitrekken

[marty]

Onder het mom zoveel mogelijk met divjes en dergelijke op te lossen ben ik me in css gaan verdiepen om geen (overbodige) tabellen te hoeven gebruiken. Wat ik nu alleen niet voor elkaar krijg is om het volgende om te zetten:

HTML:

<table width="100%">
<tr>
 <td>kolom 1</td>
 <td>kolom 2</td>
 <td>kolom 3</td>
 <td>kolom 4</td>
 <td>kolom 5</td>
</tr>
</table>

Doordat de tabel op 100% staat worden de td's netjes uitgespreid en nemen, afhankelijk van hoeveel content er in staat, een bepaalde wijdte aan.

Maar hoe krijg ik dit met een div of span voor elkaar? als ik die floatend maak en de width op auto zet dan krijgt ie een min. grootte ipv een maximale. En als ik 'm breder wil hebben dan zou ik ze dus allevijf op 20% moeten zetten. Maar dat wil ik niet, want ik wil dat ie het zelf uitvogelt, afhaneklijk van de content.
Het lijkt me toch dat dat iets simpels moet zijn, maar ik heb het in m'n (nieuwe) css boek proberen op te zoeken, maar er wordt alleen medegedeeld dat ie dus in de auto setting de minimaal toegestane wijdte aanneemt en niet hoe je 'm kunt uitspreiden. Met de zoekmachine hier kon ik het ook niet vinden

[Verwijderd]

Sorry, maar ik begrijp niet wat je nu eigenlijk wél wilt. Laat eens iets zien zoals jij wilt dat het moet worden...

Waarom is 5 kolommen van 20% niet goed? De breedte moet op basis van de content? Hoe stel je je dat voor? Met tekst bijvoorbeeld, of met afbeeldingen, of met wat anders?
Om te kunnen vertellen wat je moet doen, moeten we wel weten wat er nu in die div's moet. Tabellen zijn niet per definitie slecht ofzo. Ze worden alleen vaak om verkeerde redenen gebruikt.

[marty]

Verwijderd schreef op 26 June 2003 @ 21:23:
Sorry, maar ik begrijp niet wat je nu eigenlijk wél wilt. Laat eens iets zien zoals jij wilt dat het moet worden...

Wat ik wél wil is dat het zich precies zo gedraagt als het voorbeeld van die tabel wat ik hier boven gaf. Dus, 5 afgescheiden gedeeltes met wat content er in en die een wijdte aannemen die in verhouding staat met de hoeveelheid content die het bevat - dus net zoals dat bij een tabel gebeurt die je op 100% zet.

Waarom is 5 kolommen van 20% niet goed? De breedte moet op basis van de content? Hoe stel je je dat voor? Met tekst bijvoorbeeld, of met afbeeldingen, of met wat anders?

De reden dat 5 kolommen van 20% niet goed zijn is dat in 1 'cel' best content kan komen die meer dan 20% inneemt en in een ander veel minder. En dan gaat ie dus een extra regel in beslag nemen terwijl dat nergens voor nodig is

Om te kunnen vertellen wat je moet doen, moeten we wel weten wat er nu in die div's moet. Tabellen zijn niet per definitie slecht ofzo. Ze worden alleen vaak om verkeerde redenen gebruikt.

Ik had begrepen (uit het lezen van topics hier) dat je tabellen alleen nog dient te gebruiken voor als je data gestructureerd weer wilt geven. (weet niet of ik het zo goed onder worden breng), maar dat je ze niet meer moet gebruiken voor puur layout-dingen.

Wat ik wil is op 1 regel 5 kleine 'stukjes' informatie zetten, die uit een database komen. Vandaar dat ik niet aan de 20% vast wil zitten. Ze moeten gewoon afhankelijk van de ander een bepaalde hoeveelheid ruimte in nemen. Maar als ik het met divjes doe dan plakt ie alles achter elkaar en ik wil het mooi verspreid over de breedte

[drm]

k had begrepen (uit het lezen van topics hier) dat je tabellen alleen nog dient te gebruiken voor als je data gestructureerd weer wilt geven. (weet niet of ik het zo goed onder worden breng), maar dat je ze niet meer moet gebruiken voor puur layout-dingen.

Wat je gewoon in je achterhoofd moet houden is dat je voor verschillende data een zo goed mogelijk toepasbaar html-element moet zien te vinden.

Als je headers boven pagina's zit, heb je daar bijvoorbeeld 'h1', 'h2', 'h3' ... tags voor. Als je paragrafen met tekst heb, heb je daar 'p' voor, als je een link maakt, een 'a' en ga zo maar door. Als je dan vervolgens een "soort" content tegenkomt waar je geen element bij kan verzinnen komt het meestal neer op een "div" met een "class" attribuut, waarvan de class op zijn beurt weer een beetje de inhoud beschrijft.

Verder heb je een tabel om tabulair gegevens weer te geven. Tabellen bleken in de loop der tijd echter gewoon een prima hulpmiddel te zijn om je gegevens te positioneren (voordat er uberhaupt sprake was van css). Nu is het eigenlijk beter om tot een documentstructuur te komen waarbij de betekenis van de elementen ook daadwerkelijk een functie hebben in het document ipv. elementen te gebruiken waarvoor ze niet bedoeld zijn (in dit geval dus de table)

Dat neemt niet weg dat in sommige gevallen een table nou eenmaal toch gewoon makkelijker/sneller/beter compatible blijkt te zijn dan een CSS oplossing en dan moet je gewoon de afweging maken. Je wordt heus niet geexecuteerd door het w3c als je een tabel gebruikt om te pagina een layout te geven, hoor

ontopic

---

Wat je volgens mij wilt is gewoon de waarde 'auto'

Cascading Stylesheet:

... {
   width:auto;
   height:auto;
}

Dan "verzint" de browser zelf een afmeting die het beste uit komt. Bij tabellen komt dat meestal neer op het gemiddelde van de ruimte die nodig is, tenzij een element om meer ruimte vraagt.

Helaas worden de css properties 'max-height' en 'max-width' en resp. 'min-height' en 'min-width' nog niet (goed) ondersteund, maar dat zijn een stelletje properties waar je bij wijze van spreken 4ss mee kan k1x0ren

[marty]

drm schreef op 26 June 2003 @ 22:06:
[...]Dat neemt niet weg dat in sommige gevallen een table nou eenmaal toch gewoon makkelijker/sneller/beter compatible blijkt te zijn dan een CSS oplossing en dan moet je gewoon de afweging maken. Je wordt heus niet geexecuteerd door het w3c als je een tabel gebruikt om te pagina een layout te geven, hoor

Misschien niet door het w3c, maar wel door jullie
Het wordt er hier in het W&G redelijk hard ingeramd in ieder topic waar iemand iets durft te zeggen over layout en in de zelfde zin het woord tabel laat vallen. Ik heb dus echt het idee dat ik een soort heiligschennis pleeg ondertussen.
Maar serieus: dat vind ik opzich ook niet verkeerd hoor - ik wil graag m'n best doen m'n zaakjes een beetje op orde te krijgen. Ook al is het designen niet echt m'n hobbie, ik hou wel van degelijkheid. Dus ben daar nu maar wat moeite in aan het steken

Wat je volgens mij wilt is gewoon de waarde 'auto'

Cascading Stylesheet:

... {
   width:auto;
   height:auto;
}

Dan "verzint" de browser zelf een afmeting die het beste uit komt. Bij tabellen komt dat meestal neer op het gemiddelde van de ruimte die nodig is, tenzij een element om meer ruimte vraagt.

Dat is dus niet het geval bij een element wat je floatend maakt. En dat is juist het hele probleem.

A floated element's width will default to auto, which then defaults to zero, which is then increased to the browser's minimum allowed with

Je zou dus eigenlijk de eigenschap van die auto aan moeten kunnen passen, maar dat is volgens mij niet mogelijk.... Ik begrijp dat css hier dus geen goede oplossing voor biedt?
Dan maar weer terug naar de tabellen...

[drm]

even voorbeeldje:

HTML:

<div style="
   padding:4px; 
   margin:2px; 
   float:right; 
   border:1px solid #000; 
   width:auto; 
   height:auto;
">
   dit is content van de div
</div>
<div style="
   padding:4px; 
   margin:2px; 
   float:right; 
   border:1px solid #000; 
   width:auto; 
   height:auto;
">
   dit is content van nog een div
</div>

dit is content van de div

dit is content van nog een div

---

Wat is daar precies niet toereikend aan?

edit:

Dat ze geen minimale breedte hebben zeker

* drm niet zo erg wakker meer

[ Voor 8% gewijzigd door drm op 26-06-2003 22:44 ]

[marty]

drm schreef op 26 June 2003 @ 22:36:
even voorbeeldje:

HTML:

<div style="
   padding:4px; 
   margin:2px; 
   float:right; 
   border:1px solid #000; 
   width:auto; 
   height:auto;
">
   dit is content van de div
</div>
<div style="
   padding:4px; 
   margin:2px; 
   float:right; 
   border:1px solid #000; 
   width:auto; 
   height:auto;
">
   dit is content van nog een div
</div>

<div style="padding:4px; margin:2px; float:right; border:1px solid #000; width:auto; height:auto;">dit is content van de div</div><div style="padding:4px; margin:2px; float:right; border:1px solid #000; width:auto; height:auto;">dit is content van nog een div
</div>
<br clear="all"/>

---

Wat is daar precies niet toereikend aan?

Hier even een screenshotje om 1 en ander te verduidelijken:

met in het midden (plaatje) bedoel ik dus tussen de linker en de rechter in

In mijn geval worden het er zelfs 5 ipv 3. dan heb ik er vier die aan de linkerkant tegen elkaar geplakt zitten en 1 aan de rechterkant. En ik wil het dus zoals je daaronder ziet bij de table

[Justice]

je moet gewoon de div's nesten en dan de middelste div geen breedte geven:

<div>
100% links (effectief 50%)
<div>25% rechts</div>
<div>25% rechts</div>
</div>

niet getest, maar beter gebruik je gewoon 1 tabel.

[ Voor 19% gewijzigd door Justice op 26-06-2003 23:24 ]