Farblich enterschiedlich Links auf einer Seite

[Reinhold]

Hallo,

habe auf meiner Seite in der linken Spalte eine Tabelle zur Navigation. Der Tabellenhintergrund ist relativ dunkles blau. Der Haupttext hat einen sehr hellen Hintergrund.

Nun sind die Links in der blauen Spalte gut sichtbar, aber kaum auf dem hellen Hintergrund.

Die linke Spalte mit der Navigation habe ich per CSS "linke-spalte" getauft (<td class="linke-spalte">).

Wie muß ich die css-Datei einstellen damit die a-tags in der linken Spalte beispielsweise weiß kommen, im Rest des Dokument mit dem hellen Hintergrund aber dunkel?

Kleiner Auszug aus meiner css-datei:

a{
 color: ##FFE4B5;
}

body {
 background: #FDF5E6;
 color: #0064AB;
 font-family: Arial, Helvetica, Verdana, sans-serif;
 margin: 2%;
}

.linke_spalte {
 background: #0064AB;
 color: #EDEDED;
 text-align: center;
 vertical-align: top;
 width: 22%;
}

Gruß Reinhold

[Gunnar Bittersmann]

habe auf meiner Seite in der linken Spalte eine Tabelle zur Navigation.

Reinhold,
Was hat Navigation in einer Tabelle zu suchen? Eine Liste wäre wohl die passende Auszeichnung.

Die linke Spalte mit der Navigation habe ich per CSS "linke-spalte" getauft (<td class="linke-spalte">).

Da ist keinerlei CSS.

Wie muß ich die css-Datei einstellen damit die a-tags in der linken Spalte beispielsweise weiß kommen, im Rest des Dokument mit dem hellen Hintergrund aber dunkel?

Du suchst den Nachfahren-Selektor. Du findest ihn in </css/formate/zentrale.htm#verschachtelte_elemente>

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

Du suchst den Nachfahren-Selektor. Du findest ihn in </css/formate/zentrale.htm#verschachtelte_elemente>

Oder auch nicht. Aber in http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente

Live long and prosper,
Gunnar

PS. Gab’s für "[link:http://de.selfhtml.org/" nicht eine Abkürzung?

[Tim Tepaße]

Hallo Gunnar,

PS. Gab’s für "[link:http://de.selfhtml.org/" nicht eine Abkürzung?

Es gibt die weitgehend unbeachteten Referenz-Links die so funktionieren:

