✔ Hover-funktion im Menu

Status
Nicht offen für weitere Antworten.
C

CiTor

Mitglied
Hallo zusammen,
ich probiere nun schon eine ganze Weile, um mein Menü endlich auf die Reihe zu kriegen. Irgendwie ist mir nach meinem Code-Marathon die Klassen- und <li>-Tag-Verschachtelung etwas zu komplex. Nun zur Sache:

im HTML-File habe ich folgende Zeile:
HTML: 
<a href="http://www.abc.ch/link/" class="sublevel" ><ul><li>Leistungen</li></ul></a>
Das Wort Leistungen soll also als Link im Menu mit einem Bullet fungieren.

Die hover-funktion habe ich dann auch hinbekommen. Diese wird dann jedoch nicht wieder rückgängig gemacht, bzw das Bullet verschwindet nicht mehr.
Code: 
/* CSS Document */
.sublevel li {
	list-style: none;
}
a.sublevel li:hover {
	color: #7D7875;
 	text-decoration: none;
 	list-style-image: url(http://www.abc.ch/klammer.gif);
 	list-style-position: outside;
}
a.sublevel li:link {
 	list-style: none;
}
a.sublevel li:visited {
}

Ich wäre sehr froh, wenn mir jemand auf die Schliche helfen könnte, wie ich die css-Datei modifizieren muss, damit das Menu endlich richtig funktioniert.

Danke und Gruss
CiTor

//edit: in Firefox und Opera scheint es so zu funktionieren, habe ich gerade festgestellt. Nur in Safari und IE scheint das Menu nicht richtig zu funktionieren.
 
Zuletzt bearbeitet:
Inline-Elemente dürfen keine Block-Level-Elemente enthalten. Daher ist allein schon das Markup falsch.
 
ähm, was soll das denn bitte? Ich habe mich eigentlich hier gemeldet um eine Lösung zu meinem Problem zu finden! Leider setze ich mich nicht seit Ewigkeiten und täglich mit der Online-Entwicklung auseinander - da können Fehler wohl wirklich passieren. Wenn du schon so herablassend Antwort geben kannst, wäre ich froh um eine Lösung des Problems - schliesslich heissts oben im Untertitel dieser Community "User helfen Usern". Wenn ich eine Möglichkeit hätte, das Problem auf eine andere Weise zu lösen, dann hätte ich mich sicherlich nicht hier gemeldet.
 
Ich weiß jetzt nicht die Lösung, aber vielleicht ist gerade der oben genannte Post das Problem für den Internet Explorer..

Gehts denn ohne dein ul li ?
 
Du empfindest meine Antwort als herablassend? Was ist dir denn über die Leber gelaufen? Ich wollte dich lediglich darauf hinweisen, dass das ul-Element in einem a-Element nichts zu suchen hat, da ersteren ein Block-Level-Element und letzteres ein Inline-Element ist und Inline-Elemente keine Block-Level-Elemente enthalten dürfen. Falls du dies nicht verstanden hast, hätte eine einfache Frage nach einer Erläuterung genügt.

Mein Vorschlag:
HTML: 
<ul id="foobar">
	<li><a href="http://www.abc.ch/link/">Leistungen</a></li>
</ul>
Code: 
/* CSS Document */
ul#foobar {
	list-style: none;
}
ul#foobar a:link {
}
ul#foobar a:visited {
}
ul#foobar a:hover {
	color: #7D7875;
 	text-decoration: none;
 	list-style-image: url(http://www.abc.ch/klammer.gif);
 	list-style-position: outside;
}
 
Hi Gumbo!
Tut mir leid, wie ich deine Nachricht bewertet habe! Ich habe deine Antwort im Wortlaut wohl komplett missverstanden. Ich war Gestern wirklich total am Ende - das soll meine unbegründete Anschuldigung aber nicht rechtfertigen. Nochmals: tut mir echt leid, soll nicht wieder vorkommen!!

Ich habe dein Code-Schnipsel nun auf meine Website angewendet, es funktioniert aber trotzdem nicht. Alle Angaben, die ich in der Hover-Pseudoklasse definiert habe werden beim Hovern übernommen, bis auf das Bullet. Das ganze funktioniert auch nicht, wenn ich genau deinen Code in eine HTML-Datei schreibe und im Browser ausführe:
HTML: 
<html>
<head>
<title>Menü</title>
<style type="text/css">
/* CSS Document */
ul#foobar {
	list-style: none;
}
ul#foobar a:link {
}
ul#foobar a:visited {
}
ul#foobar a:hover {
	color: #7D7875;
 	text-decoration: none;
 	list-style-image: url("http://www.tutorials.de/forum/images/icons/icon1.gif");
 	list-style-position: outside;
}
</style>

</head>

<body>
<ul id="foobar">  <li><a href="http://www.abc.ch/link">Leistungen</a></li> </ul>

</body>
</html>

wäre toll, wenn du mir vielleicht noch einen Tipp geben könntest!

Gruss CiTor
 
Das Problem ist, dass die list-style-Eigenschaft nur auf das ul- und li-Element angewandt werden kann. Daher wäre wenn überhaupt nur folgendes möglich:
Code: 
ul#foobar li:hover {
 	list-style-image: url("http://www.tutorials.de/forum/images/icons/icon1.gif");
 	list-style-position: outside;
}
Eine andere Möglichkeit wäre, die Grafik als Hintergrundgrafik einzusetzen.
 
ok, dann gehts wohl mit der Bullet-Version wirklich nicht :( Mit dem Background gehts aber eigentlich auch ganz gut.

Herzlichen Dank für die tolle und schnelle Hilfe!

Gruss CiTor
 
Hab gerade mal ne Frage aus dem Kontext so n bisschen raus an Gumbo, ist das mit den Inline-Elementen die keine Block-Elemente enthalten dürfen wirklich immer so?
Hab gerade mal drüber nachgedacht und mir fiel ein, dass es doch durchaus zulässig ist, einfach mal ein Span tag mit einem Bild zu versehen, oder nicht?
Also wo das der span tag halt ganz normal das Inline-Element darstellt und das Bild ist ja halt immer Block-Element! Ist das garnicht erlaubt?
 
Generell gibt es die zwei „Elementgruppen“, die Inline- und der Blockelemente. Laut Definition ist jedes im body-Element erlaubtes Element einer dieser „Gruppen“ zugeordnet und enthält eine Beschreibung, welche Elemente es enthalten darf. Diese Zuordnung entscheidet auch mitunter darüber, wie die Elemente dargestellt werden. So werden Blockelemente meist über die gesamte verfügbare Breite dargestellt und erzeugen einen Umbruch. Dieses Verhalten lässt sich jedoch nachträglich mit CSS verändern (etwa mithilfe der display-Eigenschaft).
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück