CSS stylesheet umgehen
Samuel Vogel
- html
0 Cheatah0 David0 Samuel Vogel0 Samuel Vogel0 Cheatah0 Thomas Luethi0 KD-one0 Thomas Luethi0 KD-one0 Ingo Turski
0 David
0 Grissom
Hallo,
Also ich hab ein Stylesheet auf einer Seite und da steht eine Angabe für die Farbe der Links drin aber ich muss auch manchmal ´ne andere Farbe oder Größe verwenden!
Aber immer wenn ich was per <style> angebe wird das nicht angenommen!
Hat jemand von euch eine Idee??
samy,
Hi,
Also ich hab ein Stylesheet auf einer Seite und da steht eine Angabe für die Farbe der Links drin aber ich muss auch manchmal ´ne andere Farbe oder Größe verwenden!
Aber immer wenn ich was per <style> angebe wird das nicht angenommen!
Hat jemand von euch eine Idee??
aufgrund Deiner Problembeschreibung schließe ich messerscharf, dass Du etwas falsch machst. Mehr kann man daraus allerdings nicht ersehen.
Cheatah
Schick mal einen Link zu deiner Seite, oder poste mal die wichtigen(!) teile deines Quellcodes. Dann können wir dir sicher helfen.
David
Also die Seite designe ich grad ist nicht meine:
http://www.afeonline.de.vu
Es geht um den Link neben dem Copyright ganz links oben!
Und der Code:
<div style="color: White; font-size: 75%;"><font color="#FFFFFF"> © 2003 X4th || <a href="http://www.x4th.de">Realisiert von X4th</a></font></div>
und im Stylesheet:
a:hover, a:visited, a:link{
color : Navy;
text-decoration : none;
font-size : 80%;
}
a:hover{
color : White;
text-decoration : none;
font-size : 95%;
}
Sorry habs jetzt selba!
Ich musste einfach statt <style><a>Link</a></style> <a><style>Link</style></a> schreiben!
Aber trotzdem Danke
Hi,
Ich musste einfach statt <style><a>Link</a></style> <a><style>Link</style></a> schreiben!
wie, was? <style> ist außerhalb des <head> nicht erlaubt! Was soll denn das für einen Sinn ergeben?
Cheatah
wie, was? <style> ist außerhalb des <head> nicht erlaubt! Was soll denn das für einen Sinn ergeben?
Der Sinn darin besteht, einen gewisse Logik zu verfolgen (zu erhalten). Script-Definitionen in den Header die Benutzung dieser in den Body.
David
Hi,
wie, was? <style> ist außerhalb des <head> nicht erlaubt! Was soll denn das für einen Sinn ergeben?
Der Sinn darin besteht, einen gewisse Logik zu verfolgen (zu erhalten). Script-Definitionen in den Header die Benutzung dieser in den Body.
ich glaube, Du hast meine Frage nicht verstanden. Ein <style> außerhalb des <head> *hat* keinen Sinn. Gar keinen. Du fährst gerade mit dem Auto ins Meer, nach dem Motto "auf der Straße geht's ja auch".
Cheatah
Ok dann ist ja alles klar :-)
sorry ich meinte <div style=""></div>
Sorry, Sorry, Sorry
Hallo
Ich musste einfach statt <style><a>Link</a></style> <a><style>Link</style></a>
Ähhm, style als HTML-Tag gibt es nicht im body, es gibt style nur im head,
um die Dokumentweiten CSS-Einstellungen darin zu notieren. Les' mal:
http://selfhtml.teamone.de/css/formate/einbinden.htm.
Tschö, Auge
Hi,
Es geht um den Link neben dem Copyright ganz links oben!
es geht also um unterschiedliche Formatierungen verschiedener Links? Dann ist mir nicht klar, warum Du anhand des Archivs keine Lösung hast finden können. Gerade dieses ganz spezielle (Unter-(Unter-(Unter-(...))))Problem wurde nun wirklich schon zigfach behandelt.
<div style="color: White; font-size: 75%;">
Die Farbe "White" ist mir nicht bekannt. Meinst Du "white"?
<font color="#FFFFFF">
Wozu denn noch <font>? Schmeiß das bitte raus.
color : Navy;
Auch diese Farbe kenne ich nicht.
a:hover, a:visited, a:link{
a:hover{
Bei widersprüchlichen Angaben des gleichen Selektors "gewinnt" die letzte.
text-decoration : none;
Wobei mindestens diese redundant ist.
Cheatah
Hallo Cheatah,
<div style="color: White; font-size: 75%;">
Die Farbe "White" ist mir nicht bekannt. Meinst Du "white"?
Ich verstehe
http://www.w3.org/TR/REC-CSS2/syndata.html#q4
so, dass Gross-/Kleinschreibung in CSS meistens - und
auch in diesem Fall - keine Rolle spielt.
"All CSS style sheets are case-insensitive, except
for parts that are not under the control of CSS."
In der HTML 4 Spezifikation sind die Farben genau so
ausgeschrieben, wie Samuel es schrieb: "White" u.s.w.:
http://www.w3.org/TR/REC-html40/types.html#h-6.5
Und dort steht: "The color names are case-insensitive."
Damit scheint der Fall klar zu sein...
a:hover, a:visited, a:link{
a:hover{
Bei widersprüchlichen Angaben des gleichen Selektors "gewinnt" die letzte.
Und die Reihenfolge ist nicht ganz "comme il faut".
Hier spielt es keine Rolle, weil alle "in einem Topf landen",
aber wenn man unterschiedliches Aussehen fuer die Pseudoklassen
will, muss man auf die richtige Reihenfolge achten:
:link, :visited, :hover, :active
siehe:
http://www.netandmore.de/faq/fom-serve/cache/1237.html
:focus wuerde ich als zweitletztes angeben:
:link, :visited, :hover, :focus, :active
---
Die urspruengliche Frage von Samuel haette man IMHO einfach mit
der Self_HTML_-FAQ beantworten koennen:
http://selfhtml.teamone.de/navigation/faq.htm#abweichende_verweisfarben
Dass er jetzt <DIVs> um jeden Link packt, ist wohl nicht gerade
das Gelbe vom Ei...
Mit Klassen oder meinetwegen einem style-Attribut direkt im
A-Element waere es deutlich einfacher gegangen...
Gruesse,
Thomas
Hi,
Und die Reihenfolge ist nicht ganz "comme il faut".
Hier spielt es keine Rolle, weil alle "in einem Topf landen",
aber wenn man unterschiedliches Aussehen fuer die Pseudoklassen
will, muss man auf die richtige Reihenfolge achten:
Es gibt keine allgemein richtige Reihenfolge.
Die Reihenfolge ist davon abhängig, welchen Effekt man erzielen will.
:link, :visited, :hover, :active
Sicher, das erzeugt die von den meisten Leuten gewünschten Effekte.
Aber diese Reihenfolge ist kein Muß.
Wenn ich bsp. will, daß besuchte Links keinen hover-Effekt haben, darf ich auch die Reihenfolge
:link, :hover, :visited, :active benutzen...
siehe:
http://www.netandmore.de/faq/fom-serve/cache/1237.html
:focus wuerde ich als zweitletztes angeben:
:link, :visited, :hover, :focus, :active
Ich würde :focus zwischen :visited und :hover setzen - dann werden auch Elemente, die den Fokus haben, beim Überfahren mit der Maus auch noch verändert, bei Deiner Reihenfolge wäre das nicht der Fall.
cu,
Andreas
Hallo Andreas,
Danke fuer die Ergaenzungen.
Wenn ich bsp. will, daß besuchte Links keinen hover-Effekt haben, darf ich auch die Reihenfolge
:link, :hover, :visited, :active benutzen...
Klar.
:link, :visited, :hover, :focus, :active
Ich würde :focus zwischen :visited und :hover setzen - dann werden auch Elemente, die den Fokus haben, beim Überfahren mit der Maus auch noch verändert, bei Deiner Reihenfolge wäre das nicht der Fall.
Da hast Du natuerlich recht. An diese Kombination habe ich nicht gedacht.
Ich dachte bisher, dass jemand entweder mit der Maus navigiert,
oder aber mit der Tabulator-Taste von einem Link zum naechsten huepft.
Auf meinen Seiten definere ich deshalb :focus meist gleich wie :hover, also so:
a { /* Allgemeines */ }
a:link { }
a:visited { }
a:focus, a:hover { }
a:active { }
Gruesse,
Thomas
Hallo Cheatah,
text-decoration : none;
Wobei mindestens diese redundant ist.
Der IE verlangt vielfach redundante Angaben.
Eine generelle Definition mit den entsprechenden Ergänzungen in den einzelnen Zuständen genügt für den Mozilla und Opera, aber leider nicht immer für den IE.
Nach welchen Kriterien er dies aber anlegt, habe ich selbst noch nicht wirklich herausgefunden.
Gruß
Kurt
Hallo,
Der IE verlangt vielfach redundante Angaben.
Eine generelle Definition mit den entsprechenden Ergänzungen in den einzelnen Zuständen genügt für den Mozilla und Opera, aber leider nicht immer für den IE.
Genau. Diese Erfahrung habe ich auch schon gemacht.
Nach welchen Kriterien er dies aber anlegt, habe ich selbst noch nicht wirklich herausgefunden.
Ich vermute, er hat Probleme mit der Kaskade oder mit der
"Spezifizitaet" (specificity):
http://www.w3.org/TR/CSS21/cascade.html#specificity
Wenn man etwas fuer allgemeine Links und ihre Pseudoklassen definiert:
a:link { text-decoration:underline; /* ... */}
a:visited { text-decoration:underline; /* ... */}
dann hat das die Spez. von: 11 oder 0,0,1,1 (1 Pseudo-Klasse, 1 Element)
Wenn man dann weiter unten im CSS eine Klasse definiert
a.spezial { text-decoration:none; }
hat dies die gleiche Spez.: 11 oder 0,0,1,1 (1 Klasse, 1 Element).
Weil diese Definition aber spaeter kommt, sollte sie "gewinnen".
http://www.w3.org/TR/CSS21/cascade.html#cascading-order
Fuer den MS IE muss man aber extra noch
a.spezial:link { text-decoration:none; }
a.spezial:visited { text-decoration:none; }
schreiben.
Dieser Selektor ist dann auch spezifischer:
21 oder 0,0,2,1 (1 Klasse + 1 Pseudoklasse, 1 Element)
Gruesse,
Thomas
P.S. In der Berechnung der Spezifizitaet widersprechen sich
die verschiedenen Versionen von CSS.
Die Links habe ich zusammengestellt auf:
http://www.tiptom.ch/tests/css/specificity.html
Soweit ich ueberflogen habe, sind aber
a:link { }
und
a.spezial { }
in allen bisherigen Versionen von CSS (1.0, 2.0, 2.0 Errata, 2.1)
jeweils gleich spezifisch.
Hallo Thomas,
Nach welchen Kriterien er dies aber anlegt, habe ich selbst noch nicht wirklich herausgefunden.
Ich vermute, er hat Probleme mit der Kaskade oder mit der
"Spezifizitaet" (specificity):
http://www.w3.org/TR/CSS21/cascade.html#specificityWenn man etwas fuer allgemeine Links und ihre Pseudoklassen definiert:
a:link { text-decoration:underline; /* ... */}
a:visited { text-decoration:underline; /* ... */}
dann hat das die Spez. von: 11 oder 0,0,1,1 (1 Pseudo-Klasse, 1 Element)Wenn man dann weiter unten im CSS eine Klasse definiert
a.spezial { text-decoration:none; }
hat dies die gleiche Spez.: 11 oder 0,0,1,1 (1 Klasse, 1 Element).
Weil diese Definition aber spaeter kommt, sollte sie "gewinnen".
http://www.w3.org/TR/CSS21/cascade.html#cascading-orderFuer den MS IE muss man aber extra noch
a.spezial:link { text-decoration:none; }
a.spezial:visited { text-decoration:none; }
schreiben.
Dieser Selektor ist dann auch spezifischer:
21 oder 0,0,2,1 (1 Klasse + 1 Pseudoklasse, 1 Element)
Ja, genau. Ich habe es für mich einfach so gemacht, daß ich bei Pseudoklassen immer die ganze Latte einfüge, dann kann nichts schiefgehen, da er auch bei gleicher Spezifität immer die vorhergehenden Werte überschreibt. Erschwerend kommt ja hinzu, daß er allgemeine Definitionen wie a {Sp:0001} auch nicht immer in die einzelnen Zustände übernimmt, sondern auch bei a:link {Sp:0011} usw. oft Redundanz verlangt. Da hier aber eine höhere Spezifität gegeben wäre, kann es nicht (nur) daran liegen. Allerdings ist das nicht bei allen Angaben so. Der IE macht ein Lotteriespiel draus, was er übernimmt und was nicht.
Bsp.:
a
{
font-family:verdana,tahoma,arial,helvetica,sans-serif;
color:#535593;
text-decoration:none;
font-weight:bold;
}
Font-Family wird übernommen, color, text-decoration und font-weight hingegen nicht.
Deshalb erspare ich mir die Rätselraterei lieber gleich und schreibe alles relevante gleich in jede Pseudoklasse.
Opera und Mozilla akzeptieren hingegen Angaben in dieser Form und führen diese korrekt aus.
P.S. In der Berechnung der Spezifizitaet widersprechen sich
die verschiedenen Versionen von CSS.
Die Links habe ich zusammengestellt auf:
http://www.tiptom.ch/tests/css/specificity.html
Soweit ich ueberflogen habe, sind aber
a:link { }
und
a.spezial { }
in allen bisherigen Versionen von CSS (1.0, 2.0, 2.0 Errata, 2.1)
jeweils gleich spezifisch.
Danke für die Links, ist interessant zu lesen, soweit ich es mit meinen Englischkenntnissen zusammenbringe. ;-)
Gruß
Kurt
Hi,
Soweit ich ueberflogen habe, sind aber
a:link { }
und
a.spezial { }
in allen bisherigen Versionen von CSS (1.0, 2.0, 2.0 Errata, 2.1)
jeweils gleich spezifisch.
mag sein, nur hat der IE hier - mal wieder - eine andere Meinung.
Der linkzustand hat hier mehr Gewicht als eine Klasse. Hieraus dürften dann auch die bereits angemerkten "Ratespiele" resultieren.
Ein Beispiel zur Verdeutlichung:
a:link, a:visited {color:red;}
a.spezial {color:blue;}
<a class="spezial" ...> wird im IE rot angezeigt.
freundliche Grüße
Ingo
Also du du willst den Link verändern, so dass der nomal auch weiß ist oder? Ok wenn das so ist kannst du doch einfach folgendes schreiben:
<font color="#FFFFFF"> © 2003 X4th || <a href="http://www.x4th.de" style="color:#FFFFFF">Realisiert von X4th</a></font>
Greetz David
PS: Darf ich mal raten? Du hast eine Auflösung von 1024x768 ? Deine Homepage ist leider auch nur dafür optimiert... den <div> Layern sei dank.
wie wäre es wenn du ne class angabe machst??
z.b.
.fett {
font-weight:bold;
}
dann fügste dat halt z.b. so ein:
<p class="fett">dit sollte nu fett sein</p>
muss gehen geht ja bei mir auch, aber warum das mit dein style nicht klappt ist mir auch fraglich