horizontale Liste (Menü) als Blocksatz

[ad]

Hallo Forum,
ich habe bereits goolge und die Suche befragt, Ergebnisse gefunden aber mein Problem trotzdem nicht lösen können.

Ich will eine Navigation über die Breite von 860px als Blocksatz darstellen (d.h. der freie Platz wird gleichmäßig in allen Zwischenräumen der Liste verteilt).

so sieht mein CSS aus:

  
#navibar ul{  
	margin:0;  
	padding:0;  
	width:860px;  
	display:block;  
	text-align:justify;  // mit 'center' wird es richtigerweise zentriert  
}  
  
#navibar li{  
	list-style-type:none;  
	display:inline;  
}  

Wie oben erwähnt, funktioniert "center" wie erwartet. "justify" bewirkt allerdings gar nichts. Das Menü klebt links. Warum?

danke, andi

[ChrisB]

Hi,

Wie oben erwähnt, funktioniert "center" wie erwartet. "justify" bewirkt allerdings gar nichts. Das Menü klebt links. Warum?

Weil sich justify immer nur bei mehreren Zeilen auswirkt, und dabei nicht auf die letzte.

MfG ChrisB

[ad]

hi

Weil sich justify immer nur bei mehreren Zeilen auswirkt, und dabei nicht auf die letzte.

ah, ok. In einem alten thread hatte ich noch das hier gefunden:

  
ul  
{  
  list-style: none;  
  margin: 0;  
  padding: 0;  
  text-align-last: justify;  
  text-align: justify;  
}  
  

das text-align-last: justify; bringt mich aber auch nicht weiter. Wie komme ich denn zum gewünschten erfolg? :)

[Gunnar Bittersmann]

@@ad:

nuqneH

das text-align-last: justify; bringt mich aber auch nicht weiter.

Doch, im IE schon. Der hat es seit geraumer Zeit schon implementiert. Keine Ahnung, warum die anderen Browser da nicht nachziehen.

Wie komme ich denn zum gewünschten erfolg? :)

Indem du Inhalt einfügst, der eine neue Zeile erzwingt:

ul::after  
{  
	content: "\A0";  
	display: inline-block;  
	height: 0;  
	width: 100%;  
}

Qapla'

[ad]

hi

im IE schon. Der hat es seit geraumer Zeit schon implementiert. Keine Ahnung, warum die anderen Browser da nicht nachziehen.

aha. mal ws ganz Neues :-)

Wie komme ich denn zum gewünschten erfolg? :)

Indem du Inhalt einfügst, der eine neue Zeile erzwingt:

ah cool. Vielen Dank!!!

[ad]

Jetzt habe ich doch noch eine Frage. Eigentlich hatte alles soweit so gut geklappt. Ein Menüpunkt heisst "Lorem + ipsum". Damit das nicht auseinandergerissen wird, habe ich "Lorem + ipsum" notiert. Im FF3.6 kein Problem.

Just in diesem Augenblick habe ich zum FF4 geupdatet. Nun wird (trotz des  ) der Menüeintrag total zerrissen:
Lorem + ipsum

FF4 bug?

[Gunnar Bittersmann]

@@ad:

nuqneH

Just in diesem Augenblick habe ich zum FF4 geupdatet. Nun wird (trotz des  ) der Menüeintrag total zerrissen:
Lorem + ipsum

FF4 bug?

Unterschiedliche Behandlung von NBSP bei Blocksatz. Da bin ich auch schonmal drauf reingefallen.

li { display: inline-block } does the trick. Dann kannst du auch auf NBSP verzichten und normale Leerzeichen verwenden. Sieht in aktuellen Chrome, Firefox, Opera und Safari gut aus; IE hab ich gerade nicht zur Hand.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

li { display: inline-block } does the trick. Dann kannst du auch auf NBSP verzichten und normale Leerzeichen verwenden. Sieht in aktuellen Chrome, Firefox, Opera und Safari gut aus; IE hab ich gerade nicht zur Hand.

Im 8er und 9er sieht’s gut aus. Der 7er ist widerspenstig, da ist mir nichts besseres eingefallen als doch seine Art des Umgangs mit NBSP und Blocksatz auszunutzen (d.h. doch NBSP zu verwenden):

ul  
{  
	list-style: none;  
	margin-left: 0;  
	padding: 0;  
	text-align: justify;  
	text-align-last: justify;  
}  
  
ul::after  
{  
	content: "\A0";  
	display: inline-block;  
	height: 0;  
	width: 100%;  
}  
  
li, li:lang(zxx)  
{  
	display: inline-block;  
	padding: 0;  
}  
  
*+html li  
{  
	display: inline;  
}

Der Selektor 'li, li:lang(zxx)' macht diese Regel für IE 7 unsichtbar (weil er :lang() nicht kennt). Ansonsten schlugen alle meine Versuche fehl, ihn davon zu überzeugen, einmal gesetztes 'display: inline-block' mit 'display: inline' zu überschreiben. Gibt’s da ’nen Trick?

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Ansonsten schlugen alle meine Versuche fehl, ihn davon zu überzeugen, einmal gesetztes 'display: inline-block' mit 'display: inline' zu überschreiben. Gibt’s da ’nen Trick?

deine dritte Frage in diesem Forum? ;-)

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

deine dritte Frage in diesem Forum? ;-)

Wieviele hat man denn hier frei? Hab ich jetzt schon alle aufgebraucht?

Qapla'

[Der Martin]

Hallo Gunnar,

deine dritte Frage in diesem Forum? ;-)
Wieviele hat man denn hier frei? Hab ich jetzt schon alle aufgebraucht?

jetzt ganz bestimmt. :-)

Ciao,
 Martin

[Harlequin]

Yerf!

Ansonsten schlugen alle meine Versuche fehl, ihn davon zu überzeugen, einmal gesetztes 'display: inline-block' mit 'display: inline' zu überschreiben. Gibt’s da ’nen Trick?

Ich denk mal eher nicht. Das nachträgliche setzen von display:inline war ja der Trick, damit display:inline-block im IE < 8 überhaupt funktioniert.

Die Unterstützung für diese Eigenschaft scheint da eher ein Unfall als gewollt zu sein...

Gruß,

Harlequin