nicht angemeldet
Aussehen überschreiben
Hi!
mein Problem ist, dass ich ich den Link mit id="aktiv" immer unterstrichen haben möchte, aber den enthaltenen span nicht.
Eine Variante davon ist der zweite Link, der zwar bei hover unterstrichen werden soll, der span aber nicht.
Untenstehender Code tut das leider nicht. Die grelle Rot- bzw. Grünfärbung dienen nur der Illustration dass die Anweisung tatsächlich das erhoffte Element anspricht.
<html>
<head>
<style type="text/css">
a:link {color:#000099; text-decoration:none;}
a:hover {text-decoration:underline;}
#menu a span {display:block; color: #333333;}
/* malt Linktext grau und einen Strich drunter */
#menu #aktiv{color: #333333; text-decoration:underline;}
/* färbt zwar den span-Text im Link ein, aber entfernt den Strich nicht */
#menu #aktiv span {color: #FF0000; text-decoration:none;}
/* färbt zwar den span-Text im Link bei hover ein, aber entfernt den Strich nicht */
#menu a:hover span {text-decoration:none; color: #00FF00;}
</style>
</head>
<body>
<div id="menu">
<a href="eins.html" id="aktiv">eins<span>blablubb</span></a>
<a href="zwei.html">zwei<span>Rhabarber</span></a>
</div>
</body>
</html>
Wie muß das CSS aussehen, damit passiert was ich will?
Tschüss
Andrea
-
Hallo Andrea!
Warum so kompliziert? Gib doch für die Links einfach Klassen vor, dann hast du es wahrscheinlich etwas übersichtlicher und es funktioniert auch einwandfrei.
a.aktiv:link {color:#000099; text-decoration:none;}
a.aktiv:hover {text-decoration:underline;}// und dann im Body
<body>
<div id="menu">
<a href="eins.html" class="aktiv">eins<span>blablubb</span></a>
<a href="zwei.html">zwei<span>Rhabarber</span></a>
</div>
</body>
</html>Hoffe ich konnte dir helfen
Gruß Patrick
-
Hallo,
Warum so kompliziert? Gib doch für die Links einfach Klassen vor, dann hast du es wahrscheinlich etwas übersichtlicher und es funktioniert auch einwandfrei.
Das Defaultaussehen soll ja durchaus noch wie in :link und :hover angegeben sein, d.h. für alle Links ausser aktiv gelten.
Und außerdem ist ja das Auszeichnen des Linktextes an sich kein Problem. Das Problem ist das Nicht-Unterstreichen des span-Textes im Linktext, bzw. das wieder auf ununterstrichen zurückwandeln dieses Teils.a.aktiv:link {color:#000099; text-decoration:none;}
a.aktiv:hover {text-decoration:underline;}// und dann im Body
<div id="menu">
<a href="eins.html" class="aktiv">eins<span>blablubb</span></a>
<a href="zwei.html">zwei<span>Rhabarber</span></a>Mir wäre auch eine Anweisung recht, die z.B. den <span>blablubb</span> erst gar nicht beeinflußt, sondern nur "eins".
Tschüss
Andrea
-
-
hi,
mein Problem ist, dass ich ich den Link mit id="aktiv" immer unterstrichen haben möchte, aber den enthaltenen span nicht.
das geht m.E. gar nicht.
auch wenn der span-inhalt nicht unterstrichen ist, befindet er sich trotzdem noch im kontext des links, der _komplett_ unterstrichen wird.gruss,
wahsaga-
'n Abend,
mein Problem ist, dass ich ich den Link mit id="aktiv" immer unterstrichen haben möchte, aber den enthaltenen span nicht.
das geht m.E. gar nicht.
auch wenn der span-inhalt nicht unterstrichen ist, befindet er sich trotzdem noch im kontext des links, der _komplett_ unterstrichen wird.Wenn man einen Teil eines Elements überhaupt nicht getrennt beeinflussen könnte, dann würde ich das noch verstehen. Aber hier habe ich Macht über die Schriftfarbe, jedoch nicht über die Unterstreichung. Das leuchtet mir nicht ein.
Tschüss
Andrea-
hi,
auch wenn der span-inhalt nicht unterstrichen ist, befindet er sich trotzdem noch im kontext des links, der _komplett_ unterstrichen wird.
Wenn man einen Teil eines Elements überhaupt nicht getrennt beeinflussen könnte, dann würde ich das noch verstehen. Aber hier habe ich Macht über die Schriftfarbe, jedoch nicht über die Unterstreichung. Das leuchtet mir nicht ein.
ich wage aber zu behaupten, dass es trotzdem so ist.
a { text-decoration:underline; }
unterstreicht den _kompletten_ link.a span { text-decoration:none; }
sorgt jetzt dafür, dass der span innerhalb des links _keine_ unterstreichung haben soll. die hat er dann auch nicht - das verhindert aber nicht, dass die unterstreichung, die "vom link kommt", hier trotzdem "durchscheint".stell's dir mal so vor:
du hast eine transparente glasscheibe (a), auf der ein strich aufgemalt ist.
vor diese stellst du jetzt eine zweite transparente glasscheibe (span), die _definitiv_ keinen solchen strich hat - trotzdem siehst du immer noch den strich von der dahinter liegenden scheibe, oder?aber vielleicht versuchst du ja mal, genau anders herum vorzugehen:
der teil, der unterstrichen werden soll, wird in <span> eingefasst, und der _normale_ linktext ausserhalb des spans wird nicht unterstrichen ...
gruss,
wahsaga-
Hallo wahsaga
[...]
stell's dir mal so vor:
du hast eine transparente glasscheibe (a), auf der ein strich aufgemalt ist.
vor diese stellst du jetzt eine zweite transparente glasscheibe (span), die _definitiv_ keinen solchen strich hat - trotzdem siehst du immer noch den strich von der dahinter liegenden scheibe, oder?Ja, das ergibt Sinn. Ist zwar weiterhin nicht schön, aber wenigstens eine Erklärung.
aber vielleicht versuchst du ja mal, genau anders herum vorzugehen:
der teil, der unterstrichen werden soll, wird in <span> eingefasst, und der _normale_ linktext ausserhalb des spans wird nicht unterstrichen ...
Ich darf das HTML leider nicht ändern da andere Styles darauf basieren, sonst hätte ich den span-Text schon längst aus dem <a></a> herausgenommen.
Andrea
-
Hallo.
Ich darf das HTML leider nicht ändern da andere Styles darauf basieren, sonst hätte ich den span-Text schon längst aus dem <a></a> herausgenommen.
Dann schalte doch die Unterstreichung vollständig ab und definiere "border-bottom" jeweils unterschiedlich.
MfG, at
-
-
-
-