• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Horizontale Listenelemente Zeilenumbrüche im Quellcode

Status
Für weitere Antworten geschlossen.
K

kainobi

Neues Mitglied
Hi!

Ich habe hier ein ganz seltsames Problem.

Ich möchte eine Navigation mit horizontal angeordneten Listenelementen erzeugen. Diese müssen auch noch zentriert sein. Deshalb verwende ich beim <li>-Tag den Style display: inline, da mit float: left die Zentrierung nicht funktioniert. white-space: nowrap sorgt dann noch dafür, dass nicht mitten im Link umgebrochen wird. Hier der Code in reduzierter Form, der Einfachheit halber ohne ausgelagertes CSS:

Code: 
<ul style="width:150px;">
   <li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 1</a></li>
   <li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 2</a></li>
   <li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 3</a></li>
   <li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 4</a></li>
  </ul>

Soweit so gut, das funktioniert genau wie es sollte. Da ich aber ein CMS (Typo3) einsetze, werden mir die Listenelemente immer in einer einzigen Zeile im Quellcode generiert. Das sieht dann so aus:

Code: 
<ul style="width:150px; text-align: center;"><li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 1</a></li><li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 2</a></li><li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 3</a></li><li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 4</a></li></ul>

Nun zu meinem Problem. In Firefox 2 wird im 2. Fall (alles in einer Quellcode-Zeile) das Menü nicht mehr umgebrochen, wenn es breiter als bei <ul> angegeben ist. Der Zeilenumbruch muss jedoch durchgeführt werden, da es das Design der Seite so erfordert. Am besten ihr probiert es schnell mal aus, damit es klar ist um was es geht.

Kurz: Ich bekomme im Firefox unterschiedliche Darstellungsergebnisse bei exakt gleichem Quellcode, nur dass halt einmal der Quellcode sauber formatiert ist und einmal halt alles an einer Wurscht steht. :roll:
Hoffe das ist jetzt irgendwie verständlich formuliert...

Hat jemand eine Ahnung was da falsch läuft? Das kann´s doch net sein, oder?

Danke & viele Grüße
 
Das liegt an white-space: nowrap; - bitte einmal lesen:
white-space: Textumbruch: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

white-space: nowrap; sorgt nicht nur dafür, dass der Link nicht umgebrochen wird, es verhindert auch jeglichen Umbruch, wenn im Quelltext keiner steht. Es ist eigens dafür konzipiert, Elemente auf Quelltextunterschiede reagieren zu lassen. Mit anderen Worten: Du musst das white-space: nowrap; loswerden, ohne dass dann hinterher die Links wieder umgebrochen werden.

Am einfachsten geht das, wenn du die Listenelemente doch mit float: left; versiehst.
Dass du diese dann nicht zentrieren kannst, stimmt nicht: Gib dem ul einfach ein margin: 0px auto; und schon ist die Liste zentriert. Für den Internet Explorer, der dieses Verfahren nicht richtig interpretiert, verwendest du text-align: center; im umschließenden Element.
Dann musst du natürlich noch alles andere mit text-align: left; ausstatten - und schon bist du fertig.
 
kainobi schrieb:
Hat jemand eine Ahnung was da falsch läuft? Das kann´s doch net sein, oder?
Zum Vergrößern anklicken....
*gg böse Falle.
Aber nicht so schlimm.
Weil alle li's durch das display: block wie inline-Elemente behandelt werden, verhalten sie sich im Textfluss wie zB. span.
<span>texttexttexttexttext</span> würde wegen fehlenden Leerzeichen auch nicht umgebrochen.
Du mußt Leerzeichen einfügen um Einen Automatischen zeilenumbruch zu ermöglichen:
HTML: 
<li style="display:inline; padding-right:5px"><a href="#" style="white-space: nowrap;">Link 1</a></li> <li style="display:inline; padding-right:5px">
(Zwischen </li> und <li> ein Leerzeichen setzen.)

Die float-Methode von IngoS hat natürlich den Vorteil, daß nichts im html ändern mußt.
Das white-space stört aber meiner Meinung nach nicht, da es lediglich im a-Tag steht und li trotzdem Umgebrochen werden kann.

Nachtrag
Ich hab doch noch eine Idee ohne am html etwas zu ändern:
Code: 
li:after {
content: " "; 
}
Fügt per css ein Leerzeichen ein.
(Funktioniert nicht in Internet Explorern)
 
Zuletzt bearbeitet:
Hallo ihr beiden!

Erstmal herzlichen Dank für die rasche Hilfe!

IngoS, ich habe deinen Vorschlag ausprobiert, allerdings wird das Menü bei mir dann weder im IE noch im FF zentriert. Der Quellcode sieht nun so aus:

Code: 
<div style="text-align: center;"><ul style="width:150px; margin: 0px auto;"><li style="float: left; padding-right:5px"><a href="#">Link 1</a></li><li style="float: left; padding-right:5px"><a href="#">Link 2</a></li><li style="float: left; padding-right:5px"><a href="#">Link 3</a></li><li style="float: left; padding-right:5px"><a href="#">Link 4</a></li></ul></div>

Ist es so, wie Du gemeint hattest oder hab ich noch etwas falsch verstanden?

neuroleptika, Dein Ansatz mit li:after funktioniert! Gibt es irgendein Argument gegen die Verwendung dieses Pseudoelements? Ansonsten würde ich Deine Lösung verwenden, bevor ich noch lange mit floats und wasweissichnochalles rumschraube ;-)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben