/* http://www.thestyleworks.de/tut-art/layout_div_2.shtml */ body { background-color:#1e90ff; /* Hindergrund: neu dunkel- blau!! */ font-family:Arial; } div.frame{ /* Der äußere Container der alle anderen beinhaltet mit Maßen ! */ margin-left: auto; margin-right: auto; width: 795px; background-color: #1e90ff; /* Hindergrund-Frame dunkel-blau (gesamt-Container) bis auf Footer, fast immer verdeckt ! */ min-height: 100%; } div.header{ margin-top: 20px; /* Abstand Header- Links nach Bildschirmoberkante, durch

class= weiß schon eine Zeile gegeben! */ width:100%; height: 30px; background-color:#1e90ff; /* Hindergrund-Frame blau #1e90ff; } div.blocktext { /* Container, Klasse Blocktext */ text-align:center; color: #ffffff; /* Definiert die Farbe des Textes im Div-Blocktext! */ padding:1px; } div.banner{ margin-top: 00px; width:100%; height: 70px; /* Definiert die Höhe des Banners wo das Banner-Foto drin ist */ background-color:light-blue; } p.weiss { color: white; /* Textfarbe in Paragraf, Klasse class= "weiss" */ } p.zeilenhoehe {line-height: 1; } p.rot { color: red; /* Textfarbe in Paragraf, Klasse class= "rot" */ } .linkfarbe1 { color:white; } /* Linkfarben in Klasse a href class="linkfarbe1" (z.B. im Header) */ .color2 { color:blue;} .color3 { color:green;} div.textcontainer{ font-size:94%; /* Legt die Textgröße im Textcontainer fest */ letter-spacing:0.05em; /* Buchstabenabstand im Textcontainer fest */ margin-top: 0px; /* Abstand Textcontainervom oberen Containerrand */ padding-top: 20px; /* Abstand Text vom oberen Containerrand */ padding-bottom: 0px; padding-right: 10px; /* Abstand Text vom rechten Containerrand */ padding-left: 10px; /* Abstand Text von linken Containerrand */ text-align: justify; /* bewirkt Blocksatz im Textcontainer */ float: right; margin-right: 00; width:600px; /* Gesamtbreite des Textcontainer, Achtung Padding rechts und links musste abgezogen werden!! */ min-width:400px; min-height: 57%; /* stellt die minimle Höhe des Textcontainer ein!! */ background-color:#Ffffff; /* Hintergrundfarbe Textcontainer */ } div.textcontainer p { text-align:justify; /* bringt alle p in Textcontainer in den Blocksatz */ } .textcontainer a:link { color:#1e90ff; } /* Linkfarbe im div Textcontainer */ .textcontainer a:visited { color:#1e90ff; } /* Linkfarbe bereits geklickter Links im Textcontainer */ .textcontainer a:active { color:blue; } /* Linkfarbe wenn Link aktiv angeklickt im Textcontainer */ .textcontainer a:hover { color:blue; } /* Linkfarbe wenn Maus über dem Link steht im Textcontainer */ .textcontainer i { color:#0000cc; } /* Erwirkt die Farbe aller Kursiv-Schriften im Textcontainer! */ .header a:link { color:white; } /* Linkfarbe im div Header */ .header a:visited { color:white; } /* Linkfarbe bereits geklickter Links im Header */ .header a:active { color:green; } /* Linkfarbe wenn Link aktiv angeklickt im Header */ .header a:hover { color:yellow; } /* Linkfarbe wenn Maus über dem Link steht im Header */ .footer a:link { color:white; } /* Linkfarbe im div Footer */ .footer a:visited { color:white; } /* Linkfarbe bereits geklickter Links im Footer */ .footer a:active { color:blue; } /* Linkfarbe wenn Link aktiv angeklickt im Footer */ .footer a:hover { color:yellow; } /* Linkfarbe wenn Maus über dem Link steht im Footer */ .tabelletextbox a:link { color:white; } /* Linkfarbe im div Tabelletextbox */ .tabelletextbox a:visited { color:white; } /* Linkfarbe bereits geklickter Links im div Tabelletextbox */ .tabelletextbox a:active { color:black; } /* Linkfarbe wenn Link aktiv angeklickt */ .tabelletextbox a:hover { color:yellow; } /* Linkfarbe wenn Maus über dem Link steht */ /* Linkfarbe im div Linkebox .linkebox a:link { color:white; } */ /* Linkfarbe bereits geklickter Links im Div Linkebox .linkebox a:visited { color:white; } */ /* Linkfarbe wenn Link aktiv angeklickt im Div Linkebox .linkebox a:active { color:black; } */ /* Linkfarbe wenn Maus über dem Link steht im Div Linkebox .linkebox a:hover { color:yellow; } */ .ueberschrift2 a:link { color:white; } /* Linkfarbe in Tabelle Überschrift 2 */ .ueberschrift2 a:visited { color:white; } /* Linkfarbe bereits geklickter Links im Textcontainer */ .ueberschrift2 a:active { color:yellow; } /* Linkfarbe wenn Link aktiv angeklickt im Textcontainer */ .ueberschrift2 a:hover { color:yellow; } /* Linkfarbe wenn Maus über dem Link steht im Textcontainer */ .ueberschrift3 a:link { color:ff9933; } /* Linkfarbe in Tabelle Überschrift 2 */ .ueberschrift3 a:visited { color:ff9933; } /* Linkfarbe bereits geklickter Links im Textcontainer */ .ueberschrift3 a:active { color:yellow; } /* Linkfarbe wenn Link aktiv angeklickt im Textcontainer */ .ueberschrift3 a:hover { color:yellow; } /* Linkfarbe wenn Maus über dem Link steht im Textcontainer */ div.farbcontainer{ /* Layout des Farbcontainers für die Lesetipps! */ background-color: #ffff00; } div.farbcontainer1{ /* Layout des Farbcontainer 1 für die Artikelüberschriften */ background-color: #F4FA58; } div.kleintextcontainer{ font-size:74%; /* Legt die Textgröße im Kleintextcontainer fest */ } div.linkebox{ font-size:100%; /* Legt die Textgröße in der linken Box fest */ margin-top: 10px; float: left; margin-right: auto; width:170px; min-width:150px; min-height: 90%; background-color:#1e90ff; /* Hintergrundfarbe linke- Menü- Box */ color: black; /* Textfarbe der Überschriften über den Fotos in der Linken Box */ } .linkebox h4 { line-height:11pt; /*Zeilenabstand aller h4- Links in linker Box */ font-size: 0.8em; /*Schriftgröße der h4- Links in linker Box */ color: #fffffff; /*Schriftfarbe */ } .linkebox a { display: block; padding: 0.em; font-weight: bold; text-decoration:underline; } .linkebox a:link { color: #fffacd; background-color: #1e90ff; text-decoration:none;} .linkebox a:visited { color: #fffacd; background-color:#1e90ff; text-decoration:none;} .linkebox a:hover { color:#00bfff; background-color: #1e90ff; text-decoration:underline;} /* menü blinkt wenn maus drüber hellblau! */ .linkebox a:active { color: #ffffff; background-color: #1e90ff; text-decoration:underline;} .linketabelle, .linketabelle TD, .linketabelle TH /* Steuert Tabelle, mit Klasse "linketabelle" */ { font-family:arial; /* schriftart */ font-size:13pt; /* schrif-Größe in Tabelle "linketabelle" */ font-weight: 100; /* schrift-Gewicht */ color:white; /* schrift-Farbe */ background-color:#1e90ff; /* Tabellen Hintergrund */ border: solid 0px #000000; /* Keine Rahmenlinie anzeigen in dieser Tabellenklasse */ } .tabelletextbox, .tabelletextbox TH /* Steuert Tabelle, mit Klasse "tabelletextbox" (die blauen Tabellen) */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle "tabelletextbox" */ font-weight: 100; /* schrift-Gewicht */ color:white; /* schrift-Farbe */ background-color:#1e90ff; /* Tabellen Hintergrund */ text-align: justify; border: solid 1px #000000; /* Stärke der Tabellenumrandung in Tabelletextbox */ align="center" } .tabelletextbox TH /* Steuert TH in Tabelle mit Klasse "tabelletextbox" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle "tabelletextbox" */ font-weight: 100; /* schrift-Gewicht */ color:white; /* schrift-Farbe */ text-align: justify; border: solid 0px #000000; /* Stärke der Tabellenumrandung in Tabelletextbox */ padding-top:3px; /* Textabstand nach oben in TH Zelle */ padding-bottom:3px; } .tabelletextbox TD /* Steuert TD in Tabelle mit Klasse "tabelletextbox" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle "tabelletextbox" */ font-weight: 100; /* schrift-Gewicht */ color:white; /* schrift-Farbe */ text-align: justify; border: solid 0px #000000; /* Stärke der Tabellenumrandung in Tabelletextbox */ } .ueberschrift, .ueberschrift TH /* Steuert Tabelle, mit Klasse "ueberschrift" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight: 100; /* schrift-Gewicht */ color:black; /* schrift-Farbe */ background-color:FFc900; /* Tabellen Hintergrund, farbe gelb */ border: solid 1px #000000; /* Stärke der AUSSEREN Tabellenumrandung */ } .ueberschrift TH /* Steuert TH Elemente der Tabelle, mit Klasse "ueberschrift" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight:bold; /* schrift-Gewicht: bold=fett */ color:black; /* schrift-Farbe */ background-color:FFc900; /* Tabellen Hintergrund */ border: solid 0px #000000; /* Stärke der TH Tabellenumrandung */ height:23px; /* Höhe TH Zeilen-Elemente in */ } .ueberschrift TD, /* Steuert die TD der Tabelle, mit Klasse "ueberschrift" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight: 100; /* schrift-Gewicht */ color:black; /* schrift-Farbe */ background-color:FFc900; /* Tabellen Hintergrund */ border: solid 1px black; /* Stärke der TD Tabellenumrandung */ } .ueberschrift2, .ueberschrift2 TH /* Steuert Tabelle, mit Klasse "ueberschrift2" z.B.: Gerne erstellen wir Ihnen ein Angebote.... */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight: 100; /* schrift-Gewicht */ color:black; /* schrift-Farbe */ background-color:ff9933; /* Tabellen Hintergrund, farbe */ border: solid 1px #000000; /* Stärke der AUSSEREN Tabellenumrandung */ } .ueberschrift2 TH /* Steuert TH Elemente der Tabelle, mit Klasse "ueberschrift2" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight: bold; /* schrift-Gewicht: bold=fett */ color:black; /* schrift-Farbe */ background-color:ff9933; /* TH Elemente: Hintergrund Farbe */ border: solid 0px #000000; /* Stärke der TH Tabellenumrandung */ height:23px; /* Höhe TH Zeilen-Elemente in */ } .ueberschrift2 TD, /* Steuert die TD der Tabelle, mit Klasse "ueberschrift" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight: 100; /* schrift-Gewicht */ color:black; /* schrift-Farbe */ background-color:ff9933; /* Tabellen Hintergrund */ border: solid 1px black; /* Stärke der TD Tabellenumrandung */ } .ueberschrift3, .ueberschrift3 TH /* Steuert Tabelle, mit Klasse "ueberschrift2" z.B.: Gerne erstellen wir Ihnen ein Angebote.... */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight: 100; /* schrift-Gewicht */ color:white; /* schrift-Farbe */ background-color:#1e90ff; /* Tabellen Hintergrund, farbe */ border: solid 1px #000000; /* Stärke der AUSSEREN Tabellenumrandung */ } .ueberschrift3 TH /* Steuert TH Elemente der Tabelle, mit Klasse "ueberschrift2" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight: bold; /* schrift-Gewicht: bold=fett */ color:white; /* schrift-Farbe */ background-color:#1e90ff; /* TH Elemente: Hintergrund Farbe */ border: solid 0px #000000; /* Stärke der TH Tabellenumrandung */ height:23px; /* Höhe TH Zeilen-Elemente in */ } .ueberschrift3 TD, /* Steuert die TD der Tabelle, mit Klasse "ueberschrift" */ { font-family:arial; /* schriftart */ font-size:12pt; /* schrif-Größe in Tabelle */ font-weight: 100; /* schrift-Gewicht */ color:white; /* schrift-Farbe */ background-color:#1e90ff; /* Tabellen Hintergrund */ border: solid 1px black; /* Stärke der TD Tabellenumrandung */ } .ueberschrift4, .ueberschrift4 TH /* Steuert Tabelle, mit Klasse "ueberschrift4" verwendet um aufeinander liegende Tabellen mit weißem Feld zu trennen (höhe: 1pX!) { font-family:arial; /* schriftart */ font-size:1pt; /* schrif-Größe in Tabelle */ font-weight: 100; /* schrift-Gewicht */ color:white; /* schrift-Farbe */ background-color:#ffffff; /* Tabellen Hintergrund, farbe */ border: solid 0px #000000; /* Stärke der AUSSEREN Tabellenumrandung */ } .ueberschrift4 TH /* Steuert TH Elemente der Tabelle, mit Klasse "ueberschrift2" */ { font-family:arial; /* schriftart */ font-size:1pt; /* schrif-Größe in Tabelle */ font-weight: bold; /* schrift-Gewicht: bold=fett */ color:white; /* schrift-Farbe */ background-color:#f333ff; /* TH Elemente: Hintergrund Farbe */ border: solid 0px #ffffff; /* Stärke der TH Tabellenumrandung */ height:52px; /* Höhe TH Zeilen-Elemente in */ } .ueberschrift4 TD, /* Steuert die TD der Tabelle, mit Klasse "ueberschrift" */ { font-family:arial; /* schriftart */ font-size:1pt; /* schrif-Größe in Tabelle */ font-weight: 100; /* schrift-Gewicht */ color:white; /* schrift-Farbe */ background-color:#ffffff; /* Tabellen Hintergrund */ border: solid 0px white; /* Stärke der TD Tabellenumrandung */ } div.textcontainer table { font-size:94%; /* Legt die Schriftgröße in Tabellen im Textcontainer fest */ border-spacing:3px; /* Abstand des Tabellentextes in allen Textfenstertabellen vom Tabellenrand */ /* Umrandung der Tabellen Zellen, solid= durchgezogen px legt die Umrandungsdicke fest */ } /* footer aus Self- HTML */ /* Angaben für alle standardkonformen Browser */ body { margin:0; padding:0; font-family:arial; /* font-style:italic; würde überall im body kursiven Text machen */ } div.content_container { padding-bottom:3em; } #header { margin: 0 0 0.5em; background:#1e90ff; text-align:center; padding:10px; } div.footer { position:fixed; color: #ffffff; /* Definiert die Farbe des Textes im Footer!!! */ bottom:0px; background:#1e90ff; text-align:center; /* zentriert Text im Footer!!! */ padding:10px; width:100%; } /* Angaben nur für den Internet Explorer mittels Star-HTML-Hack */ * html, * html body { margin:0; padding:0; height:100%; overflow:hidden; } * html div.content_container { padding:0; height:95%; overflow:auto; } * html div.footer { background:#1e90ff; height:4%; text-align:center; /* zentriert Text im Footer!!! */ padding-top:1%; }