@charset "ISO-8859-1"; /* Zeichencodierung der CSS Seite - Nähere Info: http://de.selfhtml.org/inter/zeichenkodierungen.htm */
body
{
font: 78%/1.5 arial; /* Std. verwendete Schrifttypen auf der Seite, wenn nicht näher definiert */
background: white url(p_mathe.JPG); /* Hintergundbild der Homepage */
text-align: center; /* Ausrichtung des Textes in der Homepage (wenn nicht näher definiert) */
padding: 0; /* Innenabstand aller Elemente der Homepage (wenn nicht näher definiert) */
margin: 1em; /* Außenabstand aller Elemente der Homepage (wenn nicht näher definiert) */
}
#container {
width: 650px; /* Breite des Conainers */
background: #EAE7F9; /* Hintergrundfarbe des Containers */
text-align: left; /* Textausrichtung im Container */
border: 4px solid #555555; /* Stärke und Farbe des Containerrandes */
margin: 0em auto; /* Ausrichtung des Containers(0 = Abstand von oben auto = zentriert) */
}
#toptext {
background: transparent; /* Texthintergrund im Bereich oberhalb des Menüs */
font-style: italic; /* Textschriftart im Bereich oberhalb des Menüs */
text-align: center; /* Textausrichtung im Bereich oberhalb des Menüs */
font-weight: bold; /* Textstärke im Bereich oberhalb des Menüs */
font-size: 1.2em; /* Textgröße im Breich oberhalb des Menüs */
color: #333333;
}
#toptext a {
color: blue; /* Farbe von aktiven Elementen ( "" z.B. Hyperlinks) im Content-Bereich */
font-weight: bold; /* Textstärke von aktiven Elemente im Toptext-Bereich */
}
#toptext strong {
font-size: 1.2em; /* Textgröße im Bereich oberhalb des Menüs innerhalb des Tags "" */
}
h3 {
font-size: 1.2em; /* Größe aller als "h3" gekennzeichneten Texte */
font-weight: bold; /* Stärke aller als "h3" gekennzeichneten Texte */
color: #333333; /* Farbe aller als "h3" gekennzeichneten Texte */
}
h2 {
font-size:2em; /* Größe aller als "h2" gekennzeichneten Texte */
color: #333333; /* Farbe aller als "h2" gekennzeichneten Texte */
}
h1 {
height: 200px; /* Höhe des Banners */
background: url(p_toppic.jpg) bottom center no-repeat; /* Link und Platzierung des Banners */
text-align:center; /* Textausrichtung für optionalen Text im Banner */
margin: 5px 0 0 0; /* Abstand vom oberen Containerrand */
}
#nav, #nav ul {
float: left; /* Ausrichtung der Menüpunkte - "left" = als Blockelement, links von den umfließenden Elementen platziert */
width: 650px; /* Breite des gesamten Menüblocks */
list-style: none; /* Aufzählungszeichen im Menü - "none" = keine Aufzählungszeichen */
line-height: 1em; /* Höhe der Menüzeile - 1em entspricht normaler Texthöhe */
background: #F9F9EF; /* Hintergrundfarbe der Menüzeile */
font-weight: bold; /* Textstärke im Menü (nicht im Untermenü) */
font-size: 1.04em; /* Textgröße im Menü (nicht im Untermenü) */
padding: 0em; /* Innenabstand vom Menürand zum Text */
border: solid #555555; /* Rahmenfarbe des Menübalkens */
border-width: 3px 0; /* Rahmenstärke des Menübalkens */
margin: 0 0 0 0; /* Abstände des Menüblocks zu übrigen Containerinhalt */
}
#nav a {
display: block; /* block = Text wird als Block-Element dargestellt */
color: #444444; /* Textfarbe im Dropdown-Menü */
text-decoration: none; /* none = Kein Effekt zur Texthervorhebung */
padding: 0.25em 0.25em; /* Textabstand zum Rand innerhalb des Menüs (erster Wert von links, zweiter Wert von oben */
}
#nav li {
float: left; /* Das mit float formatierte Element wird in ein Block-Element gewandelt und links von den Elementen plaziert, die es umfließen. */
width: 10em; /* Breite eines Menübuttons (nicht im Untermenü) */
}
#nav li ul {
position: absolute; /* Poistionierung der Untermenü-Elemente damit diese nicht dem Fluss der Block-Elemente unterliegen */
left: -999em; /* Positionierung des Untermenüs wenn kein mouse-over vorliegt */
height: auto; /* Höhe des Untermenüs orientiert sich an der Anzahl der Untermenüpunkte */
font-size:1em; /* Textgröße im Untermenü */
font-weight: bold; /* Textstärke im Untermenü */
width: 15em; /* Breite der Untermenüs */
border-width: 2px; /* Rahmenbreite des Untermenüs */
margin: 0em 1em; /* Verschiebung des Untermenüs um eine Einheit nach rechts - optischer Effekt, nicht unbedingt nötig - Geschmackssache */
}
#nav li li {
padding-right: 1em; /* Breite des Hover-Balkens im Dropdown-Menü in Relation zur Menübreite */
font-size:1em; /* Schriftgröße im Dropdown-Menü */
font-weight:bold; /* Textstärke im Untermenü (Dropdown) */
width: 14em; /* Breite des Hover-Balkens im Dropdown-Menü */
}
#nav li ul a {
width: 14.5em; /* Textbreite im Dropdownmenü bis Zeilenumbruch */
}
#nav li ul ul {
margin: -1.75em 0 0 15em; /* Abstände wo das 2te Untermenü positioniert wird in Relation zum 1sten Untermenü */
}
/* die folgenden Werte bestimmen die Einblendeffekte des Untermenüs - sie müssen einerseits die nächste Ebene einblenden,
aber die übernächste ausgeblendet lassen damit nicht das volle Untermenü sofort aufklappt wenn man über den button hovert
Exakte Beschreibung und Anleitung wie man diese Menüsteuerung aufbaut unter http://www.htmldog.com/articles/suckerfish/dropdowns/ */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em; /* Platzierung der Untermenüs wenn kein hoover aktiv ist, durch den negativen Wert nach links verschoben (somit ausserhalb des Browserbereichs) */
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto; /* gibt an wo das Menü bei mouse-over eingeblendet wird, der Wert "left: auto" besagt durch den "Umfließen" Befehl (siehe #nav li) dass das Untermenü direkt an das Objekt links davon anschließen soll */
}
#nav li:hover, #nav li.sfhover {
background: #EAE7F9; /* Farbe des Hover-Bereichs im Menü und Dropdown-Menü */
}
#content {
clear: left; /* beendet das Umfließen aus den Menü-Einstellungen */
text-align: center; /* Ausrichtung des Textes im Content-Bereich */
padding: 0.5em; /* Seiteninnenabstand im Content-Bereich */
font-style: italic; /* Textschriftart im Content-Bereich */
color: #222222; /* Textfarbe im Content-Bereich */
}
#content a {
color: blue; /* Farbe von aktiven Elementen ( "" z.B. Hyperlinks) im Content-Bereich */
font-weight: bold; /* Textstärke von aktiven Elemente im Content-Bereich */
}