[ref:self81;css/formate/direkt.htm

... und natürlich nicht vergessen die eckige Klammer zu schliessen. Diese Links gibt es auch für die Archiv-Versionen von SELFHTML 8.0 (ref:self7) und 7.0 (ref:self7), sowie für den Bugtracker (ref:bug;123) und die Suche (ref:suche;Suchterm) und man kann @title verwenden. Ich finde sie eigentlich unnötig, aber hab sie trotzdem in der kommenden Hilfe zum Forum dokumentiert, die ich endlich mal fertig und online stellen sollte.

Tim

[Gunnar Bittersmann]

[ref:self81;

Danke, Tim.

Live long and prosper,
Gunnar

[Michael]

Hallo auch,

probierrs doch mal indem Du die Links der linken Spalte unter die Klasse der linken Spalte kaskadierst:

body {
background: #FDF5E6;
color: #0064AB;
font-family: Arial, Helvetica, Verdana, sans-serif;
margin: 2%;
}

.linke_spalte {
background: #0064AB;
color: #EDEDED;
text-align: center;
vertical-align: top;
width: 22%;
}

.linke_spalte a {
    color: #FFE4B5;
}

Damit sollten sich die Eigenschaften nur auf a's die unter linke Spalte sind auswirken. Gleiches kannst Du dann natürlich für die reschte Spalte machen, zb:
.rechte_spalte a {
    color: blue;
}

greets

Michael

[Gunnar Bittersmann]

probierrs doch mal indem Du die Links der linken Spalte unter die Klasse der linken Spalte kaskadierst:

Michael,
Der Nachfahren-Selektor hat nichts mit Kaskadierung zu tun.

Live long and prosper,
Gunnar

[Michael]

Hi Gunnar,

Der Nachfahren-Selektor hat nichts mit Kaskadierung zu tun.

Das der Nachfahren-Selektor offiziell nicht als Kaskadierung gerechnet wird, wusste ich schon, nichtsdesto trotz ist das doch wohl eine Kaskadierung feinster Form. In sofern sehe ich das durchaus so, dass der Nachfahren-Selektor sehr viel mit Kaskadierung zu tun hat. Kommt halt immer darauf an was man unter einer Kaskade versteht.

viele Grüße

Michael

[Gunnar Bittersmann]

Kommt halt immer darauf an was man unter einer Kaskade versteht.

Michael,
In dem Kontext CSS, wo das C für cascading steht, sollte man unter Kaskade nichts anderes verstehen als was CSS darunter versteht.

Verstehste?

Live long and prosper,
Gunnar

[Michael]

Hallo Gunnar,

In dem Kontext CSS, wo das C für cascading steht, sollte man unter Kaskade nichts anderes verstehen als was CSS darunter versteht.

Verstehste?

Verstehe es nach wie vor so:
Kaskade: "eine Verkettung von Ereignissen/Funktionen, die, einmal angestoßen, automatisch bis zum Ende durchläuft, wobei alle Ereignisse auf die vorhergehenden aufbauen" (Wikipedia)

und so steht's auch in der CSS 2 Recommendation:
(hier zitiert nach der deutschen Übersetzung)
"6.4.1 Kaskaden-Reihenfolge
Um den Wert für eine Element/Eigenschaft-Kombination zu ermitteln, wenden die Benutzerprogramme die folgende Sortierreihenfolge an:

Es werden alle Deklarationen ermittelt, die sich auf das betreffende Element und die Eigenschaft für den Ziel-Medientyp beziehen. Deklarationen werden angewendet, wenn der entsprechenden Selektor mit dem betreffenden Element übereinstimmt.
Primär werden die Deklarationen nach Gewichtung und Ursprung sortiert: Für normale Deklarationen überschreiben Autor-Stylesheets die Benutzer-Stylesheets, die wiederum das Standard-Stylesheet überschreiben. Für „!important“-Deklarationen überschreiben Benutzer-Stylesheets Autor-Stylesheets, die wiederum das Standard-Stylesheet überschreiben. Eine „!important“-Deklaration überschreibt normale Deklarationen. Ein importiertes Stylesheet hat denselben Ursprung wie das Stylesheet, von dem es importiert wurde.
Die zweite Sortierung erfolgt nach der Spezifität des Selektors: Spezifischere Selektoren überschreiben allgemeinere Selektoren. Pseudo-Elemente und Pseudo-Klassen werden als normale Elemente bzw. Klassen betrachtet.
Schließlich werden sie nach der vorgegebenen Reihenfolge sortiert: Haben zwei Regeln dieselbe Gewichtung, denselben Ursprung und dieselbe Spezifität, erhält die jeweils zuletzt angegebene den Vorrang. Regeln in importierten Stylesheets werden als vor allen anderen Regeln im eigentlichen Stylesheet befindlich betrachtet.
Neben der Einstellung „!important“ für einzelne Deklarationen erteilt diese Strategie den Stylesheets des Autors eine höhere Gewichtung als denen des Lesers. Deshalb ist es wichtig, dass das Benutzerprogramm dem Benutzer die Möglichkeit gibt, die Beeinflussung durch ein bestimmtes Stylesheet zu deaktivieren, beispielsweise in einem Pulldown-Menü."

...und was kaskadieren wir daraus?

Greets

Michael

[Gunnar Bittersmann]

Hi Michael,

Deklarationen werden angewendet, wenn der entsprechenden Selektor mit dem betreffenden Element übereinstimmt.

Aha. Das halten wir mal fest.

Primär werden […]
Die zweite Sortierung erfolgt […
Schließlich werden […]

Da hast du deine Kaskaden.

...und was kaskadieren wir daraus?

Dass CSS sorgfältig zwischen Selektoren und Kaskaden unterscheidet.

Live long and prosper,
Gunnar

[Michael]

Hi Gunnar,

Dass CSS sorgfältig zwischen Selektoren und Kaskaden unterscheidet.

Selektoren sind Hilfsmittel bei der Kaskadierung.
Überschrift und Kontext ist schließlich: Kaskaden-Reihenfolge.

Würde man Kaskade so eng sehen, dass man so was nicht darunter einordnen würde, dann müsste man eigentlich auch den Namen CSS unangebracht finden und eher sowas wie ISS oder MSS bevorzugen (Importanz Style Sheet - Media Style Sheet).

viele Grüße

Michael

[Gunnar Bittersmann]

Hi Michael,
Du hälst einen aber auf Trab. ;-)

Dies steht direkt über dem von dir zitierten Teil in der Spec:
„Die CSS-Kaskade ordnet jeder Stilregel eine Gewichtung zu. Gelten mehrere Regeln, setzt sich diejenige mit der höchsten Gewichtung durch.“ [CSS2 §6.4]

Kaskadierung bezieht sich nicht die Verschachtelung von Elementen. (Ich denke, das ist, was du meintest.)

Kaskadierung bezieht sich auf die Gewichtung von Stilregeln: Welche letztendlich angewandt wird, wenn mehrere für dieselbe Eigenschaft desselben Elements vorhanden sind.

Selektoren sind Hilfsmittel bei der Kaskadierung.

Ähm, durch ihre Spezifizität, ja. [CSS2 §6.4.3]

Ob also für das a-Element in
  <td class="linke_spalte"><a href="http://example.net"></td>
diese
  a {color: blue}
oder jene Deklaration
  .linke_spalte a {color: white}
angewandt wird.

Es passen ja beide, also wird die mit dem spezifischeren Selektor angewandt (die zweite).

Ich bin nicht sicher, dass du genau das mit „die Links der linken Spalte unter die Klasse der linken Spalte kaskadieren“ meintest. ;-)

Live long and prosper,
Gunnar

[Michael]

Hi Gunnar,

Du hälst einen aber auf Trab. ;-)

