Base.css

aus Papoo Dokumentation, der freien Wissensdatenbank
(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
M
 
 
(Eine dazwischenliegende Version von einem Benutzer wird nicht angezeigt)
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;
+
}  
+
  
 +
/* 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       
 
/* 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
 
** Achtung: Gleichzeitig wird damit jedoch das extreme Zoom-Verhalten im Internet Explorer heraufbeschworen
Zeile 42: Zeile 40:
 
* {margin:0; padding:0; border:0; font-size: 100%;}
 
* {margin:0; padding:0; border:0; font-size: 100%;}
  
/* ######################################################################################################
+
/* ######################################
** ### DIV-Container des Basislayouts ###################################################################
+
** ### DIV-Container des Basislayouts ###
** ######################################################################################################
+
** #######################################
 
*/
 
*/
  
Zeile 50: Zeile 48:
  
  
/* 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"  
 +
im Verhältnis 5 : 8 : 3 (ca. 31% : 50% : 19%) unterteilt. */
 
#col1 {
 
#col1 {
 
float: left;
 
float: left;
Zeile 58: Zeile 57:
 
#col3
 
#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 82: Zeile 81:
 
#footer { clear:both; width:auto; }
 
#footer { clear:both; width:auto; }
  
/* ######################################################################################################
+
/* ###############################################
** ### Markupfreie CSS-Floatclearing-Lösungen ###########################################################
+
** ### Markupfreie CSS-Floatclearing-Lösungen ####
** ######################################################################################################
+
** ###############################################
 
*/
 
*/
  
 
/* Cleafix-Methode zum Clearen der Float-Umgebungen */
 
/* Cleafix-Methode zum Clearen der Float-Umgebungen */
 
.clearfix:after {
 
.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 !! */
 
/* Diese Angabe benötigt der Safari-Browser zwingend !! */
Zeile 114: Zeile 112:
 
}
 
}
  
/* ######################################################################################################
+
/* ####################################################
** ### Standard-Formatierungen für Listen & Zitate ######################################################
+
** ### Standard-Formatierungen für Listen & Zitate ####
** ######################################################################################################
+
** ########################################################
 
*/
 
*/
  

Aktuelle Version vom 28. August 2006, 22:03 Uhr

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

'Persönliche Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Werkzeuge