nicht angemeldet
Div Menü mit untergeordneten Elementen
Hallo erstmal an alle Tüftler hier!
Ich hab gerade ein echt anstrengendes "Verstänndnisproblem" um nicht zu sagen der Code macht mich kirre!
Naja auf jeden Fall geht es um eine vertikale Navigation welche sich beim anklicken des Menülinks nach unten hin aufklappt, formatiert in css.
Der funktionierende Code sieht so aus:
a, a:visited, a:hover, a:active, a:focus {}
#positioner {position:relative; width:160px; height:160px; margin-left:10px;z-index:100;}
#holder {position:absolute; width:150px; overflow:hidden; border:4px solid #000; border-width:4px 4px 3px 4px; background:#000;}
dl.menu {width:300px; float:left; margin:-32700px -150px 0 0; background:url(clickslide/tab1.gif) no-repeat left bottom; margin-bottom:2px;}
dl.menu a {display:block; height:30px; color:#000; font:bold 11px/28px verdana, sans-serif; text-decoration:none;}
dl.menu dt {float:left; padding:0; margin:32700px 0 0 0; position:relative; z-index:50;}
dl.menu dt a.lefta {width:105px; float:left; padding-left:25px;}
dl.menu dt a.plusa {width:20px; float:left; background:url(clickslide/down.gif) no-repeat center center;}
dl.menu dt a.plusa b {position:absolute; left:-9999px;}
dl.menu dt a.lefta:hover,
dl.menu dt a.lefta:focus,
dl.menu dt a.lefta:active {color:#c00;}
dl.menu dt a.plusa:hover {background:url(clickslide/down2.gif) no-repeat center center;}
dl.menu dt a.plusa:focus,
dl.menu dt a.plusa:active
{margin-right:1px; background:url(clickslide/down2.gif) no-repeat center center; outline:0; position:relative; left:-9999px;}
dl.menu dd {float:left; padding:30px 0 0 0; margin:-30px 0 0 0; position:relative; z-index:10; background:url(clickslide/tab3.gif) no-repeat left top;}
dl.menu dd a {background:#fff; width:125px; padding:5px 0 5px 25px; border-bottom:1px solid #ccc; font-weight:normal; line-height:17px; height:auto;}
dl.menu dd a:hover,
dl.menu dd a:focus,
dl.menu dd a:active
{margin-right:1px; color:#c00; outline:0;}
Nun soweit so gut, das Ganze wollte ich dann natürlich untereinander anordnen, hat auch geklappt, jedoch funktioniert nun keiner der Links mehr welche im untergeordneten dd liegt...
Hier mein Code wie er momentan ist:
a, a:visited, a:hover, a:active, a:focus {}
#menu {position:relative; width:150px; height:160px; background-color:#FFFF00;}
#menucover {position:absolute; width:150px;}
dl.menu {width:150px; float:left; margin:-32700px 0px 0 0;margin-bottom:2px; background:url(images/blind.gif) no-repeat left bottom; }
dl.menu a {display:block; height:20px; color:#000; font:bold 11px/20px; font-family:Verdana; text-decoration:none;}
dl.menu dt {float:left; margin:32700px 0 0 -20px; position:relative; background-color:#000099;}
dl.menu dt a.lefta {width:5px; float:left; padding-left:5px;}
/* Float klar, width + padding-left verschiebt menülink nach rechts */
dl.menu dt a.plusa {width:40px; float:left; background:url(images/blind.gif) no-repeat center center;}
dl.menu dt a.plusa b {position:absolute;}
dl.menu dt a.lefta:hover,
dl.menu dt a.lefta:focus,
dl.menu dt a.lefta:active {color:#c00;}
dl.menu dt a.plusa:hover {background:url(images/blind.gif) no-repeat center center;}
dl.menu dt a.plusa:focus,
dl.menu dt a.plusa:active
{margin-right:1px; outline:0; position:relative; background:url(images/blind.gif) no-repeat center center;}
dl.menu dd { float:left; padding:5px 0 0 5px; position:relative; margin:-5px 0 0 -5px; background:url(images/blind.gif) no-repeat left top; background-color:#999999;}
dl.menu dd a {width:125px; padding:1px 0 1px 5px; margin:0 0 0 -10px; font-weight:normal; line-height:17px; height:auto; background-color:#996666;}
dl.menu dd a:hover,
dl.menu dd a:focus,
dl.menu dd a:active
{color:#c00; outline:0;}
Mir ist definitiv gerade zu hoch warum das so ist, denn verschiebt man das dl.menu dd a mit dem letzten padding Wert (in meinem Beispiel 5px) um 5px bleibt das Menu von Anfang an direkt offen und die Links funktionieren.
Wäre schön wenn jemand helfen könnte und ggf. eine passende Erklährung parat hat, da ich dieses Menü ehrenamtlich für eine Behindertengerechte Seite benötige.
Bitte nicht wegen den Hintergrundfarben meckern, die waren für mich zu guter letzt nur noch um zu sehen wie sich die einzelnen Elemente verhalten. Sie werden also nicht benötigt und in der Endfassung nicht mehr vorhanden sein.
Euch weiterhin viel Erfolg!
-
Hallo, Roland!
Wenn Dich dieser Code schon wahnsinnig macht, wie muss er dann erst auf uns wirken - insbesondere da Du vergessen hast, das entsprechende HTML mitzuliefern, an dem wir ihn austesten könnten?
Zum eigentlichen Problem: schaue Dir mal mit Firebug oder einem vergleichbaren Tool an, ob vielleicht ein Element über den Links positioniert ist, welches die Klicks abfängt.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Oh, entschuldige mein Fehler! Hier noch das fehlende Html-Teil:
<div id="positioner"> <div id="holder"> <dl class="menu"> <dt> <a class="lefta" href="#link">Home</a> </dt> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link">Products</a> <a class="plusa" href="#url"><b>+</b></a> </dt> <dd> <a href="#url">Digital Cameras</a> <a href="#url">Monopods & Tripods</a> <a href="#url">Flashguns & Reflectors</a> <a href="#url">Telephoto Lenses</a> <a href="#url">Filters</a> <a href="#url">Lens Hoods</a> <a href="#url">Lens Adaptors</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link">Services</a> <a class="plusa" href="#url"><b>+</b></a> </dt> <dd> <a href="#url">Enlarging</a> <a href="#url">Framing & Restoring</a> <a href="#url">Printing</a> <a href="#url">Copying</a> <a href="#url">Sepia Toning</a> <a href="#url">Archiving</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link">Outlets</a> <a class="plusa" href="#url"><b>+</b></a> </dt> <dd> <a href="#url">London</a> <a href="#url">Gloucestershire</a> <a href="#url">East Midlands</a> <a href="#url">Glasgow</a> <a href="#url">Bristol</a> <a href="#url">Exeter</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link">Terms</a> <a class="plusa" href="#url"><b>+</b></a> </dt> <dd> <a href="#url">Payment Methods</a> <a href="#url">Conditions of Sale</a> <a href="#url">Privacy Policy</a> </dd> </dl> </div> </div>Werde ich mal ebend tun, aber ich denke nicht, wenn ich mir die Anordnung anhand der Backroundcolors so anschaue müsste es was das angeht schon richtig sein. Mal abgesehen dass es ja 3 Ebenen gibt z-index 100/50/10 wodurch ja letztendlich schon arrangiert sein müsste dass das Untermenü aufgeklappt schon ganz oben läge.
Gruß Roland
-
z-index hat manchmal so seine Tücken, besonders bei verschachtelten Elementen.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Hi,
z-index hat manchmal so seine Tücken, besonders bei verschachtelten Elementen.
Konkret: FF etc. wertet zIndex absolut aus, IE relativ ab einem ebenfalls positionierten Elternelement.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi,
z-index hat manchmal so seine Tücken, besonders bei verschachtelten Elementen.
Konkret: FF etc. wertet zIndex absolut aus, IE relativ ab einem ebenfalls positionierten Elternelement.Gruesse, Joachim
Nun ja, aber warum funktioniert der Link dann nach einer Verschiebung der erwähnten 5px? Von der Theorie her, ob jetzt geschlossen oder offenliegend, denn das wär in dem Fall der Fall, würde dennoch irgendetwas darüber liegen. Tut es aber nicht, es ist als wärde der Link kein Link sondern einfacher Text mit einen hover.
Bei der Verschiebung allerdings und wie geschrieben es handelt sich um 5px, funktioniert der Link an jeder Stelle der gesammten Breite der bestimmten Spalte.Gruß Roland
-
Eine Vermutung wäre, dass die Links in dd display inline haben und daher möglicherweise an ihrer oberen linken Ecke "gemessen" werden - wenn diese überdeckt wird, könnte dadurch der ganze Link unklickbar werden. Das ist natürlich nur eine Vermutung.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Eine Vermutung wäre, dass die Links in dd display inline haben und daher möglicherweise an ihrer oberen linken Ecke "gemessen" werden - wenn diese überdeckt wird, könnte dadurch der ganze Link unklickbar werden. Das ist natürlich nur eine Vermutung.
Gruß, LX
Einwandfrei :D
Es war in der Tat die linke Seite! Und zwar genau genommen der erste Link mit der Beschreibung "lefta". Er durfte nicht zu weit aus dem Bereich geschoben werden der ja anklickbar sein soll. Wenn das geschah und man schiebt den anderen relevanten Link mit dem Text nicht mit, funktioniert kein Link mehr. Verschiebt man beide nicht gleichmässig, bleibt das Untermenü stetig offen.Danke für den Ansatz!
Hier der Code, falls es jemandem hilft:
a, a:visited, a:hover, a:active, a:focus {} #positioner {position:relative; width:150px; height:160px; margin-left:-35px; z-index:100;} #holder {position:absolute; width:150px; overflow:hidden;} dl.menu {width:300px; float:left; margin:-32700px -150px 0 0; margin-bottom:2px;} dl.menu a {display:block; height:20px; font:bold 11px/28px verdana, sans-serif; text-decoration:none;} dl.menu dt {float:left; padding:0; margin:32700px 0 0 0; position:relative; z-index:50;} dl.menu dt a.lefta {width:5px; float:left; padding-left:20px;} dl.menu dt a.plusa {width:120px; float:left;} dl.menu dt a.plusa b {position:absolute; left:-9999px;} dl.menu dt a.lefta:hover, dl.menu dt a.lefta:focus, dl.menu dt a.lefta:active {color:#c00;} dl.menu dt a.plusa:hover {} dl.menu dt a.plusa:focus, dl.menu dt a.plusa:active {margin-right:1px; outline:0; position:relative; } dl.menu dd {float:left; padding:30px 0 0 0; margin:-30px 0 0 0; position:relative; z-index:10;} dl.menu dd a {width:125px; padding:5px 0 5px 30px; font-weight:normal; line-height:17px; height:auto;} dl.menu dd a:hover, dl.menu dd a:focus, dl.menu dd a:active {margin-right:1px; color:#c00; outline:0;}<div id="positioner"> <div id="holder"> <dl class="menu"> <dt> <a class="lefta" href="#link"> Home</a> </dt> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link"> </a> <a class="plusa" href="#url">Products<b>+</b></a> </dt> <dd> <a href="#url">Digital Cameras</a> <a href="#url">Monopods & Tripods</a> <a href="#url">Flashguns & Reflectors</a> <a href="#url">Telephoto Lenses</a> <a href="#url">Filters</a> <a href="#url">Lens Hoods</a> <a href="#url">Lens Adaptors</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link"> </a> <a class="plusa" href="#url">Services<b>+</b></a> </dt> <dd> <a href="#url">Enlarging</a> <a href="#url">Framing & Restoring</a> <a href="#url">Printing</a> <a href="#url">Copying</a> <a href="#url">Sepia Toning</a> <a href="#url">Archiving</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link"> </a> <a class="plusa" href="#url">Outlets<b>+</b></a> </dt> <dd> <a href="#url">London</a> <a href="#url">Gloucestershire</a> <a href="#url">East Midlands</a> <a href="#url">Glasgow</a> <a href="#url">Bristol</a> <a href="#url">Exeter</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link"> </a> <a class="plusa" href="#url">Terms<b>+</b></a> </dt> <dd> <a href="#url">Payment Methods</a> <a href="#url">Conditions of Sale</a> <a href="#url">Privacy Policy</a> </dd> </dl> </div> </div> <br />Das Ding dürfte aber dennoch nur mit Vorsicht zu geniessen sein, irgendwie muss man da sehr aufpassen was man tut, auch wenn man Kleinigkeiten ändert.
Na wie auch immer Herzlichen Dank!Gruß Roland
-
-
-
-
-
-