Base.css

Sie sind hier: Hauptseite / Papoo CSS Layout / CSS Grundgerüst / base.css

base.css

Die base.css Datei beinhaltet alle Basis Einstellungen die aus dem HTML Code von Papoo einen 3 Spalter machen. Ohne weitere Anweisungen, sieht man nur mit dieser Datei schon einen 3 Spalter.

Sie sollten an dieser Datei nichts verändern! Alle Änderungen können in der basemod.css vollzogen werden.

/* ######################################################################################################
** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.highresolution.info/webdesign/yaml/) #
** ######################################################################################################
** 
**  YAML Version: 2.0
**  Dateiversion: 22.12.05 
**  
**  Datei       : base.css
**  Funktion    : Basis-Stylesheet
**
**  Don't make any changes in this file. Any changes should be placed in basemod-stylefiles.
*/ 

/* Vertikalen Scrollbalken im Firefox erzwingen */
html {height:101%} 

/* Beseitigung des Rundungsfehlers bei Schriftgrößen im Opera sowie Standardformatierungen */
body { 
	   font-size: 100.01%;
       position: relative; 
	   color: #000; 
	   background: #fff;
	   text-align: left; 
} 

/* Hiermit werden die Randabstände und border aller HTML-Elemente auf Null gesetzt. Damit wird das

• • Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht.
  • Achtung: Gleichzeitig wird damit jedoch das extreme Zoom-Verhalten im Internet Explorer heraufbeschworen
  • Der dafür erforderliche Hack sollte daher nicht vergessen werden, um diese Problem wieder zu
  • beseitigen. Er ist in der Datei "iehacks.css" zu finden.
• /

• {margin:0; padding:0; border:0; font-size: 100%;}

/* ######################################################################################################

• • ### DIV-Container des Basislayouts ###################################################################
  • ######################################################################################################
• /

1. main { clear:both; width: 100%; z-index: 10;}

/* Die Breiten-Verhältinisse werden nach "dem goldenen Schnitt" im Verhältnis 5 : 8 : 3 (ca. 31% : 50% : 19%) unterteilt. */

1. col1 {

float: left; width: 28%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */ }

1. col3

{ width:auto;

  	margin-left: 31%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
  	margin-right: 19%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */

}

1. col2 {

float:right; width: 16%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */ }

/* Der z-Index verhindert, dass im Falle des noch bestehenden IE-Bugs die Texte vor

• • dem Spaltenhintergrund erscheinen. */

1. col1 {z-index: 3;}
2. col3 {z-index: 1;}
3. col2 {z-index: 5;}
4. col1_content {z-index: 4;}
5. col3_content {z-index: 2;}
6. col2_content {z-index: 6;}

1. col1, #col3, #col2 { position: relative; }
2. col1_content, #col3_content, #col2_content { position: relative; }

1. footer { clear:both; width:auto; }

/* ######################################################################################################

• • ### Markupfreie CSS-Floatclearing-Lösungen ###########################################################
  • ######################################################################################################
• /

/* Cleafix-Methode zum Clearen der Float-Umgebungen */ .clearfix:after {

   content: "."; 
   display: block; 
   height: 0px; 
   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; }

/* Clearen der 3 Inhaltsspalten mittels dieses speziellen hr-Tags */ .clear_columns{ content: "."; display: block; height: 0px; font-size: 0px; clear: both; float: left; visibility: hidden; border: 0px; margin-top: -2em; /* erforderlich damit kein Leerraum zwischen Spalten und Footer entsteht */ }

/* ######################################################################################################

• • ### Standard-Formatierungen für Listen & Zitate ######################################################
  • ######################################################################################################
• /

ul, ol, dl { margin: 0 0 1em 0px; } li { margin-left: 1.5em; line-height: 1.5em; }

dt { font-weight: bold; } dd { margin: 0 0 1em 2em; }

blockquote, cite { margin: 0 0 1em 1.5em; font-size: 0.93em; width: auto;}