[HTML | CSS] Maximale breedte met variabel aantal divs

[dossiewossie]

Ik wil een menu maken met een variabel aantal items. Ik weet van te voren niet hoeveel items dit zijn.
Het is de bedoeling dat de items de volledige breedte van de omliggende div gebruiken, die een vaste breedte heeft.

Dit wil ik graag oplossen met semantische html/css, maar kan dat eigenlijk wel?

HTML:

<div style="width:600px">
<div>inhoud</div>
<div>inhoud</div>
<div>inhoud</div>
<div>inhoud</div>
<div>inhoud</div>
<div>inhoud</div>
</div>

Met een tabel is dit normaal gedrag: (pseudo html, maar kan wel)

HTML:

<div style="width:600px">
  <table>
     <tr> 
        <td><div>inhoud</div></td>
        <td><div>inhoud</div></td>
        <td><div>inhoud</div></td>
        <td><div>inhoud</div></td>
        <td><div>inhoud</div></td>
     </tr>
  </table>
</div>

Ik wil dit graag netjes oplossen, maar als ik moet kiezen tussen semantisch + javascript of overzichtelijker met een tabel, dan kies ik liever voor het laatste.

Zie ik hier een mogelijkheid over het hoofd?

[CrashOverDrive]

Je hebt het nu over een menu, bedoel je dan menu als in Navigatie?
want dat kan je beter oplossen met een ul / li. Daar zijn ze voor

[Duroth]

Een <div> element zonder styling zal, zoals alle elementen met een default display:block, altijd de maximaal beschikbare breedte pakken.

Waarschijnlijk ligt je probleem (heb je eigenlijk je bovenstaande snippet al uitgetest? Daar zitten echt geen rare dingen in) aan het feit dat je divs een style meekrijgen van of een parent element, of een iets te algemene CSS-definitie. Bijvoorbeeld een float:left of float:right die ook op je 'inhoud' <div>'s toegepast wordt.

edit:
(verkeerd begrepen)

[ Voor 74% gewijzigd door Duroth op 26-09-2009 00:21 ]

[Caelorum]

daarnaast kan je op de li items (binnen die ul binnen de 'container' div) de breedte op 100% zetten. Dan zullen ze de hele breedte van de div in gebruik nemen.

[dossiewossie]

CrashOverDrive schreef op vrijdag 25 september 2009 @ 23:41:
Je hebt het nu over een menu, bedoel je dan menu als in Navigatie?
want dat kan je beter oplossen met een ul / li. Daar zijn ze voor

Dat is natuurlijk inderdaad zo, maar voor mijn voorbeeld maakt het even niet veel uit.

@de rest:

Sorry ik ben even niet duidelijk geweest, het gaat om een horizontaal menu. Dus stel, ik heb 4 items, dan wil ik elke div (of li) 25% van de 600px breedte laten pakken.

Ik zal even correcte voorbeeldjes maken, mijn excuses.

[Duroth]

Als alle divs dezelfde breedte mogen hebben, zal je toch moeten kijken naar een scripted oplossing, server- of clientside. Gewoon met Javascript het aantal elementen ophalen en aan de hand daarvan de breedte bepalen. En deze uiteraard met een float:left; naast elkaar plaatsen.

Anders kan je ook naar de CSS-eigenschap display: table-cell kijken. Let wel op, deze wordt niet door IE ondersteund.

[dossiewossie]

Duroth schreef op zaterdag 26 september 2009 @ 00:25:
Als alle divs dezelfde breedte mogen hebben, zal je toch moeten kijken naar een scripted oplossing, server- of clientside. Gewoon met Javascript het aantal elementen ophalen en aan de hand daarvan de breedte bepalen. En deze uiteraard met een float:left; naast elkaar plaatsen.

Anders kan je ook naar de CSS-eigenschap display: table-cell kijken. Let wel op, deze wordt niet door IE ondersteund.

Hmm, het jammere is dat de divs/li`s niet dezelfde breedte mogen hebben.

Het volgende voorbeeld doet exact wat er gebeuren moet:

HTML:

<table style="width:600px">
 <tr>
    <td><a>item</a></td>
    <td><a>item ietsjes langer</a></td>
    <td><a>item</a></td>
    <td><a>item item</a></td>
 </tr>
</table>

De volledige breedte wordt benut. De td`s hebben afwijkende breedtes naargelang de content, maar vullen ten alle tijden de 600px op.

Met javascript alle elementen ophalen, de breedtes daarvan bepalen, en daar vervolgens mee gaan goochelen kan misschien wel, maar het wordt er wel een onoverzichtelijk zooitje van vrees ik....