Seite 1 von 1

Stylesheets verschachteln

Verfasst: 07.11.2004 17:27
von Martin Truckenbrodt
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

Verfasst: 07.11.2004 17:49
von D@ve
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

Verfasst: 07.11.2004 17:51
von DaniM
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 ;-)

Verfasst: 07.11.2004 18:01
von pi
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 :wink:

Verfasst: 07.11.2004 18:02
von Blutgerinsel
Wenn die Table einmalig verwendet wird mit diesem Layout dann sollte statt
.table1 wohl sinniger
#table1 verwendet werden

Verfasst: 07.11.2004 19:45
von Martin Truckenbrodt
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

Verfasst: 07.11.2004 20:02
von DaniM
Das <link ...> gehört in den Header und nicht in mitten des Body-Tags.
Sowas ist nicht möglich.

Mit freundlichen Grüßen,
Dani

Verfasst: 07.11.2004 20:10
von Martin Truckenbrodt
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

Verfasst: 07.11.2004 20:11
von pi
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>

Verfasst: 07.11.2004 20:22
von Blutgerinsel
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