Dropdown mit HTML und CSS - Problem
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
blocken
browser
code
display
element
fehler
http
image
nummer
position
problem
relative text
schau
spielplatz
system
tabelle
text
unterschied
url
wissen
-
Hi
ich habe ein Dropdown mit HTML und CSS anhand eines fertigen Codes erstellt.
Bis jetzt hat alles glänznd funktioniert, aber ich habe nun ein Problem, da ich ein Submenü erstellen will. Daher sobald man auf einen der Dropdown-Einträge geht, soll sich innerhalb des ersten Dropdowns ein weiteres Menü ausklappen.
Aktuelles CSS:
.clear { clear:both; } #navi, #navi ul { list-style-type:none; margin:0; padding:0; padding-top:3px;} #navi li ul { display:none; } /* Normalzustand eingeklappt */ #navi li:hover ul { display:block; } /* Ausgeklappt */ /*###################*/ /* Styles fuers Auge */ /*###################*/ #navcontainer { /*height:16px;*/ /*position:relative;text-align:center;width:100%;*/} #navi { position:relative;text-align:center;width:100%; } #navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; } #navi_div { width:130px; margin-left:20%; margin-right:0%; /*width:120px;*/ margin-top:5px; /* WICHTIG!!!! ABSTAND DES LINKS ZUMDROPDOWNMENU!!!! */ text-align:left; /*background-image:url("dropdown_back.png");*/ background-color:#cccccc; } #navi_td {border-bottom:1px solid #999999;padding:5px;font-size:12px;} #navi_td:hover {background-color:white;} #bar { background-image: url("bar_back.png"); background-repeat:no-repeat; height:35px;/*35 26*/ margin-left:250px; font-family:arial; font-size:13px; width:700px; } #bar_table { height:35px; background-image: url("bar_back.png"); background-repeat:repeat-x; } #bar_td { width:20%; font-family:arial; font-size:13px; margin:0px; text-align:center; } #bar_td:hover {background-image:url("bar_a_back_hover.png");background-repeat:no-repeat;background-position:top center;} #bar_top_a {color:black;text-decoration:none;/*width:80%;*/padding-top:3px;padding-bottom:3px;font-weight:normal;} #bar_top_a:hover {color:black} #bar_top_a_header {color:black;text-decoration:none;/*width:80%;*/padding-top:3px;padding-bottom:3px;font-weight:normal;} #bar_top_a_header:hover {color:black}
Danach kommt das HTML-Coding:
<div id="bar"> <table border="0" style="width:100%;height:100%;text-align:center" cellspacing="0" id="bar_table" align="top"> <tr> <td id="bar_td" valign="top"> <div style="padding-top:5px;"> <ul id="navi"> <li><a href="" id="bar_top_a"><div style="font-weight:normal;">Zubehör</div></a> <ul id="navi_ul"> <center> <div id="navi_div"> <table border="0" style="width:100%;border:1px solid #999999;border-bottom:0px;" cellspacing="0"> <tr><td id="navi_td"><a href="" id="bar_top_a" style="padding:0px;text-align:left;font-weight:normal;"><div>Kabel und Adapter</div></a></td></tr> <tr><td id="navi_td"><a href="" id="bar_top_a" style="padding:0px;text-align:left;font-weight:normal;"><div>Festplatten (extern)</div></a></td></tr> <tr><td id="navi_td"><a href="" id="bar_top_a" style="padding:0px;text-align:left;font-weight:normal;"><div>Festplatten (intern)</div></a></td></tr> <tr><td id="navi_td"><a href="" id="bar_top_a" style="padding:0px;text-align:left;font-weight:normal;"><div> </a> </div> </td> </tr> </table> </div> <!-- HIER DAS ZWEITE DROPDOWN !!! ################################# --> <ul id="navi"> <li><a href="" id="bar_top_a">USB Sticks 2GB</a> <ul id="navi_ul"> <div id="navi_div"> AA<br /> AA </div> </li> </ul> </ul> </div></a></td></tr> </table> </div> </center> </li> </ul> </a> </div> </td>
(Evtl. ein bisschen unübersichtlich, sorry)
Jedenfalls ist in dem ersten Dropdoen kein zweites, der Inhalt des zweiten wird stattdessen auch ohne Hover angezeigt.
Findet jemand nen Fehler oder Umgehungsmöglichkeit?
THX -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mir ist noch nicht ganz klar wasDu willst.
Soll AA/usb-stick innerhalb des ersten dropdowns sein oder ein eigenständiges menue ?
Fehler Nummer 1 ist auf jeden Fall das Du id's mehrmals im html-code hast, das solltest Du als erstes beheben(!!)
Guck mal hier was für ein Menue Du haben willst:
http://www.cssplay.co.uk/menus/
Weißt Du was der Unterschied zwischen id und class ist? Wie schätzt Du selber Dein wissen in html/css ein? -
simuliertes schrieb:
Mir ist noch nicht ganz klar wasDu willst.
Soll AA/usb-stick innerhalb des ersten dropdowns sein oder ein eigenständiges menue ?
Fehler Nummer 1 ist auf jeden Fall das Du id's mehrmals im html-code hast, das solltest Du als erstes beheben(!!)
Guck mal hier was für ein Menue Du haben willst:
http://www.cssplay.co.uk/menus/
Weißt Du was der Unterschied zwischen id und class ist? Wie schätzt Du selber Dein wissen in html/css ein?
1. Wie ich bereits betont habe soll der zweite Dropdown innerhalb, ich betone wirklich innerhalb des ersten sein.
Um das etwas zu verdeutlichen habe ich mal ein Screenshot gemacht:
http://squid.lima-city.de/dropdown.png
So wie es dargestellt ist sollte es eigentlich sein, das rot umkreiste ist in diesem Fall der Dropdown, da Problem ist aber wie bereist erwähnt, dass es bereits vor dem Hover angezeigt wird.
2. Meinst du damit, dass die IDs des ersten Dropdowns dieselben sind wie die des zweiten?
3. Ich glaube kaum, dass dies so schwer ist, zu erkennen, dass bei ID es sich um eine genaue Identifikation handelt, während bei class eine allgemeine Klassifizierung gedeutet wird. Darf ich fragen, ob dies irgendeinen Belang hat?
Danke für die schnelle Antwort ;)
squid -
Hi!
Also ich denke, worauf simuliertes hinaus will ist, dass der Code nicht grade die feine Art ist und du bei der Tabelle der ersten Navebene allen td-s eine ID "navi_td" vergeben hast. Das ist ein No-Go! Eine ID darf nur 1x auf einer Seite vorkommen. Ansonsten gibts Komplilationen. Nutze für solche Fälle, wo du alle Elemente gleich stylen willst, Klassen und nur bei Elementen, von denen du weißt, dass sie NIE mehrmals auftauchen, eine ID.
Außerdem öffnest du eine Liste, schließt sie nicht und packst direkt dort eine Tabelle rein. Listen (ul) werden mit Listenpunkten (li) gefüllt und DORT könntest du eine Tabelle einstellen - was in diesem Fall aber keinen Sinn ergeben würde...
Grüße
things
Edit: Ne, sorry. Hab grad versucht, dir zu helfen, aber bei dem Code blick ich echt nicht durch, was du da bewerkstelligen willst! Der ist total kaputt. Da fehlen Unmengen an schließenden Tags und die Verschachtelung ist auch nicht gut! Hast du ein Online-Beispiel, damit man da vielleicht besser - und den kompleten Code - schauen kann?
Beitrag zuletzt geändert: 30.5.2011 1:31:22 von things -
Nun ja die Tabellen könnten cross-browser-gründe haben.
Wie things bereits sagte sind doppelte id's absolute no-go's, weshalb ich erst einmal abklären wollte wie tief Dein wissen in html/css ist , wie genau ich also erklären sollte..
Also schau Dir mal das hier an:
http://simuliertes.lima-city.de/spielplatz/papierkorb/multilinehorizontalmenue.html
Demos->Hover/Klick zeigt Dir das dieses Menue auf 2 ebenen funktioniert.
Vielleicht versuchst Du mal dieses System zu verstehen.
Dadurch das dieses System cross-browser-fähig ist, ist es (in dem Link) ein bisschen komplizierter.
Grundsätzlich ist ein menue (mit ungeordneten listen) so aufgebaut
<div id="menue"> <ul> <li> <a>erste ebene</a> <ul> <li> <a>zweite ebene</a> </li> </ul> </li> </ul> </div>
Um zB die zweite ebene zu verbergen kann ich in css folgendermassen darauf "zugreifen":
#menue ul li ul {display: none;}
Wenn ich also die zweite ebene beim überfahren von der ersten sehen will kan ich das so machen
#menue ul li:hover ul{display: block;}
edit
Code getestet und korrigiert, so funktioniert er auch....
edit2:
Schau Dir mal das hier an:
http://simuliertes.lima-city.de/spielplatz/papierkorb/simples_zwei_ebenen_dropdown_css.html
Das ist ein simples Beispiel , FUNKTIONIERT ABER N NICHT IN ALLEN BROWSERN!
Beitrag zuletzt geändert: 30.5.2011 2:34:10 von simuliertes -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
