✔ Schrift-Formatierung, Vererbung

Status
Nicht offen für weitere Antworten.
LuvShining

LuvShining

Erfahrenes Mitglied
Hallo, ein weiteres Problem, dass mich aktuell beschäftigt.

Beim Aufbau meiner CSS für den Inhaltsbereich formatiere ich gerade die Schriften. Ein Beispiel für einen Überschriftteil ist dieses:

Code: 
[...]
h4 {font-size: 1.0em; color: #888; margin: 0 0 0.30em 0; padding-top: 1em; font-weight:bold; border-bottom: 1px #888 solid;} /* Standard, wenn keine andere Farbe angegeben */
[etc.]

Jetzt habe ich aber das "Problem", dass dieses Überschrift-System bei einem Bereich in orange, bei einem anderen Thema die Farbe grau und bei einem wieder anderen die Farbe blau tragen soll.

Überlegt habe ich mir nun folgende Fortsetzung:
Code: 
.tren_orange { color: #FFA304;text-transform: uppercase; } /* wenn Trennzeile Orange*/
.tren_green { color: #0A8200;text-transform: uppercase; } /* wenn Trennzeile Grün*/
.tren_blue { color: #0028BF;text-transform: uppercase; } /* wenn Trennzeile Grün*/

Setze ich da auf das richtige Schiff oder geht das auch einfacher?

Offensichtlich stehe ich auf dem Schlauch.....

Viele Grüße
Nadine
 

Anhänge

  • headline.jpg
    headline.jpg
    6,1 KB · Aufrufe: 18
Hi,

neben der Vergabe von Klassen für das h4-Element wären auch folgende Regeln möglich:

Code: 
div#bereich1 h4 { color: #FFA304;text-transform: uppercase; } /* wenn Trennzeile Orange*/
div#bereich2 h4 { color: #0A8200;text-transform: uppercase; } /* wenn Trennzeile Grün*/
div#bereich3 h4 { color: #0028BF;text-transform: uppercase; } /* wenn Trennzeile Grün*/
Die in diesem Beispiel verwendeten IDs bereich1 - bereich3 lassen sich selbstverständlich auch durch Klassen ersetzen:

Code: 
div.bereich1 h4 { color: #FFA304;text-transform: uppercase; } /* wenn Trennzeile Orange*/
div.bereich2 h4 { color: #0A8200;text-transform: uppercase; } /* wenn Trennzeile Grün*/
div.bereich3 h4 { color: #0028BF;text-transform: uppercase; } /* wenn Trennzeile Grün*/
 
Hmm, ich glaube so ganz erledigt habe ich s doch noch nicht. Für die insgesamt 3 untschiedlich farbigen Bereiche habe ich nun entsprechend Formatierungen vorgenommen. Jetzt möchte ich aber noch, dass eine Linie, so lang wie die Zeile, in der Farbe des jeweiligen Bereiches da ist. Ich hatte angenommen, mit einer Formatierung für H4 hätte ich wenigstens eine einfarbige Linie bekommen, aber leider klappt das gar nicht. Dann hab ich gedacht, wenn ich

CSS für Rubrik 2 = Orange
Code: 
div#bereich2 h4 { color: #FFA304;text-transform: uppercase; border-bottom:#FFA304 1px solid;}

setze, habe ich das gewünschte Ergebnis. Aber hier passiert rein gar nichts.

Hat jemand eine Hilfestellung für mich?
Falls jemand meinen Gedankengang nicht nachvollziehen kann, die Linie ist auch auf dem Bild zu sehen, was ich im ersten Beitrag gepostet habe.

Gruß
Nadine
 
Hmmmmmm, hab ich dann vielleicht einen anderen Denkfehler?

CSS für Überschrift, Link "Übersicht und Abschlußlinie
Code: 
#bereich2 a {margin-left: 10px; color: #888; text-decoration:none; text-transform: capitalize;}
#bereich2 a:hover {margin-left: 10px; background-color: #FFF2DB; text-decoration:none; text-transform: capitalize;}
#bereich2 a:focus {margin-left: 10px; background-color: #FFF2DB; text-decoration:none; text-transform: capitalize;}

div#bereich2 h4 { color: #FFA304; text-transform: uppercase; border-bottom:#FFA304 1px solid;}

HTML
Code: 
<div id="bereich2"><h4>Die tolle Überschrift <a href="#">Übersicht</a></h4>

Das erzeugt bei mir zwar die in orange geschriebene Überschrift in Großbuchstaben, den Link zur Übersicht in grau mit normaler Schrift und etwas Abstand zur Überschrift, aber keine Linie darunter in orange... :rolleyes:
 
Ok, Nachtrag: Der Strich ist mit Einschränkung zu sehen. Im FF kein Thema, läuft. Im IE 6.0 ist aber nichts zu sehen....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück