Zeilenumbruch in Liste möglich?

[paeonia]

Guten Morgen zusammen,

ich habe eine auf Listen beruhende horizontale Navigation

  
<div id="navigation">  
<ul id="mainnav">  
   <li><span>Home</span></li>  
   <li><a href="">Wir über uns</a></li>  
   <li><a href="">superLangesWortZumTrennen</a></li>  
   <li><a href="">Links</a></li>  
</ul>  
</div>

alle bisherigen Versuche, das Wort "superLangesWortZumTrennen" zu trennen, sind fehlgeschlagen (white-space:pre, bedingter Zeilenumbruch, <br/>), weil immer die Liste umgebrochen wird, statt nur das eine Wort.

Ich möchte die Navigation nicht über images lösen.

Sind Tabellen die einzige Alternative, oder gibt es eine Möglichkeit über Listenauszeichnung?

Danke für Eure Antworten.

Gruß von paeonia

[LX]

Die Suchbegriffe, die Dir helfen sollten, lauten "Soft Hyphen" und "Zero Width Space". Die Formatierung hat hierbei nichts mit dem Markup zu tun, sondern vielmehr mit dem Inhalt.

Gruß, LX

[MudGuard]

Hi,

ich habe eine auf Listen beruhende horizontale Navigation

<div id="navigation">
<ul id="mainnav">
   <li><span>Home</span></li>
   <li><a href="">Wir über uns</a></li>
   <li><a href="">superLangesWortZumTrennen</a></li>
   <li><a href="">Links</a></li>
</ul>
</div>

>   
> alle bisherigen Versuche, das Wort "superLangesWortZumTrennen" zu trennen, sind fehlgeschlagen (white-space:pre,  
  
Wie soll die Behandlung von Whitespace etwas bringen, wenn gar kein Whitespace vorhanden ist?  
  

> bedingter Zeilenumbruch,  
  
was meinst Du damit?  
  

>  <br/>), weil immer die Liste umgebrochen wird, statt nur das eine Wort.  
  
Wie hast Du denn die Liste in die Horizontale gezwungen?  
float, display:inline, display:inline-block, ...?  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
[O o ostern ...](http://ostereier.andreas-waechter.de/)  
  
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  

[paeonia]

Hi Andreas,

Wie soll die Behandlung von Whitespace etwas bringen, wenn gar kein Whitespace vorhanden ist?

da war schon ein whitespace -> bringt aber nichts

bedingter Zeilenumbruch,was meinst Du damit?

&shy; -> klappt nicht

Wie hast Du denn die Liste in die Horizontale gezwungen?

display:inline
siehe css-Beispiel unten (ohne den ganzen ballast wie color, border usw.)
 ~~~css

#navigation {
    text-align: center;
    font-size:0.8em;
    width:941px;
}
#navigation ul {
    list-style: none outside none;
}
#navigation li {
    display: inline;
}
#navigation a:link, #navigation a:visited , #navigation span {
    text-decoration: none;
}

  
Grüße von paeonia

[bleicher]

Grüße,
korrigiert mich, wenn ich falsch liege, aber wenn ich mich echt erinnere, wird es kein Umbruch "im" Element geben, dessen breite nicht beschränkt ist.
MFG
bleicher

[paeonia]

Hallo,

wird es kein Umbruch "im" Element geben, dessen breite nicht beschränkt ist.

Habe versuchsweise erst dem a-tag eine breite gegeben, dann dem li-tag, das Ergebnis ist immer ein Umbruch der gesamten Liste.

Ich versuche jetzt mal die anderen Vorschläge

Gruß von paeonia

[ChrisB]

Hi,

Habe versuchsweise erst dem a-tag eine breite gegeben, dann dem li-tag

Hast du denn auch dafür gesorgt, dass diese Elemente eine width-Angabe überhaupt umsetzen dürfen ...?
(Dass sie dies nicht dürfen, so lange sie inline dargestellt werden, sollte bekannt sein.)

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Habe versuchsweise erst dem a-tag eine breite gegeben, dann dem li-tag

Nein, nicht den Tags.

Hast du denn auch dafür gesorgt, dass diese Elemente eine width-Angabe überhaupt umsetzen dürfen ...?
(Dass sie dies nicht dürfen, so lange sie inline dargestellt werden, sollte bekannt sein.)

Um der nächsten Frage zuvorzukommen: inline-block oder Floats. Wobei inline-block oft die bessere Wahl ist.

Qapla'

[paeonia]

Hallo Gunnar und ChrisB,

Nein, nicht den Tags.

angekommen! dem a-Element

Hast du denn auch dafür gesorgt, dass diese Elemente eine width-Angabe überhaupt umsetzen dürfen ...?
(Dass sie dies nicht dürfen, so lange sie inline dargestellt werden, sollte bekannt sein.)

Hätte klar sein sollen, war aber nicht präsent. Inline-block habe ich nicht gekannt, hat aber beim Testen auch nicht den erwünschten Erfolg gehabt, als ich es den Elementen(!!) zu gewiesen habe.

ich nehme jetzt eine Tabelle für die navigation: die macht mit 3 Zeilen CSS und einer Zeile Auszeichnung genau das, was ich will, bricht die Wörter genau an der richtigen Stelle (&shy;), passt sich auch noch dem liquid Layout an und alles ist gut.

Virtuelle Steine, mit denen man für Tabellenlayout gesteinigt wird, tun ja auch nur virtuell weh.

Danke für Eure Hilfe, immerhin habe ich fürs nächste Mal dazu gelernt.

Gruß von Paeonia

[paeonia]

Danke für die Eure Hinweise,
ich werde alle  bearbeiten und melde mich dann noch mal, wenn ich nicht weiter gekommen bin.

paeonia