Danke, danke. Du mich aber auch.
Aber ich finde die Diskussionen mit Dir immer sehr anregend.

Dies steht direkt über dem von dir zitierten Teil in der Spec:
„Die CSS-Kaskade ordnet jeder Stilregel eine Gewichtung zu. Gelten mehrere Regeln, setzt sich diejenige mit der höchsten Gewichtung durch.“ [CSS2 §6.4]

Kaskadierung bezieht sich nicht die Verschachtelung von Elementen. (Ich denke, das ist, was du meintest.)

Kaskadierung bezieht sich auf die Gewichtung von Stilregeln: Welche letztendlich angewandt wird, wenn mehrere für dieselbe Eigenschaft desselben Elements vorhanden sind.

Ja. Aber da würde ich eben Kaskadierung sowohl auf die Spezifität / Gewichtung wie auch auf die Verschachtelung oder Klassifizierung oder wie immer man es nennen will beziehen.

Selektoren sind Hilfsmittel bei der Kaskadierung.

Ähm, durch ihre Spezifizität, ja.

Aber ebendiese Spezifität ergibt sich ja unter anderem (und hier im Beispiel nur) nach der, bzw. durch die Verschachtelung.

Ob also für das a-Element in
  <td class="linke_spalte"><a href="http://example.net"></td>
diese
  a {color: blue}
oder jene Deklaration
  .linke_spalte a {color: white}
angewandt wird.

Es passen ja beide, also wird die mit dem spezifischeren Selektor angewandt (die zweite).

Ich bin nicht sicher, dass du genau das mit „die Links der linken Spalte unter die Klasse der linken Spalte kaskadieren“ meintest. ;-)

Doch, doch, so wars gemeint.

Viele Grüße

Michael

[Gunnar Bittersmann]

Hi Michael,

Du hälst einen aber auf Trab. ;-)
Danke, danke. Du mich aber auch.
Aber ich finde die Diskussionen mit Dir immer sehr anregend.

Danke, danke.

Ja. Aber da würde ich eben Kaskadierung sowohl auf die Spezifität / Gewichtung wie auch auf die Verschachtelung oder Klassifizierung oder wie immer man es nennen will beziehen.

Und auf letzteres bezieht CSS Kaskadierung eben gerade nicht.

Aber ebendiese Spezifität ergibt sich ja unter anderem (und hier im Beispiel nur) nach der, bzw. durch die Verschachtelung.

Das stimmt natürlich. Wenn das nicht so wäre, hätten wir diese anregende Diskussion nicht geführt.

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

Hi Reinhold,

Die linke Spalte mit der Navigation habe ich […] "linke-spalte" getauft (<td class="linke-spalte">).

Wenn du dein Kind so nennst, solltest du es dann auch so rufen, und nicht

.linke_spalte { … }

Sonst hört es nicht auf dich.

Live long and prosper,
Gunnar