Linkfarbe seperat mit einer class definieren

html.de-Forum HTML, XHTML & CSS
1

Hallo liebe Community!

Ich stehe gerade vor einem Problem dass ich beim besten Willen nicht mehr selbst lösen kann.

Ich habe auf meiner Seite links allgemein im Css File definiert, das schaut so aus:

#main #content #inhalt #text a:link { font-size: 15px; color: #CE1300; text-decoration: none; font-family: Geneva, Arial, Helvetica, sans-serif; } #main #content #inhalt #text a:visited { font-size: 15px; color: #CE1300; text-decoration: none; font-family: Geneva, Arial, Helvetica, sans-serif; } #main #content #inhalt #text a:hover { font-size: 15px; color: #CE1300; text-decoration: none; font-family: Geneva, Arial, Helvetica, sans-serif; } #main #content #inhalt #text a:active { font-size: 15px; color: #CE1300; text-decoration: none; font-family: Geneva, Arial, Helvetica, sans-serif; }

Jetzt will ich aber eine Überschrift die gleichzeitig auch ein Link ist, in einer anderen Farbe definieren.
Im Html file schauts so aus:
[HTML]

Überschrift
[/HTML]

und im css hab ich das definiert:

[CODE]#uepresse {
background-image:url(images/ue_farbverlauf.png);
background-repeat:repeat-y;
color:#FFF;
font-size:16px;
font-weight:bold;
padding-left:5px;
padding-bottom:3px;
padding-top:3px;
}

a.beispiel:link {color:#0000FF; size:14px;}
a.beispiel:visited {color:#FFFF00; size:14px;}
a.beispiel:active {color:#00FFFF; size:14px;}
a.beispiel:hover {color:#FF0000; size:14px; text-decoration:underline;} [/CODE]

Leider übernimmts aber nicht meine Extradefinition sondern behandelt den link wie alle anderen…Kein Plan wie ich das hinbiegen muss damits funktioniert. :S

Vielen dank schon mal für eure Hilfe

Mfg
JOhannski

2

CSS, Spezifität/Gewichtung von Selektoren:

Du kannst zudem durch Angabe von „a“ ohne Pseudoklassen (:link, :visited, …) Eigenschaften für alle Pseudoklassen gleichzeitig setzen und somit viel Tipparbeit sparen.

[code]#main #content #inhalt #text a {
font-size: 15px;
color: #CE1300;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

#main #content #inhalt #text #uepresse a {
color:#0000FF;
font-size:14px;
}

#main #content #inhalt #text #uepresse a:hover {
color:#FF0000;
text-decoration:underline;
}[/code]

Edit: Ach ja, die extreme Verschachtelung von ID-Selektoren, die bei dir vorliegt, ist nicht gut. Da solltest du versuchen, geschickter vorzugehen und vielleicht nur einen ID-Selektor pro CSS-Regel aufzuführen.

3

Danke mal für deine schnelle Antwort!
Ja ich weiß es ist grausam strukturiert, das hat mein Vorgänger produziert, alles neu machen will ich aber wirklich nicht.
Ich hab jetz wie von dir empfohlen das ganze gekürzt.
muss man die divs im Css mittragen? Denn die überschirft is auch in so einem verschachteltem Ebenengewirr.
Da es anscheinend so is, hab ichs auch probiert mit dieser csszeile:

#main #content #inhalt #text #uepresse .beispiel a{color:#fff; size:14px;} leider abermals ohne erfolg, es wird nicht angenommen…

Der text stecktin:

Hier drin... (das was ich oben gepostet habe)

Wo liegt der Fehler?

Nochmal kurz zum Problem: Es ändert sich nicht die farbe weiß so wie ichs definiert hab sondern die Farbe/größe usw. geht von dem:#main #content #inhalt #text a:active aus. Ich benutze übrigens Dreamweaver cs5, falls es da ne einfache vairante gibt und ich nicht am codeschnippsel rumbasteln muss käme mir das auch sehr gelegen

4

Ich hatte in meinem Beispiel eine :hover-Angabe vergessen.

muss man die divs im Css mittragen?

Nein. Du könntest den geschachtelten a-Tag über a.beispiel { … } erreichen. Nur existieren vermutlich Selektoren mit einer höheren Gewichtung, die diese Regeln überschreiben würden (siehe Link im letzten Post). Falls nicht klar ist, wie CSS auf ein Dokument angewendet wird, lies am besten die verlinkte Seite komplett oder eine andere Einführung ins Thema.

[html]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New</title>
    <style type="text/css">

#main #content #inhalt #text a {
font-size: 15px;
color: #CE1300;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

#main #content #inhalt #text #uepresse a {
color:#0000FF;
font-size:14px;
}

#main #content #inhalt #text #uepresse a:hover {
color:#FF0000;
text-decoration:underline;
}

    </style>
</head>

<body>

    <div id="main">
        <div id="content">
            <div id="inhalt">
                <div id="text">
                    <div id="uepresse">
                        <a class="beispiel" href="#">Überschrift</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
[/html]

Ich würde dieses CSS so schreiben:

[code]a {
font-size: 15px;
color: #CE1300;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

a.beispiel {
font-size:14px;
color:#0000FF;
}

a.beispiel:hover {
color:#FF0000;
text-decoration:underline;
}[/code]

Aber wie gesagt, das hängt vom Aufbau deiner Regelhierarchie/Kaskade ab.

5

Vielen Dank für deine Hilfe! Ich habe jetz die ganzen unnötigen Verschachtelungen weggenommen und es nochmal probiert. Es hat zwar noch nicht geklappt aber als ich gleich viel definiert hatte wie im generellen a hats geklappt. Funktioniert jetz alles einwandfrei und der Code wurde übersichtlicher, Vilen Dank :slight_smile:

6

Ich hätte noch eine Anmerkung.
Du definierst deine Überschrift in einem DIV-Container mit einer bestimmten Klasse. Das geht, sinnvoller (der Spezifikation nach) und vor allem suchmaschinenfreundlicher ist es aber, eine Überschrift auch in ein für die Überschrift vorgesehenes Tag zu setzen:

-


Diesen Tags kannst du genauso Klassen zuweisen, sie stylen (und kannst dir auch einige Angaben sparen) und vorallem werten die Suchmaschinen-Robots Werte, die in Überschrift-Tags stehen höher, als andere.

Nur eine kleine Anmerkung, vielleicht als Tip, fürs nächste Mal :slight_smile:

7

Mhm danke für den Tipp, ich kenn natürlich die h tags aber wusste nicht dass sie suchmaschinenrelevant sind. Haha mit euerer Hilfe wird das ja noch was, danke :slight_smile: