|
|||
Grafik des Hauptmenüpunktes bei Aktivierung eines Links des Untermenüs verschwunden
Hallo liebe CSS-Profis,
ich habe ein kleines Problem mit meiner verschachtelten Liste. Diese sieht wie folgt aus: Code:
<ul><li><a>Haupteintrag</a><ul><li><a>Unterpunkt 1</a></li><li><a>Unterpunkt 2</a></li></ul></li></ul> Ich kann mir das absolut nicht erklären. Ich denke mal, dass es an der verschachtelten Liste liegt. Ich habe versucht, die Liste mit dem Haupteintrag eine Klasse zu geben, leider erfolgslos. Hier ist der CSS-Code: Code:
#container #links UL UL {margin-top: 10px; padding: 0; margin: 10px 0 0 -7px; width: 178px; font-size: 1.2em;} #container #links UL UL LI {list-style: none; background: url(img/hg-button-menue2-inaktiv.png) no-repeat bottom; padding: 0; margin: 0; min-height: 17px; _height: 20px; line-height: 15px;} #container #links UL UL LI A {text-decoration: none; font-size: 0.7em; font-weight: bold; color: #094018; display: block; padding: 2px 0 1px 16px; min-height: 17px; letter-spacing: -0.04em;} #container #links UL UL LI A:HOVER, #container #links UL UL LI.aktiv A {background: url(img/hg-button-menue2-aktiv.png) no-repeat bottom; color: #1E6930;} #container #links UL UL LI.aktiv LI A {background: url(img/hg-button-menue2-cat1-inakt.png) no-repeat bottom; padding: 2px 0 2px 25px; color: #094018;} /* # # # # # # # # Unterkategorie 1 */ #container #links UL UL UL {padding: 0; margin: 0; width: auto;} #container #links UL UL UL LI {background: url(img/hg-button-menue2-cat1-inakt.png) no-repeat bottom #A3C02A;} #container #links UL UL UL LI A {font-size: 0.65em; padding: 2px 0 2px 25px;} #container #links UL UL UL LI A:hover, #container #links UL UL UL LI.aktiv A {background: url(img/hg-button-menue2-cat1-aktiv.png) no-repeat bottom;} #container #links UL UL UL LI.aktiv LI A {background: url(img/hg-button-menue2-cat2-inakt.png) no-repeat bottom; padding: 2px 0 2px 30px; color: #094018;} Ich bedanke mich sehr für eure Mühen. Beste Grüße Maik |
Sponsored Links |
Sponsored Links |
|
|||
Vielen Dank für deine Antwort heiko.
Hier ist der Link zu der Seite: los-crachos-headshop.de Wenn du dort beispielsweise Glasbongs unter der Rubrik Bong Shop anklickst und dann einen Unterpunkt auswählst, verschwindet einfach die Grafik von Glasbongs (Pfeil). Ich kann das nicht nachvollziehen. Beste Grüße Maik |
|
|||
Die Grafik ist schon da. Sie wird unten im li-Element positioniert. Bei geöffnetem Submenü ist das li-Element aber (zu) hoch wegen des Submenüs.
Im aktiven Zustand liegt die Grafik im Link. Der ist nicht so hoch.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
Vielen Dank für eure Antworten.
Zitat:
Wenn zum Beispiel auf Glasbongs geklickt wird, klappt ein Untermenü auf. Klickt man da ein Untermenüpunkt an, verschwindet der Pfeil vor "Glasbongs". Die Grafik habe ich nicht dem A-Element zugewiesen sondern dem LI-Element. Ich komme mit dieser Schachtelung einfach nicht klar. Sobald ein Untermenüpunkt angeklickt ist, verschwindet einfach die Grafik vom Hauptmenüpunkt, sehr eigenartig. Zitat:
Das habe ich dadurch behoben, dass ich nach dem URL-Befehl die Farbe des Hintergrundes gesetzt habe. Vielleicht habe ich erfolg, wenn ich den A-Elementen die Grafik zuweise. Ich melde mich wieder bei Euch. Besten Dank für eure Hinweise und Tipps. Beste Grüße Maik Geändert von makalus (02.11.2010 um 16:37 Uhr) |
|
||||
Die Nachteile Deiner bottom-Pos. siehst Du auch bei zweizeiligen Menüpunkten. Listensymbole am besten immer mit einem vert. Wert in em ausrichten, z.B. 0 .3em - dann wandern sie bei Textzoom langsam mit nach unten. Nur wenn ein Zeilenumbruch absolut ausgeschlossen ist, kann man auch 0 50% o.ä. schreiben (in Deinem Fall aber nicht).
In jedem Falle solltest Du das Listensymbol von der border trennen, d.h. nicht in beides in eine Grafik stecken (für border brauchst Du eh keine Grafik).
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
|
|||
Danke für die hilfreiche Antwort.
Ich arbeite im Rahmen meines Praktikums an dieser Seite und arbeite an dem Menü. Die Grafik mit dem Pfeil soll aber so bleiben. Nun weiß ich aber auch, dass die Zeile: Code:
background: url(img/hg-button-menue2-cat1-inakt.png) no-repeat bottom #A3C02A; Naja, dank euch bin ich jetzt auf jeden Fall schlauer und werde mal sehen, ob ich dieses Problem gelöst bekomme. Ich melde mich dann wieder bei euch, sobald ich Erfolg habe Beste Grüße und noch einmal vielen Dank für Eure Hilfe. Maik |
|
|||
Hallo Leute,
Ihr habt mir sehr weiter geholfen, dafür vielen Dank. Es funktioniert jetzt mit der Menüdarstellung. Ich habe die Grafik nicht den LI-Elementen zugewiesen sondern den A-Elementen. Ich hab den Wald vor lauter Bäumen nicht mehr gesehen somal der Webdeveloper für FF den Listeneintrag Glasbongs nicht größer dargestellt hat. @fricca: Das war der entscheidene Hinweis, danke. Ich muss noch viel lernen, was CSS betrifft. Vor allem die Erbung und die Schachtellung ... Beste Grüße und besten Dank an alle. Maik |
Stichwörter |
css, hintergrundgrafik, liste, verschachtelt |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Grafik links unten positionieren UND Text rechts umfließen | Worance | CSS | 3 | 02.06.2008 23:29 |
Zeilenüberlappung bei margin-top mit negativem Wert | c.weber.os | CSS | 15 | 15.10.2005 16:11 |
Probleme mit 3 spalten | luk | CSS | 3 | 08.06.2005 15:39 |
grafik links und rechts unten ohne zwischenraum einbinden ? | Kurt | CSS | 2 | 08.06.2004 16:04 |