zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Breite von Menüpunkten proportional verteilen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.07.2011, 10:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2011
Beiträge: 10
Tosta befindet sich auf einem aufstrebenden Ast
Standard 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
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2011-07-06 um 09.23.40.png (32,3 KB, 16x aufgerufen)

Geändert von Tosta (06.07.2011 um 14:23 Uhr) Grund: Noch etwas genauer erklärt.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.07.2011, 08:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 745
mermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblickmermshaus ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.07.2011, 08:36
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von mermshaus Beitrag anzeigen
Vielleicht mit den Werten für display, die Tabellenverhalten nachahmen?
Bei der display:table-Variante wird der horizontale Raum gleichmäßig unter den li's aufgeteilt.
Der IE7 kennt display:table nicht, der braucht einen workaround mit mind. display:inline und zoom:1 und je nach Fall noch weitere Anweisungen
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #4 (permalink)  
Alt 07.07.2011, 09:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2011
Beiträge: 10
Tosta befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.07.2011, 10:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2011
Beiträge: 10
Tosta befindet sich auf einem aufstrebenden Ast
Standard

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>
CSS:
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;
}
So lässt sich gut gelaunt der Tag beginnen. Danke nochmal, mermshaus und hubspe.

Tosta
Mit Zitat antworten
  #6 (permalink)  
Alt 07.07.2011, 10:28
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Wenn du jetzt noch mit klassen/ids arbeitest und somit das inline-css weglässt, passt alles
Mit Zitat antworten
  #7 (permalink)  
Alt 07.07.2011, 10:40
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.220
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Firefox hat einen Bug bei der display-table-Variante. Schau mal in unsere FAQ unter Punkt 13.1.
Mit Zitat antworten
  #8 (permalink)  
Alt 07.07.2011, 11:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2011
Beiträge: 10
Tosta befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von zeji Beitrag anzeigen
Wenn du jetzt noch mit klassen/ids arbeitest und somit das inline-css weglässt, passt alles
Das ist Demo-Code. Die Hintergrundeinstellung wird vom CMS generiert werden.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.07.2011, 12:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.07.2011
Beiträge: 10
Tosta befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von EvT Beitrag anzeigen
Firefox hat einen Bug bei der display-table-Variante. Schau mal in unsere FAQ unter Punkt 13.1.
Ich hab jetzt keine Probleme mit Firefox (5.0). Aber danke für den Hinweis!

IE 8 macht allerdings Zicken. Angeblich soll er display:table können (MSDN). Ist wahrscheinlich noch irgendwas verquirkst… Ich meld mich noch mal.

Tosta
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.07.2011, 12:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Ich hab jetzt keine Probleme mit Firefox (5.0).
Das Problem bei diesem Problem ist, dass es nur sporadisch auftritt.
Meistens genau dann, wenn du dem Kunden voller Stolz das neue Layout präsentierst.

Zitat:
IE 8 [...] verquirkst…
Der Quirksmodus ist keine gute Voraussetzung.

Bitte: Immer vollständigen Code posten (Doctype!). Man kann sonst nicht sinnvoll darüber reden.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:55 Uhr.