Base.css - Versionsgeschichte

Carsten Euwens am 28. August 2006 um 21:03 Uhr

2006-08-28T21:03:25Z

Carsten Euwens am 28. August 2006 um 20:58 Uhr

2006-08-28T20:58:53Z

Carsten Euwens am 28. August 2006 um 20:01 Uhr

2006-08-28T20:01:13Z

Neue Seite

<div class="breadcrump">Sie sind hier: [[Hauptseite]] / [[Papoo CSS Layout]] / [[CSS Grundgerüst]] / [[base.css]]</div>
=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 ###################################################################
** ######################################################################################################
*/

#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. */
#col1 {
float: left;
width: 28%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
}

#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 */
}

#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. */
#col1 {z-index: 3;}
#col3 {z-index: 1;}
#col2 {z-index: 5;}
#col1_content {z-index: 4;}
#col3_content {z-index: 2;}
#col2_content {z-index: 6;}

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

#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;}

@@ Zeile 6: / Zeile 6: @@
- /* ############################
+/* ############################
- ** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.highresolution.info/webdesign/yaml/)
+** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.highresolution.info/webdesign/yaml/)
- ** #################################
+** #################################
- **
+**
- **  YAML Version: 2.0
+**  YAML Version: 2.0
- **  Dateiversion: 22.12.05
+**  Dateiversion: 22.12.05
- **
+**
- **  Datei       : base.css
+**  Datei       : base.css
- **  Funktion    : Basis-Stylesheet
+**  Funktion    : Basis-Stylesheet
- **
+**
- **  Don't make any changes in this file. Any changes should be placed in basemod-stylefiles.
+**  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 */
+/* Vertikalen Scrollbalken im Firefox erzwingen */
- body {
+html {height:101%}
- 	   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.
+* Aussehen der Webseite in unterschiedlichen Browsern vereinheitlicht.
 **
 ** Achtung: Gleichzeitig wird damit jedoch das extreme Zoom-Verhalten im Internet Explorer heraufbeschworen
@@ Zeile 59: / Zeile 57: @@
 #col3
+{
-	width:auto;
+width:auto;
-   	margin-left: 31%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
+margin-left: 31%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
-   	margin-right: 19%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
+margin-right: 19%; /* Standard-Wert, falls keine anderen Vorgaben gemacht werden */
+}
@@ Zeile 90: / Zeile 88: @@
 /* Cleafix-Methode zum Clearen der Float-Umgebungen */
 .clearfix:after {
-    content: ".";
+content: ".";
-    display: block;
+display: block;     height: 0px;
-     height: 0px;
+clear: both;
-    clear: both;
+visibility: hidden;
-    visibility: hidden;
+}
 /* Diese Angabe benötigt der Safari-Browser zwingend !! */

@@ Zeile 6: / Zeile 6: @@
-  /* ######################################################################################################
+  /* ############################
-  ** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.highresolution.info/webdesign/yaml/) #
+  ** # "Yet Another Multicolum Layout" (c) by Dirk Jesse (http://www.highresolution.info/webdesign/yaml/)
-  ** ######################################################################################################
+  ** #################################
   **
   **  YAML Version: 2.0
@@ Zeile 42: / Zeile 42: @@
 * {margin:0; padding:0; border:0; font-size: 100%;}
-/* ######################################################################################################
+/* ######################################
-** ### DIV-Container des Basislayouts ###################################################################
+** ### DIV-Container des Basislayouts ###
-** ######################################################################################################
+** #######################################
 */
@@ Zeile 50: / Zeile 50: @@
-/* Die Breiten-Verhältinisse werden nach "dem goldenen Schnitt" im Verhältnis 5 : 8 : 3 (ca. 31% : 50% : 19%) unterteilt. */
+/* Die Breiten-Verhältinisse werden nach "dem goldenen Schnitt"
 #col1 {
 	float: left;
@@ Zeile 82: / Zeile 83: @@
 #footer { clear:both; width:auto; }
-/* ######################################################################################################
+/* ###############################################
-** ### Markupfreie CSS-Floatclearing-Lösungen ###########################################################
+** ### Markupfreie CSS-Floatclearing-Lösungen ####
-** ######################################################################################################
+** ###############################################
 */
@@ Zeile 114: / Zeile 115: @@
+}
-/* ######################################################################################################
+/* ####################################################
-** ### Standard-Formatierungen für Listen & Zitate ######################################################
+** ### Standard-Formatierungen für Listen & Zitate ####
-** ######################################################################################################
+** ########################################################
 */