CSS Eintrag wird von anderem CSS Eintrag beeinflusst

[Hummel]

Hi,

ich lasse alle normalen Links via CSS anders anzeigen. Dies mache ich so:

a:link {
color:#006699;
text-decoration:underline;
}
a:hover {
text-decoration:none;
color:#006699;
}

Nun möchte ich aber bestimmte Links als Button darstellen. Das mache ich so:

.button {
border-right:#770000 solid 2px;
border-bottom:#770000 solid 2px;
border-top:#EB6262 solid 1px;
border-left:#EB6262 solid 1px;
background: #CC0000;
padding-left:4px;
padding-right:4px;
color:#FFF;
text-decoration:none;
font-weight:bold;
}
.button:hover {
border-right:#CC0000 solid 2px;
border-bottom:#CC0000 solid 2px;
border-top:#EB6262 solid 1px;
border-left:#EB6262 solid 1px;
background: #CC0000;
padding-left:4px;
padding-right:4px;
color:#FFF;
text-decoration:underline;
font-weight:bold;
}

Den Button Link verwende ich so:

<a class="button" href="save.php">Speichern</a>

Der Link schaut aus wie ein Button, allerdings werden Elemente vom a CSS mit reingenommen und der Button schaut nicht so aus wie er soll. Bei Formularen wo kein a Tag zum Einsatz kommt, klappt es wunderbar.

Was kann ich tun, damit class="button" auch im a Tag nur das macht, was ich im Button style festlege?

Hummel

[Matthias Apsel]

Om nah hoo pez nyeetz, Hummel!

Was kann ich tun, damit class="button" auch im a Tag nur das macht, was ich im Button style festlege?

Nimm dir ein Entwicklerwerkzeug wie firebug und schau dir an, wo die CSS-Eigenschaften herkommen. Überschreibe sie dann mit einer Regel höherer Spezifität.

Matthias

[Gunnar Bittersmann]

@@Hummel:

nuqneH

ich lasse alle normalen Links via CSS anders anzeigen. Dies mache ich so:
a:link {…}
a:hover {…}

Nein, damit hast du nicht alle. Und ein Delphinbaby stirbt.

Nun möchte ich aber bestimmte Links als Button darstellen. Das mache ich so:
.button {…}

'.button' (10) hat niedrigere Spezifität als 'a:link' (11), überschreibt also nicht dessen Deklarationen.

Qapla'

[Tabellenkalk]

Hallo,

Und ein Delphinbaby stirbt.

kann mir da jemand den kausalen Zusammenhang erläutern?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk:

nuqneH

Und ein Delphinbaby stirbt.

kann mir da jemand den kausalen Zusammenhang erläutern?

Wenn ein Effekt für :hover implementiert wird, nicht aber für :focus, dann ist das ein sicheres Zeichen dafür, dass man sich keine Gedanken darüber gemacht hat, dass nicht alle Nutzer per Maus navigieren, sondern einige auch per Tastatur.

Qapla'

[Tabellenkalk]

Hallo,

Wenn ein Effekt für :hover implementiert wird, nicht aber für :focus, dann ist das ein sicheres Zeichen dafür, dass man sich keine Gedanken darüber gemacht hat, dass nicht alle Nutzer per Maus navigieren, sondern einige auch per Tastatur.

Danke für diese Erläuterung, wäre ich eingeloggt, hätte ich jetzt ein "hilfreich" vergeben. Aber wie kommt da jetzt das Delphinbaby ins Spiel?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk:

nuqneH

Aber wie kommt da jetzt das Delphinbaby ins Spiel?

Die Katzenbabys sind schon alle tot.

Qapla'

[Tabellenkalk]

ich glaub ich such mir eine andere Branche, die hier ist mir zu lethal.

Gruß
Kalk

[Steel]

Viel Spaß beim suchen:
http://2.bp.blogspot.com/_Q5GWc46SESE/Spj6rHabzSI/AAAAAAAABLE/GlLlrmqR0TE/s1600/a%2Bkitten%2Bdies.jpg

[Gunnar Bittersmann]

@@Steel:

nuqneH

http://2.bp.blogspot.com/_Q5GWc46SESE/Spj6rHabzSI/AAAAAAAABLE/GlLlrmqR0TE/s1600/a%2Bkitten%2Bdies.jpg

Was hieß „think of“ gleich nochmal? Ah, ich hab’s: „scheiß auf“.

Qapla'