/*So wird ein Kommentar in ein Stylesheet eingefügt*/
/* Dies ist ein Stylesheet-Dokument (mystyle.css) zur externen Formatierung von html Dateien.
Die Datei mit der Endung .css wird in das html-Dokument in den Head-Tag so eingebunden:
Das gilt, wenn die css-Datei sich im gleichen Verzeichnis befindet wie die html-Datei.
Andernfalls muss die Datei mit dem absoluten oder relativen (bezogen auf das Verzeichnis der html-Datei)
Dateipfad eingebunden werden.*/
/* css-Formate bestehen aus einer oder mehreren Eigenschaften und Wertzuweisungen an diese Eigenschaften.
So kann man beispielsweise ein Format für Überschriften 1. Ordnung definieren und für Eigenschaften
wie Schriftgröße, Schriftfarbe und Absatz-Abstand entsprechende Werte bestimmen.*/
/* Die css-Formatierung setzt sich aus dem Selektor, der die gewünschten Elemente selektiert, und einer
Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:
Selektor { Eigenschaft:Wert; }
Die Kombination aus Eigenschaft und Wert in geschweiften Klammern wird als Deklaration bezeichnet.
Deklarationen mehrerer Eigenschaften für das gleiche Element werden durcn Semikolons abgetrennt.
Bei umfangreichen Deklarationen schreibt man die einzelnen eigenschaften und ihre wertzuweisung meist so untereinander:
Selektor {
Eigenschaft1:Wert1;
Eigenschaft2:Wert2;
...
} */
/*so, nun geht's los: */
/* Hier wird definiert, welchen Hintergrund der Body-Bereich hat.
Die Hintergrundgrafik legt sich hier über die Hintergrundfarbe.
sie dient nur als Beispiel zur Einbindung.
Ich habe sie deshalb auskommentiert.
Außerdem wird der Bereich, in dem der Body-Inhalt auf dem Monitor
zu sehen ist, auf die mittleren 60% der Bildschirmbreite begrenzt.
Margin und Padding müssen nach dem Hintergrundbild definiert werden!*/
body {
border:solid 0px black; /* Nur zur Sichtbarmachung des Bodybereichs */
background-image:url("../Grafiken/Hintergrund_dunkel.jpg");
background-repeat:repeat;
background-attachment:fixed; /* Der IE7 interpretiert offenbar background-attachment:fixed nur, wenn vorher das Attribut background-repeat gesetzt wurde. */
margin-top:0.5em;
min-width:30em; /*Mindestbreite verhindert Anzeigefehler in modernen Browsern */
/*font-size:100.01%; /*um Fehler bei der Schrifgrößenänderung im Internet-Explorer zu vermeiden*/
font-size:14px;
}
/* Hier wird die Schriftauszeichnung des gesamten Inhalts vorformatiert. Der Selektor * steht hier für alle Elemente.
Natürlich werden nur solche berücksichtigt, die auch Schrift enthalten. Die Größenbezeichnung em ist eine relative.
Wie 1 em in jedem Browser definiert wird, ist unterschiedlich. */
* { font-family:Helvetica,Arial,sans-serif;}
p { color:white;/*#003366;*/}
a { color:white;}
/* Es folgen die Formatierungen von Überschriften, Listenpunkten und zentrierten Elementen: */
h1 { font-size:1.6em; }
h2 { font-size:1.4em; }
h3 { font-size:1.3em; }
h4 { font-size:1.2em; }
h1, h2, h3, h4 {
color:white;/*#003366;*/;
font-weight:200;
text-align:center;
margin-top:1em;
}
.zentriert{
text-align:center;
}
li { font-size:0.8em;
color:white;/*#003366;*/
line-height:130%;
list-style-position:outside; /* Bedeutet, das mit umgebrochene Zeilen innerhaklb des Listenpunktes eingerückt werden. */
}
ul { list-style-type:circle; color:white;} /*Art des Listenzeichens, hier ausgefüllter Kreis */
#Seitenname { color:white; }
#Impressum { color:white; }
div.scrollen { width: 680px;
height: 350px;
overflow: AUTO;
padding: 1em;
margin: auto;
background: #FFFFCC;
border: solid 1px black;
}
.scrollen { color:#003366;; }
/*Definition eines Bereichs mit der Eigenschaft: beim Scrollen fixiert - für ein mit der id (identifikationsname) bezeichneten Element.
Im html-Dokument wird dieser Bereich mit
...
festgelegt. Dieser Bereich wird nachher für das Navigationsmenü verwendet.
Das Problem ist: ältere Browser verstehen die CSS-Syntax dazu nicht. */
#fixiert {
/*background-image:url('Grafiken/Navigation.gif');*/
/*background-repeat:no-repeat;*/
position: absolute;
top: 1em; left: 0.3em;
width: 7em;
background-color: transparent;
/*border: 1px solid silver;*/
}
/* nur fuer moderne Browser! Diese Zeile wird von alten Browsern ignoriert. Warum sie nötig ist und was sie macht, ist allerdings ein Rätsel. */
html>body #fixiert {
position: fixed;
}
#Mittelbereich {
margin-left: 7.5em; /*Der Inhaltsbereich wird mit Margin-left auf Abstand zum Menü gebracht */
max-width: 750px;
padding-top: 1em;
/*border: solid 1 white;
background-color: transparent; /* zu Testzwecken */
}
#Inhalt { /*Hier wird die Formatierung des Bereichs definiert, der im div-Block-Inhalt liegt */
margin:auto;
padding:1em;
/*border-left: 3px outset grey; border-top: 3px outset grey; border-right: 1px outset silver; border-bottom: 1px outset silver;*/
/*max-width:750px;*/
}
/* versteckt vor Netscape 4, kann diese Zeile nicht interpretieren */
* #Inhalt {
background-color: transparent;/*#ffffe0;*/
}
#Inhalt p { /* Gilt für alle Absätze, die im div-Block liegen, der mit der id="Inhalt" gekennzeichnet ist*/
font-size: ;
margin: 1em 0;
}
div#info_box { /*Hier wird ein Box-Bereich definiert, in dem der Einleitungstext für jede Seite steht */
position:relative;
margin: 0 auto;
padding:0;
width: 100%; /*entspricht Breite der Rahmengrafik*/
background-color:#FFFFCC;
}
div#info_box_top_L { /*linke, obere Ecke */
float:left;
margin:0;
padding:0;
background-image:url('../Grafiken/Rahmen_oben_links.gif');
background-position: right bottom;
background-repeat:no-repeat;
width: 30px;
height:15px;
}
div#info_box_top_M { /*oberer Rahmen */
margin:0;
padding:0;
background-image:url('../Grafiken/Rahmen_oben_Mitte.gif');
background-position: left bottom;
background-repeat:repeat;
height:15px;
}
div#info_box_top_R { /*rechte, obere Ecke */
float:right;
margin:0;
padding:0;
background-image:url('../Grafiken/Rahmen_oben_rechts.gif');
background-position: right bottom;
background-repeat:no-repeat;
width: 30px;
height:15px;
}
div#info_box_bottom_L { /*linke, untere Ecke */
float:left;
margin:0;
padding:0;
background-image:url('../Grafiken/Rahmen_unten_links.gif');
background-position: left top;
background-repeat:no-repeat;
height:30px;
width: 15px;
}
div#info_box_bottom_M { /*unterer Rahmen */
margin:0;
padding:0;
background-image:url('../Grafiken/Rahmen_unten_Mitte.gif');
background-position: left top;
background-repeat:repeat;
height:15px;
}
div#info_box_bottom_R { /*linke, untere Ecke */
float:right;
margin:0;
padding:0;
background-image:url('../Grafiken/Rahmen_unten_rechts.gif');
background-position: right top;
background-repeat:no-repeat;
height:30px;
width: 15px;
}
div#info_box_inhalt { /*Inhalt der info_box_box*/
width:;
margin:0px;
padding: 0 15px;
border-style:solid;
border-width: 0px 0px 0px 1px;
border-color:#FFFFCC silver #FFFFCC silver;
background-image:url('../Grafiken/Rahmen_rechts.gif');
background-position: right top;
background-repeat: repeat-y;
font-size:1.2em;
color:blue;
}
/*alle Absätze, die im elternelemet div mit der id info_box_inhalt enthalten sind:*/
div#info_box_inhalt p {
font-family:"Myriad Condensed Web",Helvetica,Arial,sans-serif;
font-size:1.1em;
color:navy;
/*margin:0px;*/ /* Das funktioniert komischerweise nicht */
padding: 0 1em;
}
/*alle klinks, die im elternelemet div mit der id info_box_inhalt enthalten sind:*/
div#info_box_inhalt a {
font-family:"Myriad Condensed Web",Helvetica,Arial,sans-serif;
/*font-size:1.1em; */
color:navy;
/*margin:0px;*/ /* Das funktioniert komischerweise nicht */
}
/*alle kursiven Texte, die im elternelemet div mit der id info_box_inhalt enthalten sind:*/
div#info_box_inhalt i {
font-family:"Myriad Condensed Web",Helvetica,Arial,sans-serif;
font-size:;
color:navy;
}
.darkbox { /*Dunke Box fuer Texte*/
color: white;
background-image:url(../Grafiken/bg-trans.png);
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
margin-top: 20px;
margin-bottom: 20px;
border-width:1px 2px 2px 1px;
border-style:solid;
border-color:#898F9C black black black;
}
/*Tabellen-Layout*/
table {
border:0px;
/*table-layout:fixed;*/
width:100%;
font-size:0.9em;
margin: 0px;
padding:0px;
}
caption {
color:white;
align:top;
}
tr {
min-height:30px ;
}
td {
color:white;
vertical-align:top;
border:1px solid #465D75; /*border zu testzwecken auf 0 gesetzt*/
padding: 0.5em;
}
th {
background-image:url(../Grafiken/bg-trans.png); /*zu Testzwecken hinzugefügt*/
color:white;
border:1px solid #465D75; /*border zu testzwecken auf 0 gesetzt*/
padding: 0;
}
.cover {
padding:2px 0 2px 1em;
/*width:100px;*/
}
.table {
color:white;
font-weight:bold;
/*text-decoration:none;*/
}
div #tableinhalt { /*definiert den Hintergrund für die Tabelle, die links eine über die ganze Spalte gehende Grafik haben soll */
/*background-color:#264655; zu Testzwecken entfernt */
/*background-image:url(Grafiken/baum_mit_Pfeil_web.jpg); Zu Testzwecken entfernt */
background-image:url(../Grafiken/bg-trans.png); /*zu Testzwecken hinzugefügt*/
/*background-repeat:no-repeat;
background-position:left top;*/ /* zu Testzwecken entfernt*/
padding: 0;
}
#Fusszeile { /*ein bestimmer Bereich