CSS Menü mit Pseudoklasse :hover
0 0 0
0 
Patrick Andrieu
CSS Menü mit Pseudoklasse :hover
Hallo zusammen,
Habe mir mit extremen Aufwand (bin Anfänger) ein CSS-Menü "zusammengebastelt", welches auch soweit alles macht, was ich will! Nur habe ich ein Problem! Ich habe der Klasse "tabHeader" die Pseudoklasse :hover zugewiesen! Soweit, so gut! Jetzt ist mir aber beim testen aufgefallen (eigentlich auch logisch), dass sich diese Eigenschaft nun auch auf die Klasse "current" (der Zustand eines ausgewählten Menüpunktes) bezieht! Wie schaffe ich es nun, dass die Klasse "current" NICHT von dem :hover Element beeiflusst wird? Hier der Code:
div.tabHeader {
width: 100%;
background: #a7966a;
float: left;
}
div.tabHeader ul {
font-size: 10px;
margin: 1px 0 0 0;
padding: 1px 0 0 3px;
line-height: 120%;
}
div.tabHeader ul.myNav {
float: right;
padding: 1px 3px 0 3px;
}
div.tabHeader ul li {
display: inline;
}
div.tabHeader ul li a {
float:left;
color: #fff;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}
div.tabHeader ul li a span {
display: block;
padding: 2px 12px 5px 12px;
}
div.tabHeader ul li a:hover {
color: #fff;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
}
div.tabHeader li.current a {
color: #a7966a;
background: url(pics/nav_l.gif) no-repeat 0 0;
}
div.tabHeader li.current a span {
background: url(pics/nav_r.gif) no-repeat 100% 0;
padding: 2px 22px 5px 22px;
}
Würde mich freuen, wenn sich jemand meiner annehmen könnte!
Vielen lieben Dank,
Liebe Grüße
-
Habe mir mit extremen Aufwand (bin Anfänger) ein CSS-Menü "zusammengebastelt", welches auch soweit alles macht, was ich will! Nur habe ich ein Problem! Ich habe der Klasse "tabHeader" die Pseudoklasse :hover zugewiesen! Soweit, so gut! Jetzt ist mir aber beim testen aufgefallen (eigentlich auch logisch), dass sich diese Eigenschaft nun auch auf die Klasse "current" (der Zustand eines ausgewählten Menüpunktes) bezieht! Wie schaffe ich es nun, dass die Klasse "current" NICHT von dem :hover Element beeiflusst wird? Hier der Code:
Indem du im Element der Klasse "current" (also der url zur gegenwärtigen geladenen Seite) kein <a> Element notierst.
mfg Beat
-
Hallo,
Vielen lieben Dank für die Antwort, aber ich stehe irgendwie grad voll auf dem Schlauch! Meinst du das <a> Element im CSS oder in der HTML Ausführung? Hab grad ein wenig rumgetestet, aber schaffe es nicht.
Hier der html-Code, mit dem ich das Menü ansteuere:
<div class="tabHeader"> <ul> <li class="current" > <a href="/web/test1.html"><span>abcdefg</span></a> <li> <a href="/web/test2.html"><span>hijklmn</span></a> <li> <a href="/web/test3.html"><span>opqrst</span></a> <li> <a href="/web/test4.html"><span>uvwxyz</span></a> </ul> </div>Könntest du mir deinen Vorschlag evtl. als Code (bzw. Ergänzung zu meinem) notieren? Wäre seeeeeeehr dankbar darüber,
Schöne Grüße, Bibi
-
<div class="tabHeader">
<ul>
<li class="current" >
<a href="/web/test1.html"><span>abcdefg</span></a>
<li>
<a href="/web/test2.html"><span>hijklmn</span></a>
<li>
<a href="/web/test3.html"><span>opqrst</span></a>
<li>
<a href="/web/test4.html"><span>uvwxyz</span></a>
</ul>
</div>> > Könntest du mir deinen Vorschlag evtl. als Code (bzw. Ergänzung zu meinem) notieren? <li class="current" > <span>abcdefg</span></li> Du solltest dir angewöhnen, die Endtags für das <li> Element zu notieren. > Wäre seeeeeeehr dankbar darüber, Unverbindliche Sprüche sollte mit 'e' haushälterischer umgehen. mfg Beat -- Woran ich arbeite: [X-Torah](http://www.elcappuccino.ch/cgi/tok.pl?extern=1-pub-com3306-1) <°)))o>< ><o(((°>o-
Danke für die Antwort,
<li class="current" > <span>abcdefg</span></li>
So hatte ich das nach deinem ersten Vorschlag auch versucht umzusetzen, jedoch "zerstört" dies die ganze Formatierung der Klasse "current" und auch die Hintergrundbilder werden nicht mehr angezeigt!
Bin mit diesem Menü wohl etwas über meine Fähigkeiten hinausgestoßen...Gruß, Bibi
-
Bekomm ich noch einen Tip? Bitte? Weiß ja, dass das Problem 99 Prozent aller hier im Forum wohl Anwesenden unterfordert! Trotzdem, bitte noch einen Hinweis?
Vielen Dank
-
Bekomm ich noch einen Tip? Bitte? Weiß ja, dass das Problem 99 Prozent aller hier im Forum wohl Anwesenden unterfordert! Trotzdem, bitte noch einen Hinweis?
Na dann ersetze daa <a> Element durch ein anderes Element und gib im die CSS Formatierung deines <a> Elements.
mfg Beat
-
Na dann ersetze daa <a> Element durch ein anderes Element und gib im die CSS Formatierung deines <a> Elements.
Oh je! Blick da gerade gar nicht mehr durch! Muss da wohl doch noch einiges lernen...Kannst du mir das anhand meines Codes mal vorführen? Wär echt super nett!
Danke
-
Na dann ersetze daa <a> Element durch ein anderes Element und gib im die CSS Formatierung deines <a> Elements.
Oh je! Blick da gerade gar nicht mehr durch! Muss da wohl doch noch einiges lernen...Kannst du mir das anhand meines Codes mal vorführen? Wär echt super nett!Hier gehts zur Anleitung zum Self-Windelwechseln.
mfg Beat
-
Hier gehts zur Anleitung zum Self-Windelwechseln.
Danke der Ironie! Als Anfänger muss man wohl doch andere Foren kontaktieren, als dieses hier! Schade...
-
Hier gehts zur Anleitung zum Self-Windelwechseln.
Danke der Ironie! Als Anfänger muss man wohl doch andere Foren kontaktieren, als dieses hier! Schade...Durchaus, bis man zur Erkenntnis gelangt, dass an der Lekture einer Dokumentation kein Weg vorbei führt. Mit viel geld kann man sich diese Erkenntnis ersparen.
mfg Beat
-
Durchaus, bis man zur Erkenntnis gelangt, dass an der Lekture einer Dokumentation kein Weg vorbei führt. Mit viel geld kann man sich diese Erkenntnis ersparen.
An diesen Kommentaren erkennt man dein Hobby (sh. aktuelles Projekt)! Aber auch du warst einmal Anfänger und hattest sicherlich Probleme, die du nicht mit Büchern und sonstiger Lektüre lösen konntest! Ich glaube auch nicht, dass man erst HTML und CSS-Profi werden muss, um eine eigene Website gestalten zu dürfen/können! Dies ist meine allererste Frage hier und meine Website ist schon fast fertig!
Wozu ist so ein Forum sonst da, wenn nicht für Fragen? Tut mir ja leid, wenn es dich unterfordert....
Und ganz nebenbei: deine Internetseite läuft bei mir (IE7) im Quirksmode, falls dir das was sagt! Tolle Leistung! Auch der W3C-Validator spuckt Fehler aus! jaja.....
-
-
-
-
-
Hi,
wieso sollte man das <a>-Element entfernen? Dann ist der Listeneintrag ja kein Link mehr und das ist vielleicht gar nicht erwünscht?
Na dann ersetze daa <a> Element durch ein anderes Element und gib im die CSS Formatierung deines <a> Elements.
Das klingt nun ganz und gar nach Frickelkram. Dort soll ein Link sein, nicht irgendein HTML-Element (welches würdest Du denn nehemn wollen?) -> semantisches Markup.
Vielleicht hat sie Dich auch deshalb nicht so richtig verstanden. Deinen "Windelwechsel"-Spruch finde ich da ziemlich fehl am Platz.@Bibi: Du könntest dem Link innerhalb des "current"-Listenelementes ja eine eigene Formatierung für :hover verpassen:
div.tabHeader ul li.current a:hover { text-decoration: none; ... }LG
-
wieso sollte man das <a>-Element entfernen? Dann ist der Listeneintrag ja kein Link mehr und das ist vielleicht gar nicht erwünscht?
Na dann ersetze daa <a> Element durch ein anderes Element und gib im die CSS Formatierung deines <a> Elements.
Das klingt nun ganz und gar nach Frickelkram. Dort soll ein Link sein, nicht irgendein HTML-Element (welches würdest Du denn nehemn wollen?) -> semantisches Markup.
Wenn der Menupunkt current die gegenwärtige Seite bezeichnet, warum dann ein Link?
Wenn es aber zu komplex wird, durch einfaches entfernen des <a> wieder eine konsistente Formatierung zu erhalten, weil man Hintergundgrafiken und anderes verwendet, dann nehme man ein anderes Element, in diesem Fall ein schlichtes <span>. Weil aber schon ein <span> vorliegt, muss man halt den Gesamtcode im Auge behalten, welche ich derzeit nicht beurteilen will. Zur Not ginge auch ein <b>.mfg Beat
--
/|
<°)))o>< / | /|
---- _|___/ | ><o(((°>
OvVVvO __ | ><o(((°>
<°)))o>< /v v\/ |
<°)))o>< ^ ^/_/_ ><o(((°>
^^^^/___/
><o(((°> ---- ><o(((°>
<°)))o>< ><o(((°>o
-
-
-
-
-
-
-
-
Hallo Bibi!
div.tabHeader li.current a {
div.tabHeader li.current a span {Sind die Listenelemente mit der class="current" direkte Nachfahren der DIV-Elemente mit der class="tabHeader"? Steht im HTML-Code:
<div class="tabHeader"><li>...? ;)
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt?
All'alba vincerò!