nicht angemeldet
vertikale Menüliste mit horizontalen Inline-Elementen
suitIch habe ein Problem mit einer Idee zu einem Layout:
Ich hätte gerne eine vertikale Liste mit Menüpunkten. Diese Menüpunkte sollen bei einem vorhandenen Untermenü dann aber nicht unter, sondern genau daneben weiterlaufen, also quasi 2-spaltig. Die erste Liste ist also normal vertikal positioniert, die nächste Menü-Ebene soll genau daneben erscheinen, um 2 Spalten zu simulieren. Jetzt habe ich schon herum probiert:
<div id="sidebar1">
<ul class="menu">
<li><a class="act" href="corp.html">corporate</a>
<ul class="submenu">
<li class="sub"> <a href="1.html"><</a> 1 / 4 <a href="4.html">></a> </li>
</ul>
</li>
<li><a href="fly.html">fly</a></li>
<li><a href="play.html">play</a></li>
<li class="down"><a href="vita.html">vita</a></li>
<li><a href="kontakt.html">kontakt</a></li>
<li><a href="ret.html">ret</a></li>
<li><a href="pdf.html">pdf</a></li>
</ul>
</div>
#sidebar1 ul.menu {list-style:none;margin: 10px 30px 0 0;padding: 0 60px 0 0;width: 340px;}
#sidebar1 ul.menu li {margin: 0 0 18px 0;padding: 0; display: block;}
/*diesen Abschnitt tiefer */
#sidebar1 ul.menu li.down {margin: 48px 0 18px 0;padding: 0;}
#sidebar1 ul.menu li a, #sidebar1 ul.menu li a:link {color: #707173;margin: 0;padding: 0;}
/\*aktiver Menüpunkt \*/
#sidebar1 .menu li a.act {color:#1a171b;}
#sidebar1 .menu li a:hover,.menu li a:focus,.menu li a:active {color: #1a171b;}
/\* Submenü eingerückt neben Hauptmenü \*/
#sidebar1 ul.submenu { display: inline; list-style:none;margin: 10px 0 0 10px;padding: 0;width: 60px;}
#sidebar1 ul.submenu li.sub {display: inline;list-style-type: none; padding: 0;}
#sidebar1 ul.submenu li.sub a, #sidebar1 .submenu li.sub a:link {margin: 0;padding: 0;}
Mein Problem ist jetzt, dass durch display:inline zwar tatsächlich das Submenu neben dem 1. Menüpunkt liegt. Aber ich kriege kein 2-spaltiges Aussehen hin - die folgenden Menüpunkte breiten sich genau bis zum Ende des Containers aus und liegen damit unterhalb des Submenüs. Wenn ich padding oder margin des Hauptmenüs erhöhe, wird die gesamte Liste weiter eingerückt, inkl. des Submenüs.
Was kann ich machen? Geht das nicht?
-
[...] positioniert [...]
Was kann ich machen? Geht das nicht?
Sicher geht das - wenn du etwas positionieren willst, musst du dich aber mit der position-Eigenschaft beschäftigen. Ohne position keine Positionierung (da die Voreinstellung "static" etwa so reagiert wie "keine Positionierung".
-
[...] positioniert [...]
Was kann ich machen? Geht das nicht?
Sicher geht das - wenn du etwas positionieren willst, musst du dich aber mit der position-Eigenschaft beschäftigen. Ohne position keine Positionierung (da die Voreinstellung "static" etwa so reagiert wie "keine Positionierung".
Ok, danke für den Schubs in die richtige Richtung. Ich habe mich heute morgen eingelesen und jetzt die 1. UL relative positioniert. Jetzt kann ich tatsächlich mit absolute die 2. ul daneben legen und habe so meine 2-spaltige Erscheinung.
Leider kann ich aber bei absolute nicht an den Menüpunkt kommen, der gerade "dran" ist. Wegen der absoluten Position klebt also die 2. UL immer genau an der Stelle, die ich ihr zugewiesen habe. Eigentlich soll sie aber relativ zu dem Link im 1. UL sein. Also, wenn Menüpunkt 3 einen weiteren Unterpunkt hat, soll er neben diesem in der 2. Spalte erscheinen.
Auch wenn ich die absolute Position der 2. UL an das LI-Element klemme, bleibt sie oben und nicht neben dem Listenpunkt, der eigentlich ihr Eltern-Element bilden soll.
Kann man das verstehen?
Und hat noch jemand einen Tipp?-
Ich glaube, ich hab's jetzt.
[...] positioniert [...]
Leider kann ich aber bei absolute nicht an den Menüpunkt kommen, der gerade "dran" ist. Wegen der absoluten Position klebt also die 2. UL immer genau an der Stelle, die ich ihr zugewiesen habe. Eigentlich soll sie aber relativ zu dem Link im 1. UL sein. Also, wenn Menüpunkt 3 einen weiteren Unterpunkt hat, soll er neben diesem in der 2. Spalte erscheinen.
Auch wenn ich die absolute Position der 2. UL an das LI-Element klemme, bleibt sie oben und nicht neben dem Listenpunkt, der eigentlich ihr Eltern-Element bilden soll.
Wenn ich das 2. ul nicht positioniere, sondern "static" lasse, dann kann ich per position:relative das einzelne Listenelement an die Position des Eltern-Listenpunktes beziehen. Jetzt habe ich noch mit top: -18px etwas hochgezogen und im Firefox sieht's im Augenblick richtig aus.
Mal gucken.
-
Kann man das verstehen?
Und hat noch jemand einen Tipp?Ungeachtet deiner anderen Lösung:
position: absolute; verhält sich releativ zum nächsten Vorfahrenelement mit einer position abweichend von static.
Nachdem du deinem 1. ul-Element position: relative verpasst hast (= abweichend von static9 verhält sich das darinliegende 2. ul-Element mit position: absolute natürlich relativ zu diesem.
Du willst aber, dass es sich relativ zum entsprechenden li-Element in der ersten Ebene verhält (worin sich das a-Element und das 2. ul-Element befindet).
-
-