✔ Navigationselemente auflisten

[Promaetheus]

Ich habe gerade versucht Navigationselemente ohne eine Tabelle aufzulisten. Ich habe eine Tabellenspalte "navigation" mit 100% Höhe und einer Breite von 180px.
Bisher hatte ich in dieser Spalte wieder eine Tabelle angelegt um alle Navigationselemente aufzulisten.

Diesmal wollte ich das mit divs machen, jedoch haut das überhautpt nicht hin. Ich hatte mir das so gedacht:

# Hauptelement 1
# Hauptelement 2
    * Subelement 1
    * Subelement 2
    * Subelement 3
# sehr sehr langes
  Hauptelement 3

An diesem langen Hauptelement 3 scheitert es jetzt leider. Bei den Tabellen hatte ich immer die linke Spalte für das Listenzeichen und die rechte Spalte für den Inhalt des Navigationstextes. Mit dem Einrücken von Subelementen war es natürlich blöd weil man dafür wieder eine extra Tabelle anlegen musste.

Ich habe nun das ganze so versucht zu lösen (ohne das <div style="clear:both;"></div> hat es zwar im Mozilla funktioniert, der IE hat aber jedes Element weiter reingerückt):

DIV.navSpacerMain {
  float: left;
}

DIV.navSpacerSub {
  margin-left: 15px;
  float: left;
}

<div>
  <div class="navSpacerMain">#</div>
  <div class="navContent">Hauptelement 1</div>
  <div style="clear:both;"></div>
</div>
<div>
  <div class="navSpacerMain">#</div>
  <div class="navContent">Hauptelement 2</div>
  <div style="clear:both;"></div>
</div>
<div>
  <div class="navSpacerSub">*</div>
  <div class="navContent">Subelement 1</div>
  <div style="clear:both;"></div>
</div>

Leider wird ein längerer Text eines Elements aber unter dem Listenzeichen fortgesetzt. Hab ich da einen kompletten Denkfehler drin?

 

[Maik]

Hi,

hier fehlt dem DIV .navContent ein linker Außenabstand, deshalb wird der Zeilenumbruch linksbündig fortgesetzt.

Doch wieso listest du die Navigationselemente nicht in einer verschachtelten Liste, wie z.B. http://css.maxdesign.com.au/listamatic2/vertical01.htm, auf?

 

[Promaetheus]

Danke Maik! Ich hatte hier wohl vor lauter DIV´s die einfachste Lösung ausser Acht gelassen. Dann kann ich den Listenelementen ja auch mittels Bild ein spezifisches "Vorzeichen" geben.

Manchmal sieht man leider den Wald vor lauter Bäumen nicht. :-(

 

[Promaetheus]

Ich habe das jetzt so gelöst: ist ein wenig abweichend von dem listamatic, sollte aber auch korrekt sein oder?

UL.navMain {
  padding-left: 15px;
  list-style: outside url(images/icons/icon_list.gif);
}

UL.navSub {
  padding-left: 10px;
  list-style: outside url(images/icons/icon_list.gif);
}

<ul class="navMain">
  <li>Hauptelement 1</li>
  <li>Hauptelement 2</li>
    <ul class="navSub">
      <li>Sub 1</li>
      <li>Sub 2</li>
    </ul>
  <li>Hauptelement 3</li>
</ul>

 

[Maik]

Wenn dir in den Browsern deren unterschiedlichen Polsterungseigenschaften des Listenelements, die derzeit nicht auf null gesetzt sind, nicht in die Quere kommen, ist der Code soweit korrekt.

 

[Promaetheus]

Wie meinst du das? Ich habe nämlich gerade gesehen dass das ganze im Mozilla super aussieht, im IE6 aber total bescheiden?!

http://dev.promadesign.com/root/cms/deutsch/cat_23/cId_23

 

[Maik]

Hi,

ich kann da in der Listennavigation keinen Unterschied zwischen Mozilla (FF) und IE6 entdecken.

 

[Promaetheus]

Weil ich das jetzt so gelöst habe wie du es mir vorgeschlagen hast. Mittels Lösung exakt wie listamatic.

Das einzige etwas sonderbare an der Lösung ist, dass zwischen einem Hauptmenüpunkt und seinem ersten Kindelement ein geringerer Abstand ist:
http://dev.promadesign.com/root/cms/deutsch/cat_23/cId_23

Das CSS sieht jetzt für die Liste so aus:

#navList {
  margin-left: 5;
  padding-left: 0;
  list-style: none;
}

#navList ul {
  list-style: none;
}

#navList li {
  margin-bottom: 5px;
  padding-left: 14px;
  background-image: url(images/icons/icon_nav_list.gif);
  background-repeat: no-repeat;
  background-position: 0 .5em;
}

 

[Maik]

Hi,

den gewünschten Außenabstand nach oben für das Submenü kannst du im Selektor #navList ul festlegen:

#navList ul {
  list-style: none;
  margin-top:8px;
}

 

[Promaetheus]

Danke. Werde das gleich mal ausprobieren. Schön langsam komme ich mir vor wie der Ochse vor dem Berg und blicke nicht mal mehr bei den einfachsten Dingen durch.

EDIT: Danke. es hat wunderbar geklappt.