|
|||
Breite von Menüpunkten proportional verteilen
Hi,
wie kann ich mit CSS erreichen, dass in einem horizontalen Menü mit fester Gesamtbreite die Breite eines jeden Menüpunktes automatisch proportional zur Länge seines Textes gesetzt wird? Das heißt: Kurze Menüpunkte bekommen weniger Breite als lange Menüpunkte, und alle zusammen füllen genau die Gesamtbreite. Ein Beispiel hab ich angehängt. Sieht hübsch aus, ist aber mit table gemacht; da ist das Standard. Wie geht es sauber mit CSS – ohne dass die Breite der Menüpunkte fest vorgegeben wird? Danke für eure Hilfe! Tosta Geändert von Tosta (06.07.2011 um 14:23 Uhr) Grund: Noch etwas genauer erklärt. |
Sponsored Links |
|
|||
Vielleicht mit den Werten für display, die Tabellenverhalten nachahmen?
- https://developer.mozilla.org/En/CSS:display Glaube nicht, dass das in allen älteren Browsern funktionieren wird, aber wäre vielleicht ein Ansatz. |
Sponsored Links |
|
|||
Danke für eure Hinweise! Ich hatte es gestern schon mit display:table probiert, und es hat nicht geklappt. Weil hubspe aber sagt, es geht, werd ich es sofort nochmal probieren.
Tosta P.S. Der IE7 ist mir inzwischen herzlich egal. |
|
|||
Brilliant! Es funktioniert. (Ich war gestern wohl nicht sorgfältig genug.)
Ich hab die display-Werte zur Tabellennachahmung gestern erst kennengelernt (und das nach Jahren intensiver CSS-Anwendung…). Eine Gande! Damit lassen sich ganz einfach all die praktischen Sachen machen, die – wie ich dachte – nur die bösen Tabellen konnten. Und alles hoffentlich barrierefrei. Für alle Interessierten hier der Code. HTML: HTML-Code:
<div id="main-navi"> <ul> <li style="background-color: grey"> Lorem </li> <li style="background-color: orange"> Ipsum </li> <li style="background-color: red"> In </li> <li style="background-color: magenta"> Felicitatem </li> <li style="background-color: brown"> Iram </li> <li style="background-color: grey"> Colonia </li> <li style="background-color: orange"> Per Pedes Cannabinorum </li> <li style="background-color: red"> Humbug </li> </ul> </div> Code:
#main-navi ul { display: table; width: 100%; margin-top: 12px; line-height: 26px; font-size: 12pt; } #main-navi li { display: table-cell; padding-left: 22px; padding-right: 22px; white-space: nowrap; overflow: hidden; } Tosta |
|
|||
Das ist Demo-Code. Die Hintergrundeinstellung wird vom CMS generiert werden.
|
|
|||
Zitat:
IE 8 macht allerdings Zicken. Angeblich soll er display:table können (MSDN). Ist wahrscheinlich noch irgendwas verquirkst… Ich meld mich noch mal. Tosta |
Sponsored Links |
|
|||
Zitat:
Meistens genau dann, wenn du dem Kunden voller Stolz das neue Layout präsentierst. Zitat:
Bitte: Immer vollständigen Code posten (Doctype!). Man kann sonst nicht sinnvoll darüber reden.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Variable Anzahl divs zentriert über komplette Breite verteilen? | Phunkafizer | CSS | 2 | 14.09.2010 14:09 |
Vererben von Breite (width) funktioniert nicht bei automatischer Breite. | Advento | CSS | 4 | 07.02.2010 21:22 |
Variable Breite mit fester Breite vermischen | vertex | CSS | 11 | 16.10.2006 14:22 |
3 Spalten | Aussen: variable Breite; Mitte: feste Breite | dreamshocker | CSS | 9 | 17.08.2005 17:23 |
problem mit IE Textarea + variable breite | stese | CSS | 3 | 26.07.2004 12:52 |