Horizontales Menü, Zeilenumbruch verhindern?

basti0071 · #1 (**permalink**) 16.09.2008, 09:44

Hi zusammen,

ich bastele gerade an einem horizontalen Menü mit vertikalem DropDown. Das funktioniert auch, ich habe ein grundlegenderes Problem: das Menü kann u.U. sehr viele Menüpunkte enthalten, so dass die erste Zeile breiter als der Bildschirm wird. Ich möchte dann horizontal scrollen müssen, keinen Zeilenumbruch. Das bekomme ich leider nicht hin

Folgender (vereinfachter) Code als Beispiel für das Zeilenumbruch-Problem, nicht für das Menü:

Code:

<style type="text/css">
* { padding:0; border:0; margin:0; }

#navigationContainerDiv {
	background-color:#AAAAAA;
	padding:0;
	min-width:100%;
	height:20px;
}

navigationFirstLine, #navigationFirstLine ul {
    margin:0;
    list-style:none;
}

#navigationFirstLine li {
    float:left;
}

.classTopLevel {
	background-color:#AAAAAA;
	font-family:Verdana, Helvetica, sans-serif;
	text-transform: uppercase;
	height:20px;
	font-size:11px;	
	line-height:20px;
	font-weight: bold;
}
</style>

Code:

<div id="navigationContainerDiv">
<div id="navigationFirstLine">
  <ul id="idTopLevelUl">
       <li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
	<li class="classTopLevel">Text01 &nbsp;</li>
  </ul>
</div>
</div>

Je nach Auflösung und Fensterbreite muss man ggf. noch ein paar LIs drunter kopieren, aber dann bekommt man einen Zeilenumbruch, sowohl in FF als auch im IE.

Hat dazu jemand eine Idee? Ich wäre sehr dankbar ...

Gruß,
Basti

Hensens · #2 (**permalink**) 16.09.2008, 10:00

Hi,

schau Dir bitte das hier mal an.

Noch eine kurze Anmerkung:
Dein Markup finde ich nicht besonders sauber, die Klassifizierungen der Listenpunkte sind unnötig, da sie via Nachfahrenselektoren im CSS angesprochen werden können. Und was sollen diese Leerzeichen innerhalb der Links? Abstände werden mit margin oder padding vorgenommen, aber doch nicht mit HTML.

Wozu die beiden <div>? Entferne sie und übertrage die Formatierung auf <ul>.

Liebe Grüße
Andreas

hubspe · #3 (**permalink**) 16.09.2008, 10:26

Moin,

Zitat:

Zitat von Hensens

Hi,
Und was sollen diese Leerzeichen innerhalb der Links?

es gibt eine Methode, den bei mit display:inline; entstehenden "Whitespace" durch hinzufügen einer Leerstelle vor dem schließenden </a> zu entfernen.

Ist natürlich nicht nötig, da das Problem bei float für li nicht auftritt.

Vielleicht hat er da nur was durcheinandergeworfen.

basti0071 · #4 (**permalink**) 16.09.2008, 10:36

Hi Andreas,

zuerst mal danke für die schnelle Antwort. Ja, du hast Recht, das Markup ist unsauber. Es war halt nur als schnelles Beispiel gedacht, um das Problem zu verdeutlichen (habe das eigentliche Menü auf das Wesentliche zusammen gestrichen, da sind z.B. die beiden DIVs übrig geblieben; die Leerzeichen hab ich nur schnell reingeklimpert ... normalerweise sind da noch LIs mit Grafiken zwischen, das ging so einfach schneller - hat keinen wirklichen Hintergedanken).

Zu deinem white-space-Vorschlag: leider löst das das Problem nicht; ich behalte dem Umbruch, auch mit white-space:nowrap. Selbst wenn ich alle LIs in eine gaaanz lange Zeile schreibe und dann mit white-space: pre arbeite, bricht er um ...

Grüße,
Basti

/edit:

noch mal der Code, diesmal sauber:

Code:

<html><head>
<style type="text/css">
* { padding:0; border:0; margin:0; }

 ul {
	background-color:#AAAAAA;
	min-width:100%;
	height:20px;
    list-style:none;
	/*white-space: nowrap;*/
}

 li {
    float:left;
	background-color:#AAAAAA;
	font-family:Verdana, Helvetica, sans-serif;
	text-transform: uppercase;
	height:20px;
	font-size:11px;	
	line-height:20px;
	font-weight: bold;
	margin-right: 10px;
	/*white-space: nowrap;*/
}

