..lieber horizontal?

Mehrere Navigationsebenen horizontal angeordnet.

Vorweg

Sie sollten dafür sorgen, dass der Platz horizontal tatsächlich ausreicht, ein erzwungener Zeilenumbruch würde das Layout zerstören.

Was ist hier anders?

Der html Code leicht verändert. Beachten Sie die Schachtelung der Items 2a und 2b, durch die Einrückung kenntlich gemacht.

Die Anweisung float:left bewirkt die horizontale Anordnung der wieder in div gekapselten Links (Zeile 2 des css Codes). Heisst im Klartext "Linksbündig und erlaube Fliesstext (in diesem Fall eine weitere Box) rechts um dieses Element herum".

Abhängig von Ihrem Design kann es notwendig sein, die Funktion float wieder abzuschalten. Das erreichen Sie z.B. durch ein leeres <div style="clear:both;"></div> danach.

Fertig und zum Ausprobieren

der html Code

<div id="MENUE_3">
  <div><A href="#">Item 1</A></div>
  <div><A href="#" class="m_act">Item 2</A>
    <div><A href="#2a">Item 2 a</A></div>
    <div><A href="#2b">Item 2 b</A></div>
  </div>
  <div><A href="#">Item 3</A></div>
  <div><A href="#">Item 4</A>
  </div>
</div>

und einige Zeilen css

<style type="text/css" media="screen">;
#MENUE_3 { font-family:Helvetica, sans-serif; font-size:90%;}
#MENUE_3  div { background-color: #f16733; width: 80px; 
    border: 1px solid white; float:left;}
#MENUE_3 div div {
    border:none; border-top:1px solid white; float:none;}
#MENUE_3 a { 
    font-weight:bold;color:white; white-space:nowrap; display:block; 
    text-decoration:none; padding: 1px 0px 1px 5px; 
    border:thin solid #e05020 }
#MENUE_3 a.m_act {background-color:#ffb080}
#MENUE_3 a:hover { background-color: #b03010;}
</style>;

Wenn der MS IE css 2.1 verstehen würde

Dann wäre die Schreibweise einfacher: Moderne Browser können das. Der Selector in der ersten hinterlegten Zeile etwas anders. Die verwendete Schreibweise oben vererbt die Eigenschaften an alle Kind und Kindeskind-Elemente. Die Schreibweise #MENUE > div beschränkt die Vererbung nur auf das Kind-Element und die 2. Zeile kann vereinfacht werden.

#MENUE_3 > div  { background-color: #f16733; width: 80px; 
    border: 1px solid white; float:left;}
#MENUE_3 div div {border-top:1px solid white;}


Ein Menü basteln.. mehrere Navigationsebenen ..lieber horizontal? ..und mit mehr Dynamik? doch lieber grafisch Menü a la zisslaweng Browser-sicheres CSS	Mehrere Navigationsebenen horizontal angeordnet. Vorweg Sie sollten dafür sorgen, dass der Platz horizontal tatsächlich ausreicht, ein erzwungener Zeilenumbruch würde das Layout zerstören. Was ist hier anders? Der html Code leicht verändert. Beachten Sie die Schachtelung der Items 2a und 2b, durch die Einrückung kenntlich gemacht. Die Anweisung float:left bewirkt die horizontale Anordnung der wieder in div gekapselten Links (Zeile 2 des css Codes). Heisst im Klartext "Linksbündig und erlaube Fliesstext (in diesem Fall eine weitere Box) rechts um dieses Element herum". Abhängig von Ihrem Design kann es notwendig sein, die Funktion float wieder abzuschalten. Das erreichen Sie z.B. durch ein leeres `<div style="clear:both;"></div>` danach. Fertig und zum Ausprobieren Item 1 Item 2 Item 2 a Item 2 b Item 3 Item 4 der html Code <div id="MENUE_3"> <div><A href="#">Item 1</A></div> <div><A href="#" class="m_act">Item 2</A> <div><A href="#2a">Item 2 a</A></div> <div><A href="#2b">Item 2 b</A></div> </div> <div><A href="#">Item 3</A></div> <div><A href="#">Item 4</A> </div> </div> und einige Zeilen css <style type="text/css" media="screen">; #MENUE_3 { font-family:Helvetica, sans-serif; font-size:90%;} #MENUE_3 div { background-color: #f16733; width: 80px; border: 1px solid white; float:left;} #MENUE_3 div div { border:none; border-top:1px solid white; float:none;} #MENUE_3 a { font-weight:bold;color:white; white-space:nowrap; display:block; text-decoration:none; padding: 1px 0px 1px 5px; border:thin solid #e05020 } #MENUE_3 a.m_act {background-color:#ffb080} #MENUE_3 a:hover { background-color: #b03010;} </style>; Wenn der MS IE css 2.1 verstehen würde Dann wäre die Schreibweise einfacher: Moderne Browser können das. Der Selector in der ersten hinterlegten Zeile etwas anders. Die verwendete Schreibweise oben vererbt die Eigenschaften an alle Kind und Kindeskind-Elemente. Die Schreibweise #MENUE > div beschränkt die Vererbung nur auf das Kind-Element und die 2. Zeile kann vereinfacht werden. #MENUE_3 > div { background-color: #f16733; width: 80px; border: 1px solid white; float:left;} #MENUE_3 div div {border-top:1px solid white;}	zur Fehlersuche: Setzen sie farbige Rahmen um Kästen, um zu sehen, wie die Abmessungen sind. Fügen Sie in das fragliche html Element temporär folgenden Code ein: `style="border:thin solid red;"` Inzwischen wundere ich mich auch nicht mehr, dass der IE die Pseudotags :before und :after nicht kennt. Warum verwenden Sie nicht einfach einen modernen Browser wie FIREFOX? Dann würde dieser Absatz z.B. mit dem Wörtchen "Übrigens" eingeleitet werden.