|
|||
Problem mit meiner liste
Hallo und Guten Abend,
ich kämpfe nun schon seit Stunden und finde einfach den Fehler nicht. Hoffentlich kann mir jemand helfen. Ich habe ein Menü erstellt,das Css sieht so aus: Code:
#menue{width: 210px;float:left;} #menue ul { margin: 0 ; padding: 0;font-size: 0.8em;list-style-type: none;line-height: 1.7em; font-family: Verdana, Arial, Helvetica, sans-serif;} #menue ul li { /* erste Ebene */ padding:0;display: block;} #menue ul li a {color: #333; padding:0.3em 0 0.3em 0.8em;display: block; text-decoration: none; border-bottom: 1px solid #fff;} #menue ul li.active ul li a, /* erste Ebene */ #menue ul li a:hover { color: #fff; font-weight: bold; background: none; border-bottom: 0px;} #menue ul li.active a, /* erste Ebene */ #menue ul li a:hover { color: #fff; font-weight: bold; background: #6883bc; border-bottom: 1px solid #fff;} #menue ul li ul li { /* zweite Ebene */ font-size:0.9em; line-height: 1.2em; padding: 0 0 0 2.3em; /* padding und font-weight der ersten Ebene aufheben */ color: #6883bc;font-weight: normal;} #menue ul li ul li a, /* zweite Ebene */ { color: #6883bc; border-bottom: 0px;} #menue ul li ul li.active a, /* zweite Ebene */ #menue ul li ul li a:hover { color: #6883bc; font-weight: bold; background: url(grafik/_hover2.gif) no-repeat 100% 100%; border-bottom: 0px;} Code:
<div id="menue"> <ul> <li class="active"><a href="#">Hauptpunkt Ebene 1</a> <ul> <li> <a href="#">punkt Ebene 2</a> </li> <li> <a href="#">punkt Ebene 2</a> </li> <li> <a href="#">punkt Ebene 2</a> </li> <li> <a href="#">punkt Ebene 2</a> </li> </ul> </li> <li><a href="#">Hauptpunkt Ebene 1</a></li> <li><a href="#">Hauptpunkt Ebene 1</a></li> </ul> </div> Wie bekomme ich denn ein border: 1px solid #fff;oberhalb des zweiten Hauptpunktes hin? Also an der Stelle, wo die zweiteEbene li aufhört? Und dann stimmt irgendwas mit der zweiten Ebene nicht. Die sollen die Farbe blau haben und erst beim hover weiß werden und eine grafik _hover2.gif bekommen. Ich hoffe sehr, das jemand mir helfen kann. Ich sehs einfach nicht mehr. Herzlichen Gruß Bea |
Sponsored Links |
|
||||
Hallo, Bea!
Stimmt denn der Pfad für die Grafik? Dateinamen dürfen, soweit ich mich recht erinnere, nicht mit einem Unterstrich beginnen!?
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
Sponsored Links |
|
||||
Gib ausser "a" auch mal den "Rest" der Palette an:
a:link, a:visited, a:hover
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
||||
Kleiner Tipp zwischendurch: :link kann man sich sparen, und :visited auch, falls es genauso aussieht wie unbesuchte Links. Es reicht eine allgemeine Regel für a, und dann braucht man nur noch die Pseudoklassen aufzuführen, bei denen sich auch etwas ändert (und muß dann natürlich auch nur die Änderungen deklarieren).
|
|
|||
Hallo und Guten Morgen ,
vielen vielen Dank für die Tipps. Ich hab da irgendwie den Wurm in meiner Navigation. Ich weiß gar nicht, warum ich mich so schwer damit tue?? Nun ist der Pfeil sichtbar, die Linie auch an der richtigen Stelle, fast Gibt es da noch einen Tipp, wie ich den Abstand zwischen Pfeil und Menüpunkt vergrößern kann?? Und dann möchte ich, das die zweite Ebene beim aktiven Zustand nicht unterstrichen wird, das krieg ich nicht hin. border:none ist doch wohl eigentlich der richtige Befehl?? Oder? Aber wohin damit? Ich bitte noch einmal um Eure Hilfe, das wäre echt nett. Und vielleicht noch eine Frage, der IE 6. mag diese Form des CSS so gar nicht. Da sind die Abstände riesig. Liegt das am line-heigt? Code:
#menue{width: 210px;float:left;} #menue ul { margin: 0 ; padding: 0;font-size: 0.8em;list-style-type: none;line-height: 1.7em; font-family: Verdana, Arial, Helvetica, sans-serif;} #menue ul li ul { /* zweite Ebene */ margin: 0; /* margin der ersten Ebene aufheben */ } #menue ul li { /* erste Ebene */ padding:0;display: block;} #menue ul li a {color: #333; padding:0.3em 0 0.3em 0.8em;display: block; text-decoration: none; border-bottom: 1px solid #fff;} #menue ul li.active { border-bottom: 1px solid #fff; } #menue ul li.active a, /* erste Ebene */ #menue ul li a:hover { color: #fff; font-weight: bold; background: #6883bc; border-bottom: 1px solid #fff;} #menue ul li.active ul li a /* erste Ebene */ { color: #6883bc; font-weight: bold; background: none; border-bottom: 0px;} #menue ul li ul li { /* zweite Ebene */ font-size:0.9em; line-height: 1.2em; padding: 0 0 0 2.0em; /* padding und font-weight der ersten Ebene aufheben */ color: #6883bc;font-weight: normal;} #menue ul li ul li a, /* zweite Ebene */ {color: #6883bc; border-bottom: 0px;} #menue ul li ul li.active a, /* zweite Ebene */ #menue ul li ul li a:hover { color: #6883bc; font-weight: bold; background: url(../../grafik/pfeil.gif) no-repeat 0% 50%; border-bottom: 0px;} #menue ul li.active ul li a:hover/* zweite Ebene */ { color: #fff; background: url(../../grafik/pfeil.gif) no-repeat 0% 50%; } Bea |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Stylen einer Liste | bla | CSS | 2 | 15.10.2010 16:28 |
Mitwachsender Content und Footer Problem | Bentham | CSS | 5 | 19.09.2010 12:49 |
Problem mit Margins bei Liste | Solander | CSS | 2 | 09.03.2007 14:44 |
Problem mit Liste im IE | labergangster | CSS | 5 | 05.01.2006 00:41 |
Formular (Liste) Problem mit IE,.. | otc | CSS | 2 | 17.03.2005 05:04 |