Hallo,
Ich überarbeite meine Homepage und verwende primär zur Formattierung CSS-Stylesheets.
Nun möchte ich bestimmte Grundfarben, die immer wieder vorkommen, als eigene Farbdefinition angeben, um die dann in den jeweiligen Tags zu verwenden. Ein Tag wie zB. "color:red" ist möglich. Mit schwebt etwas in der Form "color:mycolor" vor, wobei ich dann meine Farbe "mydolor" zentral definieren kann.
Ich kann dazu im Internet nichts finden.
Ist diese Art der Farbdefinition möglich und wenn ja, wie sieht das syntaktisch richtig aus ?

_________________
Jürgen

Nein, solche Konstanten sind in CSS nicht möglich. Dafür bietet aber die Arbeit mit verschiedenen Klassen solche Möglichkeiten.

Du kannst einem Element nicht nur eine Klasse geben, sondern (fast) beliebig viele, durch Leerzeichen getrennt. Dafür verwendet man dann sinnvollerweise sprechende Namen:

Code:

<div class="rahmen1 bg-grau rot">

Im CSS hat man dann:

Code:

.rahmen1 {border:1px solid #000;} .rahmen2 {border:2px solid #000;} .bg-grau {back ground-color:#777;} .rot {color:#f00;} .blau {color:#00f;} .gruen {color:#0f0;}

So legt man nicht zig Klassen mit leicht unterschiedlichen Definitionen an, sondern für jede benötigte Eigenschaft eine. Das heißt natürlich nicht, daß man dabei in einer Klasse nicht mehrere Eigenschaften zusammenfassen soll. Wenn sie für jedes Element mit dieser Eigenschaft gelten, soll man das natürlich tun. Aber eben nicht so, wie du es tun willst: Dieselbe Eigenschaft in vielen verschiedenen Klassen definieren. Das geht mit einer Eigenschaft für alle Elemente mit dieser Klasse einfacher.

_________________
Dietmar

Die Wetterseite: http://wetter.altenessen.info/
Deutscher Joomla-Supportchat: http://www.joomla-supportchat.de

So richtig will das aber nicht funktionieren. ich habe die Formattierungen mit 'id="..."' innerhalb von 'div'-Blöcken gemacht und da ist es anscheinend nicht möglich, einfach mehrere Elemente gleichzeitig anzugeben. Ersetze ich das 'Id=' durch 'class=' geht die komplette Layout meiner Seite flöten.

Getestet mit Konqueror und Firefox, Verhalten ist gleich.

_________________
Jürgen

Id sind eindeutige Identifier, die müssen natürlich einmalig sein. Sie sind dazu gedacht, einmalige, wesentliche Bereiche der Seite zu kennzeichnen und dienen gleichzeitig als Sprungmarke für seiteninterne Anker. Klassen dagegen sind dazu gedacht, sie auf verschiedene Elemente mit gleichen Eigenschaften anzuwenden. Ids und Klassen sind nicht einfach untereinander austauschbar.

Du kannst aber völlig unproblematisch einem Element eine Id und mehrere Klassen geben:

<div id="content" class="blau border1">

Bei den Definitionen mußt du dann aber die Gewichtung beachten: http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet

Ein
#content {color:red;}
überschreibt ein
.blau {color:blue;}

Deshalb ist es sinnvoll, in den Id-Definitionen kein Design unterzubringen, sondern nur das Layout der Seite: Die Anordnung der Divs und die Abstände zueinander. Schriften, Farben, Rahmen und Hintergründe gehören in Klassen.

_________________
Dietmar

Die Wetterseite: http://wetter.altenessen.info/
Deutscher Joomla-Supportchat: http://www.joomla-supportchat.de

Ich war in der Zwischenzeit auch schon soweit gekommen, daß Id-Tags mit einer Raute (#) und class-Tags mit einem Punkt(.) In der CSS-Definition beginnen müssen. Nachdem ich das angepasst hatte, ging das auch mit mehreren Tags in der Class-Definition gleichzeitig.
Die gleichzeitige Nutzung von Id und Class wäre eine Möglichkeit. Das bestehende Seitenlayout würde ich dann in den Id-Tags lassen und alle Farben/Schriften dann per class hinzufügen.

_________________
Jürgen

Dann mußt du jetzt nur noch das C in CSS verstehen

Du kannst einem Element mit einer Klasse problemlos verschiedene Definitionen in Abhängigkeit von seiner Umgebung geben, z.B. in der linken Spalte ein anderes Blau als im Rest der Seite:

.blau {color: #00f;}
#links .blau {color: #00a;}

Und den Links in dieser Umgebung wieder ein anderes Aussehen:
#links .blau a {color: #a0a;}

Das läßt sich beliebig tief verschachteln.

_________________
Dietmar

Die Wetterseite: http://wetter.altenessen.info/
Deutscher Joomla-Supportchat: http://www.joomla-supportchat.de

Ich greife diesen Thread nocheinmal auf, weil ich aktuell ein anderes Problem mit dem CSS Layout habe:

Ich möchte ein Tabellenartiges Layout erstellen, genauso wie die Datentabelle auf meiner Homepage : Klick
Nur möchte ich das nicht mit einem Tabellenlayout machen sondern mit geschachtelten 'div'-Elementen. Das Ganze funktioniert soweit auch, nur habe ich das Problem, daß der Hauptrahmen, in dem sich das alles befindet, sich nicht in der Höhe anpasst - er bleibt einfach bei 'min-height' stehen. Ich kann aber auch nicht die erforderliche Höhe direkt angeben (height=), da der Rahmen für alle Seiten der Homepage verwendet werden soll und die Höhen vorher nicht bekannt sind.
Wie bekomme ich es hin, daß sich die Höhe des Rahamens anpasst ?

Anbei ein auf das Minimun reduziertes Beispiel. Es geht um den roten Rahmen, der mindestens so groß sein soll, das alle kleinen Rahmen innerhalb sind.

Die Definition 'haupt' wird von alles Seiten verwendet, die später meine Homepage haben soll.
'box25out' ist der äußere Rahmen mit 25% Breite, damit genau 4 Boxen nebeneinander passen (Im Beispiel 24% wegen der testweisen Borders).
Der innere Rahmen 'box_inner' erzeugt den Zwischenraum, damit alles als einzelne Felder erscheint und nicht als durchgehender Block. Dieses Konstrukt ist (meiner Meinung nach) erforderlich, da die Rahmen nicht zur Breite zählen und ich dann mit 25% zu breit wäre.

_________________
Jürgen

_________________
Dietmar

Die Wetterseite: http://wetter.altenessen.info/
Deutscher Joomla-Supportchat: http://www.joomla-supportchat.de