Hai, Aquabubble,
Ich habe ein Problem mit dem CSS-Link-Element. Aber erst mal
kein Wunder…
Ich gebe das Element, das zu der CSS-Datei verweist, ein. Aber
dieses wird nicht gefunden (soll heißen, dass, wenn ich
class=„irgendwas“ schreibe, nichts passiert, obwohl sie in der
CSS-Datei, zu der ich verlinkt habe, definiert wurde [auch
korrekt mit .irgendwas].]
naja - korrekt?
Quellcode test.html
-
Punkt: gewöhn Dir hübsche Einrückungen an - ist dem Browser zwar egal, macht sich aber zur Fehlersuche besser
Das link-Element für Stylesheets
Hier ist im Prinzip erstmal noch kein Fehler drin, sofern die verlinkte haupt.css im selben Verzeichnis ist, wie die html-Datei. Der Hintergrund für den Body gehört auch in die CSS.
Quellcode haupt.css
Hier wird’s aber unanständig…
Sehe ich das richtig, daß die css mit einer geschweiften Klammer beginnt? Die gehört da nicht hin.
Sodann sollte man die Einrichtung für die Tags in der gleichen Reihenfolge anlegen, wie die Tags in der html-Datei auftauchen, also mit body beginnen.
{
.tabelle {border-collapse:collapse;border:thin solid
Hier legst Du eine Klasse mit dem Namen „tabelle“ an - benutzen tust Du sie nicht…
grey;background-color:orange;color:black;filter:alpha(opacity=70);opacity:0.7;-moz-opacity:0.7;-khtml-opacity:0.7;}
auch hier sind Einrückungen und Umbrüche übersichtsfördernd…
.tabelle td {border:thin solid
grey;background-color:lightorange;color:white;filter:alpha(opacity=70);opacity:0.7;-moz-opacity:0.7;-khtml-opacity:0.7;}
Hier legst Du Eigenschaften für eine Tabellenzelle innerhalb eines irgendwas (vermutlich eine Tabelle) der Klasse „tabelle“ an. Damit haben manche IE-Browser so ihre Probleme, denn td steht nicht direkt im table, sondern dazwischen ist noch tr.
.tabell {border-collapse:collapse;border:thin solid
grey;background-color:orange;color:black;}
.tabell td {border:thin solid
grey;background-color:lightorange;color:white;filter:alpha(opacity=70);opacity:0.7;-moz-opacity:0.7;-khtml-opacity:0.7;"}
Neue Klasse, diesmal mit dem Namen „tabell“ - die perfekte Methode, Dich selber fertig zu machen - besser ist es, Namen so zu vergeben, daß sie für Dich sinnvoll und leicht zu unterscheiden sind; z.B. „rotetabelle“ und „blauetabelle“, oder so.
Außerdem hängt da ein unmotiviertes Gänsezeichen am Ende rum…
.fieldset {border:thin solid grey;width:250px;height:250px}
Noch 'ne Klasse, diesmal „fieldset“
#feld {border:thin solid grey; background-color:yellow;
color:black;}
Noch eine Eigenschaftszuweisung - diesmal nicht als Klasse, die innerhalb einer html mehrfach verwendet werden kann, sondern als Individualformat, das innerhalb der html nur einmal verwendet werden darf - übrigens die einzige Zuweisung, die Du in der test.html tatsächlich ansprichst und somit benutzt.
.body
{background-image:url(bg.jpg);background-attachment:fixed;color:yellow}
niemalsniemalsnie einer Klasse einen Namen geben, die als Tag-Bezeichnung schon existiert.
usw.
Hier nun die korrigierte Version der css:
body { background-image:url("bg.jpg");
background-attachment:fixed;
color:yellow; }
.tabelledunkel { border-collapse:collapse;
border:thin solid grey;
background-color:orange;
color:black;
filter:alpha(opacity=70);
opacity:0.7;
-moz-opacity:0.7;
-khtml-opacity:0.7; }
.tabelledunkel tr td { border:thin solid grey;
background-color:lightorange;
color:white;
filter:alpha(opacity=70);
opacity:0.7;
-moz-opacity:0.7;
-khtml-opacity:0.7; }
.tabellehell { border-collapse:collapse;
border:thin solid grey;
background-color:orange;
color:black; }
.tabellehell tr td { border:thin solid grey;
background-color:lightorange;
color:white;
filter:alpha(opacity=70);
opacity:0.7;
-moz-opacity:0.7;
-khtml-opacity:0.7; }
.feldergruppe { border:thin solid grey;
width:250px;
height:250px; }
#feld { border:thin solid grey;
background-color:yellow;
color:black; }
.knopf { border:thin solid darkred;
background-color:yellow;
color:red; }
.osaris { background-image:url("bg.jpg");
color:darkred; }
.baby { background-color:darkred; }
Beachte bitte, daß ich oben die Eigenschaften von body ändere. Ich gebe direkt den zu verändernden Tag an - ohne den Punkt vorne, der einen Klassennamen auszeichnet. So werden die Angaben benutzt, ohne daß Du im html-Quelltext schreiben müsstest.
Willst Du z.B. die Klasse „knopf“ benutzen (Deine ursprünglich als .button benannte Klasse), kommt in den html-code
Probier so mal…
Gruß
Sibylle
Ein Menü im Markup bleibt ein Menü, aber die Farbe, Position, Größe usw. desselben sind variabel und im CSS. Dementsprechend haben Bezüge zu diesen Eigenschaften in IDs und Klassen nichts verloren.
declarations.