/*
(c) Juergen Schwind <info@juergen-schwind.de>
@ 09.06.2009
Die Funktionsweise jedes wichtigen CSS-Element wird erklärt.
Alle Inhalten können als Grundlage für eigene Projekte verwendet werden.
Getestet mit: Firefox 2/3, Internet Explorer 6/7/8, Safari 3, Chrome 1/2 und Opera 8/9
*/
* {
/* Alle Ränder und Aussen- und Innenabstände auf 0 stetzen */
margin:0;
padding:0;
border: none;
}
html {
/* Höhe des HTML Elements definieren */
height: 100%;
}
body {
/* Höhe des BODY Elements definieren */
height: 100%;
/* Farbverlauf als Hintergrund setzen, beginnend links oben und nur auf der X-Achse wiederholend */
background:#E06846 url(bg_verlauf.jpg) top left repeat-x;
}
#container_frame {
/* Verschiebt die Hauptbox um 18 Pixel nach links. Dadurch wird bei kleinen Bildschirmen der Schatten links aus dem Bildschirm geschoben */
left:-18px;
/* Zentriert die den Div-Container */
margin:auto auto;
/* minimale Höhe von 100% wenn der Content nicht die ganze Seite füllt */
min-height:100%;
position: relative;
width:884px;
/* Setzt den Hintergrund inklusive transparentem Schatten */
background:url(bg_content.png) top left repeat-y;
/* Content ausserhalb den Containers verhindern */
overflow:hidden;
}
* html #container_frame {
/* IE fix */
height: 100%;
}
#container_mainframe {
/* Link und Rechts 18 Pixel Abstand zur Seite, Contentbereich definiert ohne Schatten */
margin-left:18px;
margin-right:18px;
/* Hintergrund auf weiß falls Bilder im Browser deaktiviert sind */
background-color:#FFF;
overflow:hidden;
}
#container_header {
width:848px;
height:60px;
background-color:#E7362E;
overflow:hidden;
}
#container_content {
width:799px;
/* margin-bottom muss die Gesamthöhe der Fußzeile sein */
margin-bottom: 32px;
overflow:hidden;
}
#container_content_left {
float:left;
width:619px;
overflow:hidden;
}
#container_content_right {
float:right;
width:180px;
padding-top:8px;
overflow:hidden;
}
#container_footer {
position: absolute;
bottom:0;
left: 18px;
width: 848px;
/* Höhe der Fußzeile (siehe #container_footer_content) */
height:32px;
overflow:hidden;
}
#container_footer_content {
/* Höhe der Fußzeile (24+4+4) */
margin:4px;
height:24px;
background-color: #A6846B;
}
* html #container_footer {
/* IE fix */
bottom: -1px;
}
.block_end {
clear:both;
}