PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Kann ich mit CSS mehrere hovers, actives usw. für links definieren?


Gohan
2005-05-02, 11:50:04
Hi, ist es möglich mit CSS mehrere link eigenschaften anzulegen? Also verschiedenartige hovers, actives und visited.

Bis jetzt habe ich das immer nur einmalig gemacht, aber jetzt bräuchte ich zwei "verschiedene" linkarten.

darph
2005-05-02, 11:53:45
Klar.
<style type="text/CSS">
#header a:hover {}

#body a:hover {}
</style>

<div id="header"><a href=""></a></div>
<div id="body"><a href=""></a></div>


Damit werden alle Links innerhalb eines Elements mit (zum Bleistift) der ID "header" behandelt.

du könntest natürlich auch auch div.classname verwenden...

Gohan
2005-05-02, 11:56:50
Danke, ein Dummi hat wieder was gelernt :)

Gohan
2005-05-02, 16:58:53
Habe jetzt ein Problem:
http://www.seijin.de/designstudie2/index.php

Wenn man jetzt das erste mal die Maus über einen link fährt und klickt, funktioniert der hover Effekt. Danach bleibt der Link aber immer weiß... wieso? (Also er bleibt im visitid Status)

darph
2005-05-02, 17:03:18
Weil er den Focus noch hat... es passiert ja nyx.


Übrigens:
http://img56.echo.cx/img56/2929/seijin4kh.png

Gohan
2005-05-02, 18:24:13
Weil er den Focus noch hat... es passiert ja nyx.


Übrigens:
http://img56.echo.cx/img56/2929/seijin4kh.png

Welcher Browser? Unter Safari sieht es normal aus.

Und was meinst du mit Focus? :)

darph
2005-05-02, 19:02:59
Avant mit IE (ja... ;( )


Ich bin mir nicht sicher, ob ich das gleiche meine wie du mit den Links. Weil bei mir funktioniert alles. Und die Links sind von Anfang an weiß, wenn ich drauf klicke ändern sie die Farbe (der Focus), klick ich woanders hin werden sie wieder weiß.

darph
2005-05-02, 19:08:33
Darph ich dir noch einen kleinen Tip geben? :)
Du arbeitest mit ziemlich viel Redundanz.


#menu.a {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
}

#menu a:link, #menu a:visited {
color: #FFFFFF;
}

#menu a:hover, #menu a:active {
color: #333333;
}

So thät ich das machen. Verringert deine Menge an Code auf Dauer dramatisch und du mußt nicht alles im Falle eines Falles dreifach oder öfter ändern. :)

Gast
2005-05-02, 19:57:25
Wenn man jetzt das erste mal die Maus über einen link fährt und klickt, funktioniert der hover Effekt. Danach bleibt der Link aber immer weiß... wieso? (Also er bleibt im visitid Status)
Weil du das C in CSS nicht verstanden hast :)

Die komplette Kaskadierung und die Reihenfolge der Abarbeitung der Regeln zu beschreiben würde zu weit führen, das läßt sich sich auf vielen Hilfeseiten nachlesen. Darum nur am konkreten Fall:

Beim ersten Besuch schlagen die Regeln unter #menu a:link zu. Fährt man mit der Maus über den Link wird #menu a:hover ausgelöst und dessen Regeln überschreiben die unter #menu a:link, weil es die gleiche Gewichtung hat, aber später im CSS-Code erscheint.

Klickt man auf den Link kommt #menu a:active zum Zuge und überschreibt wiederrum die mit seinen Regeln die von #menu a:hover.

Nun ist der besuchte Link als "besucht" markiert. Fährt man nun mit der Maus drüber passiert nichts, weil zuerst die Regeln von #menu a:link angewandt werden, dann die von #menu a:hover und schließlich #menu a:visited. "hover" wird also von den "visited" Regeln überschrieben.


Die einzig korrekte Anordnung dieser vier Pseudoklassen ist link, visited, hover, active. Alles andere führt zu den von dir beobachteten Ergebnissen.

Gohan
2005-05-03, 03:16:15
Darph ich dir noch einen kleinen Tip geben? :)
Du arbeitest mit ziemlich viel Redundanz.


#menu.a {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
}

#menu a:link, #menu a:visited {
color: #FFFFFF;
}

#menu a:hover, #menu a:active {
color: #333333;
}

So thät ich das machen. Verringert deine Menge an Code auf Dauer dramatisch und du mußt nicht alles im Falle eines Falles dreifach oder öfter ändern. :)

Danke Danke vielmals :) Btw. im Impressum steht das ich vom IE abrate :D Aber mir ist völlig schleierhaft wie dieser Fehler passieren kann :|

Weil du das C in CSS nicht verstanden hast :)

Die komplette Kaskadierung und die Reihenfolge der Abarbeitung der Regeln zu beschreiben würde zu weit führen, das läßt sich sich auf vielen Hilfeseiten nachlesen. Darum nur am konkreten Fall:

Beim ersten Besuch schlagen die Regeln unter #menu a:link zu. Fährt man mit der Maus über den Link wird #menu a:hover ausgelöst und dessen Regeln überschreiben die unter #menu a:link, weil es die gleiche Gewichtung hat, aber später im CSS-Code erscheint.

Klickt man auf den Link kommt #menu a:active zum Zuge und überschreibt wiederrum die mit seinen Regeln die von #menu a:hover.

Nun ist der besuchte Link als "besucht" markiert. Fährt man nun mit der Maus drüber passiert nichts, weil zuerst die Regeln von #menu a:link angewandt werden, dann die von #menu a:hover und schließlich #menu a:visited. "hover" wird also von den "visited" Regeln überschrieben.


Die einzig korrekte Anordnung dieser vier Pseudoklassen ist link, visited, hover, active. Alles andere führt zu den von dir beobachteten Ergebnissen.

Ein Muster-Gast :) Danke für die großartige Erklärung! =)

darph
2005-05-03, 10:08:45
Gohan, wenn du schon CSS verwendest, warum benutzt du dann immer noch transitional HTML mit den kanzen vermurksten Auszeichnungen?


Kuckst du hier (http://www.darph.net/seijin/).

Valides XHTML und CSS2. Sieht gut aus in IE und mozilla (auch wenn mozillas Ausrichtungstaktik die Hölle ist. Wie man da von "besserem CSS" sprechen kann ist mir absolut ein Rätsel).

unter http://www.darph.net/seijin/seijin.zip kannstes dir mal mit den Bildern runter laden und genauer anschauen...

Gohan
2005-05-04, 08:34:15
Weil ich ein absoluter CSS und HTML Dummie bin :) Bin froh das meine Seiten überhaupt so aussehen :D Trotzdem, vielen vielen dank für die Arbeit!

Jedoch steige ich bei deinem Code hinten und vorne nicht durch... naja, alles was ich an html kann, habe ich bis jetzt durch gucken und nachmachen gelernt, schaffe ich mit deinem Beispiel vielleicht auch =)

Habe dafür aber ein weiteres Problem:
http://www.seijin.de/cgi-bin/guestbook/guestbook.pl

Im Menü ist der Text jetzt auf einem horizontal mittig ausgerichtet, anstatt top. Aber der Queltext ist haargenau der selbe! Wieso? ;( Ich html Niete kapier das nicht...

*edit*

So habe jetzt den css Code mal etwas aufgeräumt, etwas hier und da verändert und siehe da, es funktioniert :)

darph
2005-05-04, 11:33:13
Wenn du Fragen zum Code hast, kannst du mich jederzeit per ICQ oder PN anhauen.... :)