/* ###################################################################################################### ** # www.kuehl-beschallung.de ########################################################################### ** ###################################################################################################### ** ** Dateiversion: 07.05.06 ** letztes Update: 08.05.06 ** Datei : basemod.css ** Funktion : Basis-Modifikation ** */ * {margin:0; padding:0; border:0; font-size: 1em;} body { /* Vertikalen Scrollbalken im Netscape & Firefox erzwingen. Dies verhindert, dass zentrierte Layouts ** um 10 Pixel springen wenn der Seiteninhalt kleiner wird als die Höhe des Browserfensters. */ min-height: 101%; /* FIX: Verhindert, dass positionierte Elemente nicht verschoben werden when die Größe des Browser Fensters geändert wird. */ position: relative; background: url("../../../gfx//design/bg-body.gif") center top no-repeat #FDF7F0; text-align: center; font-size: 83%; font-family: Verdana, Arial, Helvetica, sans-serif; } /* Hier kann ein umlaufender Rand um die gesamte Webseite erzeugt werden */ #page_margins {width: 100%; background: url("../../../gfx//design/bg-main.gif") center top repeat-y; text-align: center;} #page {margin: 0 auto 0 auto; width: 950px; background: url("../../../gfx//design/bg-page.jpg") no-repeat;} /* Formatierung der Kopfbereiches */ #header { width: 100%; height: 178px; clear: both; float: right; color: #393939; text-align: left; } /* ###################################################################################################### ** ### Formatierung der Inhaltsspalten ################################################################## ** ###################################################################################################### */ #main { clear:both; width: 100%; z-index: 10; color: #000; text-align: left; background: url("../../../gfx//design/bg-main-container.gif") center bottom no-repeat; min-height: 450px; } #col1, #col2, #col3 { position: relative; } /* #col1 wird zur MITTLEREN Spalte */ #col1 { float: left; width: 533px; margin: 0 0 0 200px; color: #4d4d4d; line-height: 1.1em; } /* #col2 ist die RECHTE Spalte */ #col2 { width: 224px; float: right; margin: -6px -9px 0 0; } /* #col3 wird zur LINKEN Spalte */ #col3 { float: left; width: 179px; margin: 4px 0 0 -733px; background: url("../../../gfx//design/bg-nav.gif") left top repeat-y; font-size: 110%; } #col1_content, #col2_content { position: relative; } #col1_content {padding: 12px 0 30px 7px; font-size: 90%; margin-right: 5px; color: #212121; background: inherit;} #col2_content {min-height: 400px; padding: 27px 0 10px 10px; font-size: 80%; color: #000;} /* Formatierung der Fußzeile */ #footer { height: 88px; width: 950px; float: left; display: block; margin-bottom: -1px; background: url("../../../gfx//design/bg-footer.gif") left bottom no-repeat; } /* ######## Sonderfall: 2-Spalter = ####### */ /* Hintergrundbilder ändern */ #two-cols #page_margins {background: url("../../../gfx//design/bg-main_two-cols.gif") center top repeat-y;} #two-cols #page {background: url("../../../gfx//design/bg-page_two-cols.jpg") no-repeat;} #two-cols #main {background: url("../../../gfx//design/bg-main-container_two-cols.gif") center bottom no-repeat;} #two-cols #footer {background: url("../../../gfx//design/bg-footer_two-cols.gif") left bottom no-repeat;} /* Anpassung der Mittelspalte */ #two-cols #col1 { width: 645px; margin: 0 0 0 200px; } /* Ausblenden der rechten Spalte*/ #two-cols #col2 {display: none;} /* Navigation Anpassung des margins */ #two-cols #col3 { margin: 4px 0 0 -845px; } /* ###################################################################################################### ** ### Markupfreie CSS-Floatclearing-Lösungen ########################################################### ** ###################################################################################################### */ /* Clearfix-Methode zum Clearen der Float-Umgebungen */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Diese Angabe benötigt der Safari-Browser zwingend !! */ .clearfix {display: block;} /* Overflow-Methode zum Clearen der Float-Umgebungen */ .floatbox { overflow:hidden; }