Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > CSS Formatierung
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > CSS Formatierung
Pages: [1]
| geschrieben von werny am 24.02.2006 - 16:39 |
Hallo,
ich möchte in meinem css eine uniforme Farbe in den Links einbauen.
Es soll immer rot sein (bei aktiven, hover, visited usw.)
Warum ist der link da blau?
Das Beispiel ist hier:
http://freeweb.dnet.it/werny/index.html
das css ist hier:
http://freeweb.dnet.it/werny/styles.css
Sorry, blöde Frage, aber ich komm nicht drauf.
Danke für die Hilfe...
|
| geschrieben von sobi am 24.02.2006 - 16:55 |
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
| a:link, a:visited, a:active {
color: #004068;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
text-decoration: underline;
}
a:hover {
color: #004068;
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
text-decoration: overline;
} |
und setz bei #004068 halt Deine Farben ein, bspw.: #FF0000. Schriften und Schriftgröße solltest Du an Deine CSS anpassen.
cu
Uli |
| geschrieben von werny am 24.02.2006 - 17:21 |
Ja so ist es mir schon klar,
nur habe ich mehrere types von schrift grössen,
die jeweils eigene A:- styles haben sollen
Z.B. Normal soll Verdana 10 pt in rot sein,
small soll Arial, 8 pt in grau sein usw.
Irgendwo in meinem css muss ein Fehler sein.
|
| geschrieben von Micha am 24.02.2006 - 18:35 |
Dann nutze dafür eine entsprechende Klasse:
| HTML-Quelltext | 1:
2:
3:
4:
| a .klassenname { ... }
<a class="klassenname" href="http://seitenadresse.de">Link</a> |
Micha |
| geschrieben von Martin am 24.02.2006 - 18:37 |
Ave,
du solltest dann auch die Verknüpfungen richtig definieren.
a:hover bezieht sich auf alle a - Elemente im HTML Dokument. a.small:hover hingegen gilt nur für Elemente mit der class small.
mfg martin |
| geschrieben von zippy am 25.02.2006 - 04:07 |
Ursprünglich hielt ich die Stylesheets für logisch - Eigentlich sollten ja die Styles hierarchisch geordnet sein, also im body und a für die ganze Seite, und in den classes nur noch die Änderungen. Dann müssten die Styles so stimmen, oder(?)
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
| <style>
body {font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000};
.class1{font-size:32px;}
.class2{font-family:"Times New Roman", Times, serif;font-size:24px;color:#006699;}
a:link, a:visited, a:active, a:hover {color:#ff0000;text-decoration:none}
a.class1:hover {text-decoration:blink;}
a.class2:hover {text-decoration:underline;}
</style> |
Warum funktioniert class1 im FF nicht? Dass der IE nicht blinkt, ist eh normal...
Dafür funktioniert diese seltsame Kombi, wo die Schrift blau ist, dafür die Unterstreichung bei Hover rot, in beiden Browsern:
| HTML-Quelltext | 1:
| <a href="#" class="class2"><span class="class2">Dies ist ein Link class2 mit Klassenaufruf im a-tag UND Klassenaufruf im Span-tag innerhalb des a-tags</span></a> |
|
| geschrieben von zippy am 25.02.2006 - 17:24 |
Du hast keine allgemeine Link-Definition (=ohne Klassen)angegeben.
Der Link zu Google erscheint blau, weil die Style-Klasse im umgebenden Container, in diesem Fall ein <td>-Tag aufgerufen wurde, aber nicht im Link selbst. Die color wird also vom nächstumgebenden Element übernommen, in diesem Fall der <td>, und weil die td kein a-element ist, greift die Klasse "a.normal" nicht im weiter innen liegenden Link. Der erscheint dann bei mir blau, also in der Browser-Grundeinstellung. Diese Grundeinstellung überruled man mit allgemeinen Link-Definitionen, also [ .a:{color:#ff0000;} usw...]
Diese erscheinen dann bei JEDEM LINK auf der Seite, außer, Du rufst IM <a>-tag selbst (!) eine andere Klasse auf.
Es macht nen Unterschied, ob man:
<span class="normal><a href...>TEXT</a></span>
<span class="normal><a class="normal" href...>TEXT</a></span>
oder gar
<a class="normal" href...><span class="normal>TEXT</span></a>
schreibt....
Beispiel aus einem CSS-Kurs, leider etwas lang, aber aufschlussreich. Es wird gezeigt, wie sich Verschachtelungen im Klassenaufruf auf Linkstyles auswirken:
| HTML-Quelltext | 1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
| <html>
<head>
<title>Linkstyles-Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000};
.class1{font-size:32px;}
.class2{font-family:"Times New Roman", Times, serif;font-size:24px;color:#006699;}
a:link, a:visited, a:active, a:hover {color:#ff0000;text-decoration:none;}
a.class1:hover {text-decoration:blink;}
a.class2:hover {text-decoration:underline;}
</style>
</head>
<body>
Styles:<br/>
<br/>
body {font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000000}<br/>
.class1{font-size:32px;} // <em>funktioniert nicht im FF</em> <br/>
.class2{font-family:"Times New Roman", Times, serif;font-size:24px;color:#006699;} <br/>
a:link, a:visited, a:active, a:hover {color:#ff0000;text-decoration:none} <br/>
a.class1:hover {text-decoration:blink;} // <em>blinkt nicht im IE</em> <br/>
a.class2:hover {text-decoration:underline;} <br/>
<br/>
<br/>
Dies ist ein Text im body-style ohne Klassenaufruf <br/>
<br/>
<a href="#">Dies ist ein Link im body-style ohne Klassenaufruf</a><br/>
<br>
<br/>
<span class="class1">Dies ist ein Text class1</span><br/>
<span class="class1">Dies ist ein Text class1</span><br>
<br/>
<a href="#" class="class1">Dies ist ein Link class1</a><br/>
<a href="#" class="class1">Dies ist ein Link class1</a><br/>
<br/>
<span class="class2">Dies ist ein Text class2</span><br/>
<span class="class2">Dies ist ein Text class2</span><br/>
<br/>
<a href="#" class="class2">Dies ist ein Link class2 mit Klassenaufruf im a-tag</a><br/>
<a href="#" class="class2">Dies ist ein Link class2 mit Klassenaufruf im a-tag</a><br/>
<br/>
<span class="class2"><a href="#">Dies ist ein Link class2 mit Klassenaufruf im span-tag außerhalb des a-tags</a></span><br/>
<span class="class2"><a href="#">Dies ist ein Link class2 mit Klassenaufruf im span-tag außerhalb des a-tags</a></span><br/>
<br/>
<a href="#"><span class="class2">Dies ist ein Link class2 mit Klassenaufruf im span-tag innerhalb des a-tags</span></a><br/>
<a href="#"><span class="class2">Dies ist ein Link class2 mit Klassenaufruf im span-tag innerhalb des a-tags</span></a><br/>
<br/>
<a href="#" class="class2"><span class="class2">Dies ist ein Link class2 mit Klassenaufruf im a-tag UND Klassenaufruf im Span-tag innerhalb des a-tags</span></a><br/>
<a href="#" class="class2"><span class="class2">Dies ist ein Link class2 mit Klassenaufruf im a-tag UND Klassenaufruf im Span-tag innerhalb des a-tags</span></a></p>
</body>
</html> |
|
|