CSS variabele menu

[X-trace]

Ik wil binnen een website gebruik gaan maken van een CSS list menu, waarbij de knoppen horizontaal inline worden geplaatst. Nu wil ik dat:

• Het complete menu een vaste breedte heeft (500px)
• De knoppen een breedte krijgen, afhanelijk van knop titel
• De hele menu breedte word gebruikt

Het is een variabele menu, waarbij soms een knop een andere tekst bevat. Als ik bijvoorbeeld een menu van 4 knoppen heb, waarbij elke knop als titel 'HOME' heeft, worden ze allemaal 125px breed. Maar als ik nu een menu heb met 1 knop 'HOME' en 1 met 'FAQ', dan moet de 'HOME' knop net iets breder worden, waarbij toch de hele breedte wordt gebruikt.

Weet iemand hoe ik dit kan gaan berekenen? Voorbeelden voor een menu is niet nodig. Gaat mij puur om een berekening, waarbij de knoppen uit een database worden gelezen met behulp van PHP. Verder wil ik geen gebruik gaan maken van een TABLE. Ik weet dat wanneer je een TD geen breedte mee geeft, de browser automatisch een breedte mee geeft. Dit wil ik nu dan m.b.v. een list menu.

[X-trace]

Niemand een idee, of is het niet duidelijk wat ik wil?

[Depress]

Je kunt met javascript de style aanpassen voor punt 2.

En punt 1 en 3 kun je gewoon in de CSS style zetten als een div.

[X-trace]

Ja, ok. maar dan moet ik weer hardcoded de width meegeven. Dit wil ik juist niet. Hij moet zelf uitrekenen hoe breed een div dan moet zijn.

[Mercarra]

X-trace schreef op zondag 15 oktober 2006 @ 13:15:
Ja, ok. maar dan moet ik weer hardcoded de width meegeven. Dit wil ik juist niet. Hij moet zelf uitrekenen hoe breed een div dan moet zijn.

Met javascript het aantal letters van de string die in een knop staat lezen. Al die waarden bij elkaar optellen. Dit getal delen door 500 en vermenigvuldigen met het aantal letters van de desbetreffende knop levert de breedte op. De laatste knop moet je even anders berekenen, door te kijken hoeveel px er nog over zijn, ivm afrondingsfouten.

Geen idee echter hoe je dit zou moeten programmeren in javascript, maar ik denk dat het niet al te lastig is.

[MBV]

Je kan met javascript kijken hoe breed een (evt onzichtbaar) div'je wordt waar je de gewenste tekst in zet, en dat naar proporties verdelen. Met bovengenoemde manier krijgt iiiii meer plek dan mmm, om maar eens wat te noemen.

Er was laatst trouwens laatst een andere, css only, manier hier langs gekomen. Daarin werd gebruik gemaakt van justified, en een groot blok op de volgende regel. Geen javascript-gedoe, wel vaste breedte

[edit]
tadaaa!

[ Voor 9% gewijzigd door MBV op 15-10-2006 20:35 ]

[X-trace]

TNX, ik ga het even proberen! Het moet ook niet zo zijn dat de iii even breed is als mmm

al het niet lukt laat ik het weten...

edit: is me uiteindelijk niet gelukt. kost veel tijd om uit te zoeken etc.

[ Voor 22% gewijzigd door X-trace op 17-10-2006 22:18 ]