Linkfarben in einer Tabelle
Stephan Laemmer
- css
0 AndreasW0 CarstenP0 Fabian Transchel0 Linksetzer0 AndreasW
0 Josef Y. B.0 AndreasW0 Stephan Laemmer0 AndreasW
Moin Moin !
So, jetzt probiere ich schon seit Tagen herum, die Farben eines Links in einer Tabelle per CSS zu verändern.
Eigentlich habe ich alle Kombinationen schon durch, momentan habe ich ein Pseudo-Format a.weiss erstellt und will es mit <a class="weiss"... aufrufen, klappt aber nicht, solange ich mich in einer Tabelle befinde.
Wie geht sowas ?
Hier der Auszug aus meiner css-Datei:
a:link { font-weight:bold; color:#508DE8; text-decoration:none }
a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
a:active { font-weight:bold; color:#508DE8; text-decoration:none }
a:focus { font-weight:bold; color:#508DE8; text-decoration:none }
a.weiss:link { color:#000000; }
a.weiss:visited { color:#000000; }
a.weiss:active { color:#000000; }
Oben sind normal die Links verknüpft, die im normalen Text stehen, die Links a.weiss sollen aber eine andere Farbe bekommen.
CU und vielen Dank schon mal im voraus
Stephan
Moin Moin !
Tach,
So, jetzt probiere ich schon seit Tagen herum, die Farben eines Links in einer Tabelle per CSS zu verändern.
Eigentlich habe ich alle Kombinationen schon durch, momentan habe ich ein Pseudo-Format a.weiss erstellt und will es mit <a class="weiss"... aufrufen, klappt aber nicht, solange ich mich in einer Tabelle befinde.
Das ist kein Pseudo-Format, sondern eine Klasse. Daher auch der Attribut-Name class!
Wie geht sowas ?
Hier der Auszug aus meiner css-Datei:
a:link { font-weight:bold; color:#508DE8; text-decoration:none }
a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
a:active { font-weight:bold; color:#508DE8; text-decoration:none }
a:focus { font-weight:bold; color:#508DE8; text-decoration:none }
Die Reihenfolge ist falsch.
Korrekt ist :link :visited :focus :hover :active
a.weiss:link { color:#000000; }
a.weiss:visited { color:#000000; }
a.weiss:active { color:#000000; }
Oben sind normal die Links verknüpft, die im normalen Text stehen, die Links a.weiss sollen aber eine andere Farbe bekommen.
Wo ist das Problem? Bis auf :focus an der falschen Stelle paßt doch alles.
CU und vielen Dank schon mal im voraus
Stephan
Andreas
Wo ist das Problem? Bis auf :focus an der falschen Stelle paßt doch alles.
Andreas
Moin Moin !
Das Problem liegt einfach darin, daß ich trotz Verwendung des Befehls
<a class="weiss" href="... eben nicht diese css-Formatierung bekomme (nämlich gar keine).
Vielleicht spielt es eine Rolle, daß die CSS-Formatierungen in einer extra Datei stehen ? Die anderen Formatierungen aus dieser Datei funktionieren jedenfalls...
CU
Stephan
Hallo Stephan,
der Klassename "weiss" soll wohl heißen, daß der Link weiß werden soll. Dann solltest Du aber auch in der Farbdefinition den Code für weiß verwenden (und nicht für schwarz ;-)
a.weiss:link { color:#000000; }
^^^^^^ dat is' schwarz! ;-)
War zwar nicht Deine Frage aber vielleicht noch folgendes:
Wenn die besonders formatierten Links immer in einer Tabelle stehen, dann sollte auch folgendes reichen:
td a:link {...}
u.s.w.
Das erspart Dir, jedesmal den Klassennamen angeben zu müssen.
Und noch etwas: in SelfHTML ist zwar die von Dir niedergeschriebene Reihenfolge der Pseudoklassen angegeben, aber ich würde :focus an die dritte Position setzen (sonst greifen bei einem fokusierten Link :hover bzw. :active nicht)
Viele Grüße
Carsten
Moin Moin !
a.weiss:link { color:#000000; }
^^^^^^ dat is' schwarz! ;-)
Wußte ich auch schon ;-) Hätte vielleicht dann doch nicht einfach Copy and paste machen sollen...
War zwar nicht Deine Frage aber vielleicht noch folgendes:
Wenn die besonders formatierten Links immer in einer Tabelle stehen, dann sollte auch folgendes reichen:
td a:link {...}
u.s.w.
Hm, funktioniert aber nicht, wenn ich die CSS-Formatierungen in einer externen css-Datei definiere
CU
Stephan
» Hier der Auszug aus meiner css-Datei:
a:link { font-weight:bold; color:#508DE8; text-decoration:none }
a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
a:active { font-weight:bold; color:#508DE8; text-decoration:none }
a:focus { font-weight:bold; color:#508DE8; text-decoration:none }
a.weiss:link { color:#000000; }
a.weiss:visited { color:#000000; }
a.weiss:active { color:#000000; }
moin,
mein tipp ist, das leerzeichen am anfang der definition wegzulassen. (statt { color... } lieber {color... }
ausserdem gehören die farbangaben inanführungszeichen:
{color:'#000000'; } (Das ist die RICHTIGE syntax!!!)
Fabian
PS:Warum heißen die SCHWARZEN links a.weiss ??? ;-)
ausserdem gehören die farbangaben inanführungszeichen:
{color:'#000000'; } (Das ist die RICHTIGE syntax!!!)
Hallo,
moin,
mein tipp ist, das leerzeichen am anfang der definition wegzulassen. (statt { color... } lieber {color... }
Warum? Abgesehen daß Leerzeichen (bzw. Whitespace) an dieser Stelle erlaubt sind, hat Netscape damit Probleme, wenn vor oder nach den geschweiften Klammern _kein_ whitespace ist.
ausserdem gehören die farbangaben inanführungszeichen:
{color:'#000000'; } (Das ist die RICHTIGE syntax!!!)
An dieser Stelle liegst Du definitiv falsch. Da dürfen keine Anführungszeichen stehen. Wie kommt man nur auf solchen Quatsch?
siehe:
http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-color
Fabian
PS:Warum heißen die SCHWARZEN links a.weiss ??? ;-)
Vielleicht, damit man sie von den WEISSEN links, die über die Klasse a.schwarz erzeugt werden, unterscheiden kann ;-)
Andreas
Moin Moin ebenfalls!
Wie bindest du die CSS denn ein?
Muss das nicht heißen
a:link.weiss
statt
a.weiss:link
oder versuch mal
.weiss a:link
gehts jetzt?
MFG
Yogi
Moin Moin ebenfalls!
Tach
Wie bindest du die CSS denn ein?
Muss das nicht heißen
a:link.weiss
in CSS2 ist das theoretisch auch zulässig.
statt
a.weiss:link
dies ist sowohl in CSS1 als auch CSS2 zulässig.
Da ältere Browser nur die CSS1-Variante verkraften (Pseudoklassen am Ende), sollte man diese vorziehen.
oder versuch mal
.weiss a:link
Das ist etwas ganz anderes. Das formatiert Links, die innerhalb eines beliebigen Elements der Klasse weiss liegen.
gehts jetzt?
MFG
Yogi
cu
Andreas
Moin Moin !
Vielleicht sollte ich noch dazu sagen, daß es ich den Link nicht mit einem Text versehe, sondern der Link durch ein Bild (JPEG) geöffnet werden soll...
Es geht immer noch nicht... :-(
Ich poste hier mal meine css-datei hinein:
body { background-color:#FFFFFF; color:000000; font-family:Verdana; font-size:10pt }
td { color:000000; font-family:Verdana; font-size:10pt }
.weiss a:link { color:#FFFFFF; text-decoration:none}
.weiss a:visited { color:#FFFFFF; text-decoration:none}
.weiss a:active { color:#FFFFFF; text-decoration:none}
a:link { font-weight:bold; color:#508DE8; text-decoration:none }
a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
a:focus { font-weight:bold; color:#508DE8; text-decoration:none }
a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
a:active { font-weight:bold; color:#508DE8; text-decoration:none }
form {font-family:Verdana; font-size:10pt }
Und hier die html-Datei
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/allgemein.css">
</HEAD>
<BODY>
<table width=350 border="1" cellspacing="0" cellpadding="0" frame="vsides" bordercolor="#508DE8" bgcolor="FFFFFF">
<tr>
<td colspan='2'><a class='weiss' href='links/aendern.asp?id=1' target='frame_main'><img src='../images/edit.jpg' alt='Ändern/L&oum;schen'></a></td>
</table>
</BODY>
</HTML>
CU
Stephan
Moin Moin !
Tach
Vielleicht sollte ich noch dazu sagen, daß es ich den Link nicht mit einem Text versehe, sondern der Link durch ein Bild (JPEG) geöffnet werden soll...
Es geht immer noch nicht... :-(
Ich poste hier mal meine css-datei hinein:
body { background-color:#FFFFFF; color:000000; font-family:Verdana; font-size:10pt }
td { color:000000; font-family:Verdana; font-size:10pt }
.weiss a:link { color:#FFFFFF; text-decoration:none}
.weiss a:visited { color:#FFFFFF; text-decoration:none}
.weiss a:active { color:#FFFFFF; text-decoration:none}
Siehe mein vorheriges Posting, das formatiert nicht einen Link der Klasse weiss, sondern einen, der in einem Element der Klasse weiss enthalten ist. So wie es unten im HTML steht, müßte es
a.weiss:link usw heissen.
a:link { font-weight:bold; color:#508DE8; text-decoration:none }
a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
a:focus { font-weight:bold; color:#508DE8; text-decoration:none }
a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
a:active { font-weight:bold; color:#508DE8; text-decoration:none }
form {font-family:Verdana; font-size:10pt }
Und hier die html-Datei
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/allgemein.css">
</HEAD>
<BODY>
<table width=350 border="1" cellspacing="0" cellpadding="0" frame="vsides" bordercolor="#508DE8" bgcolor="FFFFFF">
<tr>
<td colspan='2'><a class='weiss' href='links/aendern.asp?id=1' target='frame_main'><img src='../images/edit.jpg' alt='Ändern/L&oum;schen'></a></td>
In diesem Link ist überhaupt kein Text vorhanden. Wie soll denn die Formatierung auf Text wirken, wenn keiner da ist? Da ist ja nur ein Bild, und auf ein Bild wirkt weder text-decoration noch color
</table>
</BODY>
</HTML>
CU
Stephan
cu
Andreas
Tach
In diesem Link ist überhaupt kein Text vorhanden. Wie soll denn die Formatierung auf Text wirken, wenn keiner da ist? Da ist ja nur ein Bild, und auf ein Bild wirkt weder text-decoration noch color
cu
Andreas
Moin Moin !
Aber gibt es keinen Befehl, mit dem ich diesen Rahmen um das Link-Bild wegbekomme (sprich es der Hintergrundfarbe anpassen kann) ?
Bis jetzt hat die color-Eigenschaft von dem a-Tag immer die Farbe des Rahmens mitverändert. Nur nicht, wenn ich per css die Eigenschaft in einer Tabelle verändern wollte...
CU
Stephan
Moin Moin !
Aber gibt es keinen Befehl, mit dem ich diesen Rahmen um das Link-Bild wegbekomme (sprich es der Hintergrundfarbe anpassen kann) ?
Bis jetzt hat die color-Eigenschaft von dem a-Tag immer die Farbe des Rahmens mitverändert. Nur nicht, wenn ich per css die Eigenschaft in einer Tabelle verändern wollte...
CU
Stephan
Hallo,
Den Rahmen wegzubekommen geht doch viel einfacher.
Da braucht man nicht solche von-hinten-durch-die-Brust-unter-den-Knien-durch-ins-Auge-Lösungen.
Entweder per HTML: <img border="0" ...>
oder per css:
a img { border:none; } /* hier nur für BIlder, die als Link dienen */
img { border:none; } /* hier die Variante für _alle_ BIlder */
Hallo ihrs,
a img { border:none; } /* hier nur für BIlder, die als Link dienen */
img { border:none; } /* hier die Variante für _alle_ BIlder */
Hier besteht nun allerdings wieder das "Problem", daß es Netscape4 nicht versteht. Ein Work-around sowie einen weiterführenden Link zu weiteren "Problemen" findet man hier: </archiv/2002/3/7480/>
Meine miserablen Englisch-Kenntnisse in diesem Posting dürfen ignoriert werden ;-)
Viele Grüße
Carsten
Moin Moin !
Wunderbar, das war es !!! :-)
Ich danke allen, die mir hier tatkräftig geholfen haben, warum ich dadrauf nicht selber gekommen bin, weiß ich aber auch nicht (man sieht manchmal den Wald vor lauter Bäumen nicht)...
CU
Stephan