Horizontale Listen --> width: 100%;

[Sincere]

Tach zusammen

Es will mir einfach nicht gelingen. Ich habe eine horizontale Liste mit Dropdown Funktion (abgekupfert bei http://www.alistapart.com/articles/dropdowns/).

Diese habe ich nun editiert und entsprechend angepasst. Nur etwas will nicht gelingen: Wie kann ich sogesagt das ganze <ul> mit einer Breite von 100% versehen, so dass sich die Listenpunkte relativ zur Bildschirmbreite "verteilen"?

Besten Dank im Voraus.

Einen schönen Abend euch allen.

[Gernot Back]

Hallo Sincere,

Es will mir einfach nicht gelingen. Ich habe eine horizontale Liste mit Dropdown Funktion (abgekupfert bei http://www.alistapart.com/articles/dropdowns/).

Diese habe ich nun editiert und entsprechend angepasst. Nur etwas will nicht gelingen: Wie kann ich sogesagt das ganze <ul> mit einer Breite von 100% versehen, so dass sich die Listenpunkte relativ zur Bildschirmbreite "verteilen"?

... indem du die LI-Elemente nicht floaten lässt, sondern ihnen display:inline und dem Listen(UL/OL)-Mutterelement text-align:justify, eine Höhe von 1.1em nebst overflow:hidden verpasst und gleichzeitig einen inhaltlich sinnlosen letzten Listenpunkt anfügst, der so breit ist, dass er auf jeden Fall in die zweite, nicht sichtbare Zeile innerhalb des Listen-Mutterelements rutscht.

Gruß Gernot

[Sincere]

Hallo Gernot

Besten Dank für deine Antwort. Hab' sie natürlich sofort ausprobiert. Leider hat's nicht hingehauen. Was würdest du an folgendem CSS Code ändern? Ich habe für die Mutterelemente (z.B. Home, News, Tiere, usw.) auch classes erstellt. Das Problem ist, wenn ich das absolute Mutterelement (im alistapart.com Beispiel id=nav) auf Höhe 1.1em beschränke, werden die Dropdown-Menüs nicht mehr angezeigt. Und: Wenn ich text-align: justify setze, werde alle Menüpunkte im dropdown verzogen.

ul { /* Alle Listen */
        padding: 0;
        margin: 0;
        list-style: none;
}

li { /* Alle Listenpunkte */
              float: left;
              position: relative;
     padding-right: 5;
     padding-top: 5;
     padding-bottom: 2;
     padding-left: 3;
}

[Gernot Back]

Hallo Sincere,

Besten Dank für deine Antwort. Hab' sie natürlich sofort ausprobiert. Leider hat's nicht hingehauen. Was würdest du an folgendem CSS Code ändern? Ich habe für die Mutterelemente (z.B. Home, News, Tiere, usw.) auch classes erstellt. Das Problem ist, wenn ich das absolute Mutterelement (im alistapart.com Beispiel id=nav) auf Höhe 1.1em beschränke, werden die Dropdown-Menüs nicht mehr angezeigt. Und: Wenn ich text-align: justify setze, werde alle Menüpunkte im dropdown verzogen.

Bei den Padding-Werten würde ich soweit sie von Null abweichen Einheiten wie px oder em setzen.

Dass das dann mit dem Dropdown nicht mehr hinhaut habe ich auch gerade experimentell herausgefunden. Es sieht leider auch nicht viel besser bei den Browsern aus, die Tabellen-display-Eigenschaften für Listen umsetzen. Aber das kann der IE ja ohnehin nicht.

Die sicherste Alternative dürfte sein, die 100% durch die Anzahl der Listenpunkte zu teilen, den LI-Elementen des obersten Levels eine entsprechende Weite zu verpassen (vergiss nicht, dass dann auch alle Vorfahrenselemente der LI-Elemente bis hinauf zu HTML eine definierte Weite benötigen) und die LI-Elemente nebst text-align:center dann eben doch floaten zu lassen.

Im zweiten Level kannst du die entsprechenden Angaben über den Nachfahrensselektor bei Bedarf ja wieder rückgängig machen oder verändern, also z.B.

  
li li {  
   float:none; /* und/oder clear:left, je nachdem */  
   width:auto;  
   text-align:left;  
}

Gruß Gernot