nicht angemeldet
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!