</style>
</head>
<body>

 <ul>
    <li>Text</li>
	<li>Text</li>
	<li>Text</li>
	<li>Text</li>
	<li>Text</li>
	<li>Text</li>
	<li>Text</li>
	<li>Text</li>
	<li>Text</li>
	<li>Text</li>
	<li>Text</li>
  </ul>

</body></html>

fricca · #5 (**permalink**) 16.09.2008, 10:53

Deinem sauberen Code fehlt die Doctype-Angabe.

Die white-space-Eigenschaft wirkt nicht bei Floats. Wohl aber bei inline und inline-block.

andir · #6 (**permalink**) 16.09.2008, 10:57

Wenn Du die li's floatest, nimmst Du sie aus dem inline-Kontext raus, no-wrap kann dann nicht mehr funktionieren.
Gib ihnen display:inline mit und streiche das float, das sollte dein Problem lösen.

Edit: zu spät

basti0071 · #7 (**permalink**) 16.09.2008, 12:29

Vielen Dank euch beiden, dass white-space bei gefloateten Objekten nicht greift, wusste ich nicht. Wieder was gelernt

Dämn Dän · #8 (**permalink**) 01.12.2008, 14:13

Hallo Leute!

Ich habe im Grunde genau das gleich Problem ... ich möchte einen Zeilenumbruch in einer horizontalen Liste verhindern, wenn das Browserfenster zu klein wird. Dieser Umbruch zerschießt mir nämlich das gesamte Layout

Hier mal das HTML-Zeugs (wie oben schon, einfach zusätzliche Listenelemente hinzufügen, wenn der beschriebene Effekt nicht auftritt):

HTML-Code:

<div id="nav_main">
           <ul>
            <li><a href="#">Button 1</a></li>
            <li><a href="#">Button 2</a></li>
            <li><a href="#">Button 3</a></li>
            <li><a href="#">Button 4</a></li>
            <li><a href="#">Button 5</a></li>
            <li><a href="#">Button 6</a></li>
           </ul>
         </div>

und jetzt noch das dazugehörige CSS:

Code:

#nav_main {
    width: 100%;
    overflow: hidden;
    float: left;
    display: inline;
    background: red;
    line-height: 0;
  }

  #nav_main ul {
    display: inline;
    float: left;
    margin: 0;
    margin-left: 50px;
    padding: 0;
  }

  #nav_main ul li {
    display: inline;
    float: left;
    font-size: 1.0em;
    line-height: 1em;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

noch eine kleine Anmerkung: ich habe im Zusammenhang mit dem zuvor beschriebenen Vorgang schon nahezu jede Kombination ausprobiert, jedoch nicht einmal den gewünschten Effekt erzielt. Getestet wurde mit dem FF3 und dem IE7.
Den float-Befehl habe ich auch schon rausgenommen und es hat nicht funktioniert ... außerdem habe ich statt dem roten Hintergrund eine Grafik drin, die wird nicht mehr angezeigt, wenn float fehlt oO so ein sch**** xD

Ich hoffe mal, ihr könnt mir helfen ... denn so langsam verliere ich die Geduld ... -.-

MfG
Dän

heiko_rs · #9 (**permalink**) 01.12.2008, 14:21

Die li dürfen nicht floaten, und white-space geht an ul, sonst wirkt es nur innerhalb der li. Wirf dann bei allen Elementen float, overflow und display raus (nur li behält letzteres).

Dämn Dän · #10 (**permalink**) 01.12.2008, 15:09

hmm ... also in dem Beispielchen hats geklappt ... aber in meinem Projekt net?! ... komische Sache!
Gibt es noch weitere Ideen, die ich verwenden/ausprobieren/testen könnte?
Danke für die flotte Antwort

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fliesendes horizontales Menü 100% Breite	Overtone	CSS	0	01.05.2010 16:19
Darstellungsproblem	flohpapa	CSS	3	16.12.2009 08:55
horizontales Menü	sarahg	CSS	9	10.02.2009 14:25
Horizontales Menü Problem unter IE6	Xtremo	CSS	8	14.02.2007 10:58
Zeilenumbruch verhindern	Steakfred	CSS	1	26.04.2006 10:07