Base.css
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/) | |
− | + | ** ################################# | |
− | + | ** | |
− | + | ** 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 | /* 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 | ** 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; | |
− | + | margin-left: 31%; /* 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: "."; | |
− | + | display: block; height: 0px; | |
− | height: 0px; | + | clear: both; |
− | + | 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
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;}