Probleme mit CSS

[Ascension]

Hallo zusammen,

versuche grade mir ein eigenes Template zu erstellen.
Vorab, ich benutze das Template "bulletproof" und ändere dieses auf meine Befürfnisse ab.
Folgendes Problem stellt sich mir in den Weg:

#1. Ich möchte in CSS für diverse Bereiche, unterschiedliche Hover-Farben haben.
z.B. Die Texte auf der Menüleiste sollen beim Hovern weiß sein und die Links im Content sollen z.B. beim Hover-Text schwarz sein.

Wenn ich jetzt in meiner style.css schreibe:

a:hover {
color: #FFFFFF;
}

..dann ist der Text beim Hovern für alle Elemente weiß.

Wie kann ich denn unterschiedliche Hover-Farben erstellen und wie binde ich diese dann ein?

Hier der Link zu der Seite, um es etwas plausibler zu machen:
http://www.manager-marketing.biz/marketing-blog

Mfg Daniel

[yellowled]

Wenn ich jetzt in meiner style.css

Vorweg: Du solltest nicht direkt in der style.css von Bulletproof arbeiten. Diese wird bei einem s9y-Update überschrieben, Deine Änderungen sind dann weg.

Lege entweder ein eigenes Colorset an oder verwende die user.css für eigene Ergänzungen. Welche Methode empfehlenswert ist, richtet sich nach dem Ausmaß Deiner Anpassungen -- für wenige Änderungen ist user.css empfehlenswert, bei größeren Anpassungen ist ein eigenes Colorset besser geeignet. Beides ist updatesicher.

http://s9y-bulletproof.com/archives/19- ... rsets.html

schreibe:

Code: Select all

a:hover { color: #FFFFFF; }

..dann ist der Text beim Hovern für alle Elemente weiß.

Natürlich. Nichts anderes sagt dieser Selektor: "Setze die Farbe für alle gehoverten Links auf weiß."

Wie kann ich denn unterschiedliche Hover-Farben erstellen und wie binde ich diese dann ein?

Indem Du genauere Selektoren verwendest. Die unterschiedlichen Bereiche haben normalerweise entweder eine id oder eine class. Darüber kannst Du z.B. sowas hier machen:

Code: Select all

a:hover { color: #fff; } /* Globale Farbe für gehoverte Links */

#sitenav a:hover { color: #f00; } /* Links in der Navigation sind rot beim hovern */

.serendipity_entry a:hover { color: #0f0; } /* In allen Eintragstexten sind sie grün */

blockquote a:hover { color: #00f; } /* Links, die in einem blockquote stehen, sind blau */

Die Möglichkeiten sind quasi unbegrenzt. Siehe z.B. http://de.selfhtml.org/css/formate/zentrale.htm.

YL