Hallo Ich habe in meiner CSS-Datei folgende Definitionen:
.breadcrumb {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
}
.breadcrumb a:link {
color: #000000;
text-decoration: none;
}
.breadcrumb a:visited {
color: #000000;
text-decoration: none;
}
.breadcrumb a:active {
color: #000000;
text-decoration: none;
}
.breadcrumb a:hover {
color: #000000;
text-decoration: none;
}
Nun würde ich gerne die Links im Content anders formatieren. Dazu hatte ich folgende CSS definiert:
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #DB3035;
text-decoration: none;
}
Diese schluckt nun aber meine Breadcrumb-Definitionen. Das will ich ja aber nicht. Irgendwie steh ich gerade auf dem Schlauch und sehe meinen Fehler nicht. Nur dort wo Text ohne definierte KLasse (breadcrumb) steht, soll die untere Definition Gültigkeit haben. Wie stelle ich das denn an?
Hi,
die "a" Definition sollte vor der .breadcrumb stehen (Reihenfolge).
Wenn das nicht funzt versuch mal:
.breadcrumb a{
font-size:10px;
color: #000000;
}
oder probiere mit !important die Gewichtung ändern.
.breadcrumb a{
font-size:10px !important;
color: #000000 !important;
}
😃
Hallo,
das wird bestimmt an der Cascadierung liegen:
http://www.thestyleworks.de/basics/specificity.shtml
Ich kenne dein CSS nicht insofern kann ich nur allgemeingültige Aussagen treffen.
Es gibt eine Wertigkeit im CSS mit der "rechnen" kann:
"style = " ist das höchste (z.b.:Wertigkeit 1000)
"id=" ist das zweithöchste (z.B.:Wertigkeit 100)
"class =" ist das dritte (z.b:Wertigkeit 10)
"Pseudoelemente" (:active) ist die letzte (z.b:Wertigkeit 1)
(!important steht über allen usw. Es gibt Ausnahmen siehe Link)
Wenn du in deinem Beispiel deine Breadcrumb mit:
.breadcrumb a{...}
ansprichst, dann hast du einen rechnerischen Wert von:
100 + 10 = 110, der den mit nur
a{...}, der rechnerisch nur 10 hast. Oder anders gesagt: deine Breadcrub-Definition hat eine höher Definition und "gewinnt" ( wird angezeigt )
Wenn du klassen gleicher "Wertigkeit" hast überschreibt "die letzte" Anweisung die Vorgänger. Und da vermute ich dein Problem. Man kann so etwas sehr gut im Firebug vom Firefox verfolgrn; dort werden die überschrieben Klassen durchgestrichen dargestellt.
Beim lesen von deinen CSS ist mir schon augefallen, das meine berechnunggen so nicht ganz stimmen können. Aber: Ich kenne nicht dein vollständiges und diese "Berechnungsformel" ist einen grobe Vereinfachung mit der ich bis jetzt ganz gut "rechnen" konnte.
Ich hoffe das war einigermassen Verständlich und ist nur als Ansatz zu verstehen. Aber ich denke da liegt dein Problem
Lieben Gruß
Tevsa
Vielen Dank für Eure Antworten, also das mit der Berechnung hatte ich schon mal gehört um dezufolge müsste ja .breadcrumb höhe als a gewertet und deshalb angezeigt werden.Das dachte ich mir ja auch.
Das Problem ist: Umgekehrt wird es angezeigt, das heißt nicht .breadcrumb sondern a wird bevorzugt.
Hallo,
trenne die Links im Conten per CSS. Wenn dein Div um den Content z.b. content heisst, dann wäre dein css für die Links im Contenbereich:
#content a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #DB3035;
text-decoration: none;
}
und schon haben die nix mehr mit deiner Breadcrum zu tun.
Hoffe es hilft
Tevsa