Stylesheets verschachteln

Martin Truckenbrodt · Beitrag von **Martin Truckenbrodt** » 07.11.2004 17:27

Hallo,
meine Seite sind als Tabellen aufgebaut. Für die Grundeinstellung des Layouts benutze ich eine externe css Datei.
Nun will ich sichtbare inhaltliche Tabellen mit einer weiteren externen css Datei zentral layouten.
Leider schaffe ich es nicht die zwei link Anweisungen sinnvoll zu verschachteln.

Wie läßt sich dieses Verschachteln realisieren?

Gruß Martin

Beitrag von **D@ve** » 07.11.2004 17:49

Irgendwie verstehe ich nicht, was Du vorhast. Bei css besteht garnicht der Bedarf irgendwas zu verschachteln. Leg doch einfach für die anderen Tabellen eine weitere css-Klasse an.

Gruß, Dave

DaniM · Beitrag von **DaniM** » 07.11.2004 17:51

Kannst du vielleicht ein Beispiel geben damit das ganze etwas anschaulicher wird? Ich weiß im Moment nicht was du meinst.
Soweit ich verstanden habe:

Du kannst ja eine eigene StyleKlasse machen und diese dann anwenden, hier ein Beispiel:

Code: Alles auswählen

<!-- Im Head-Bereich -->
<style type="text/css">
.tabelle_1 {
border:1px solid #000000;
}
.tabelle_2 {
border:2px dotted #ff0000;
}
</style>
[...]
<body>
[...]
<table class="tabelle_1">
[...]

Meinst du das so? War es anschaulich was ich damit meine?

Mit freundlichen Grüßen,
Dani

EDIT: D@ve war schneller

pi · Beitrag von pi » 07.11.2004 18:01

wenn ich dich richtig verstanden habe meinst du die anweisung im header, die die css datei einbindet, da hättest du gerne das zwei css dateien eingebunden werden??
wenn ja schließe ich mich DaniM an einfach andere klassen definieren, also einfach alles in eine css datei schreiben

Blutgerinsel · Beitrag von **Blutgerinsel** » 07.11.2004 18:02

Wenn die Table einmalig verwendet wird mit diesem Layout dann sollte statt
.table1 wohl sinniger
#table1 verwendet werden

Martin Truckenbrodt · Beitrag von **Martin Truckenbrodt** » 07.11.2004 19:45

Hallo,
vielen Dank schon mal für Eure Antworten.
Ich will ohne Klassen und mlieber mit zwei css Dateien arbeiten.

Ich will noch mal zur verdeutlichen:

Code: Alles auswählen

<head>
<link ... 1.css>
</head>
<body>
<table>
...
<link ... 2.css>
<table>
...
</table>
</link> ### ??? - Ist dies möglich???
...
</table>
</body>

Gruß Martin

DaniM · Beitrag von **DaniM** » 07.11.2004 20:02

Das <link ...> gehört in den Header und nicht in mitten des Body-Tags.
Sowas ist nicht möglich.

Mit freundlichen Grüßen,
Dani

Martin Truckenbrodt · Beitrag von **Martin Truckenbrodt** » 07.11.2004 20:10

Hallo,
vie verhält sich das, wenn sich der zweite

Code: Alles auswählen

<link>

in einer über

Code: Alles auswählen

<? include (); ?>

aufgerufenen Datei befindet?

Gruß Martin

pi · Beitrag von pi » 07.11.2004 20:11

hmmm also jetzt versteh ich garn nicht mehr was du meinst, ...
hast du diese css dateien selber geschrieben??
Ansonsten mal ne kleine Erklärung:

cssdatei1.css

Code: Alles auswählen

body {
/*hier stehen die angaben für den body, hintergrudfarbe und so*/
background-color:#000000;
color:#FFFFFF;
}
.erstetabelle {
/*hier wird die erste tabelle beschrieben*/
background-color:#CC0000;
}
.zweitetabelle {
background-color:#00FF00;
}

Die selbstgewählten wörter hinter den Punkten nennt man auch Klassen.
In die deine html datei werden sie jetzt so eingebunden:

bunteseite.html

Code: Alles auswählen

<html>
<head>
<link rel="stylesheet" href="cssdatei1.css" type="text/css">
</head>
<body>
hier ist der hintergrund wie in body angegeben schwarz
<table class="erstetabelle">
  <tr><td>hier ist der hintergrund rot</td></tr>
</table>
zwischen den Tabellen ist er wieder schwarz
<table class="zweitetabelle">
  <tr><td>hier ist der hintergrund grün</td></tr>
</table>
</body>
</html>

wenn du jetzt noch eine zweite css Datei hast z.B.

cssdatei2.css

Code: Alles auswählen

body {
/*hier stehen die angaben für den body, hintergrudfarbe und so*/
background-color:#000000;
color:#FFFFFF;
}
.drittetabelle {
/*hier wird die erste tabelle beschrieben*/
background-color:#CC0000;
}

ist mir keine Möglichkeit bekannt die auch noch in die html datei direkt einzubinden, in solchen fällen kopiere ich den inhalt der zweiten css datei in die erste, und achte dabei darauf das keine Klassen oder tags doppelt definiert werden, so entstünde dann hier eine neue datei:

cssdatei1.css

Code: Alles auswählen

body {
/*hier stehen die angaben für den body, hintergrudfarbe und so*/
background-color:#000000;
color:#FFFFFF;
}
.erstetabelle {
/*hier wird die erste tabelle beschrieben*/
background-color:#CC0000;
}
.zweitetabelle {
background-color:#00FF00;
}
.drittetabelle {
/*hier wird die erste tabelle beschrieben*/
background-color:#CC0000;
}

Jetzt kanns du beide stylesheet klassen in deiner htmldatei verwenden

bunteseite.html

Code: Alles auswählen

<html>
<head>
<link rel="stylesheet" href="cssdatei1.css" type="text/css">
</head>
<body>
hier ist der hintergrund wie in body angegeben schwarz
<table class="erstetabelle">
  <tr><td>hier ist der hintergrund rot</td></tr>
</table>
zwischen den Tabellen ist er wieder schwarz
<table class="zweitetabelle">
  <tr><td>hier ist der hintergrund grün</td></tr>
</table>
zwischen den Tabellen ist er wieder schwarz
<table class="drittetabelle">
  <tr><td>hier ist der hintergrund blau</td></tr>
</table>
</body>
</html>

Blutgerinsel · Beitrag von **Blutgerinsel** » 07.11.2004 20:22

Junge du kannst denn Sinn und Zweck von CSS nicht zweckentfremden......

Entweder du setzt eine globale CSS Markierung ala

table { background-color:#ff00ff }

Machst eine Klasse:
.table { background-color:#ff00ff }

Oder eine ID
#table { background-color:#ff00ff }

Das ist alles !
Und CSS hat mit HTML nichts aber auch gar nichts zu tun!

Konsuldiere das SELFHTML bevor du weitere Fragen postet!
Danke