@charset "UTF-8"; /********************************************************* fluid layout -------------------------------------------------------- #author Tobias Bergmann #version 1.0 #lastmodified 08/06/2009 -------------------------------------------------------- table of contents -------------------------------------------------------- #01 reset #02 base layout #03 different layout variants #04 header #05 content #06 footer -------------------------------------------------------- font-size | basic (defined in -tag) -------------------------------------------------------- 10px = 1.0em 11px = 1.1em 12px = 1.2em (active) @ font-size of the parent element | 0.92em (11px) ------------------------------------------------- 13px: 13px/11px = 1.18em @ font-size of the parent element | 1.2em (12px) ------------------------------------------------- 10px: 10px/12px = 0.83em 11px: 11px/12px = 0.92em 12px: 12px/12px = 1.00em 13px: 13px/12px = 1.08em 14px: 14px/12px = 1.17em 16px: 16px/12px = 1.33em 18px: 18px/12px = 1.50em 20px: 20px/12px = 1.67em @ font-size of the parent element | 1.08em (13px) ------------------------------------------------- 11px: 11px/13px = 0.85em ________________________________________________________*/ /******************************************************************************************************************************************* #01 | reset __________________________________________________________________________________________________________________________________________*/ * { padding:0; margin:0; font-size:100.01%; } html { /* erzwingen vertikaler scrollbars in FF, Opera, Safari und NS, in den IE's sind * die scrollbars eh immer da */ height:100%; margin-bottom:1px; overflow-y:scroll; /* CSS3 */ /* bewirkt, dass eine font-size im body von 1em=10px entspricht, 1.2em=12px usw. */ font-size:62.5%; } img, fieldset { border:0; } ul, ol { list-style:none; } a:link, a:visited { color:#ff5119; text-decoration:none; } a:hover, a:active, a:focus { /* gepunktete linie bei :active, :focus entfernen, ist allerdings schlecht für die * navigation per keyboard. funktioniert nur imm FF + Safari (wenn aktiviert), * nicht im NS, Opera und IE (einschließlich Version 7) */ outline:none; color:#ff5119; } small { font-size:0.83em; /* 10px */ } big { font-size:1.17em; /* 14px */ line-height:1; } i, em, address { font-style:italic; } /******************************************************************************************************************************************* #02 | base layout __________________________________________________________________________________________________________________________________________*/ body { color:#333; background:#fff right bottom fixed no-repeat; font-family:Verdana, Helvetica, sans-serif; font-size:1.2em; /* damit das bg-image oder die bg-color über die ganze breite gehen, wenn das fenster * kleiner skaliert wurde und man horizontal scrollen kann. hier für border und bg-image * von #container. man kann es auch dem #container div direkt zuweisen, allerdings könnte * man ihn dann nicht mehr zentrieren wegen float:left; */ float:left; min-width:100%; border-top:5px solid #ff5119; } #container { position:relative; background:transparent url(../img/bg-standard-menu.png) left top repeat-x; } #header { position:relative; width:708px; padding:0 0 50px 48px; height:100px; color:#ff5119; background:transparent; } #primary, #secondary, #tertiary { position:relative; float:left; min-height:400px; color:#333; overflow:hidden; } /******************************************************************************************************************************************* #03 | different layout variants __________________________________________________________________________________________________________________________________________*/ /* col-1-layout <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ body.col-1 #primary { width:702px; padding:10px 0 0 54px; background:transparent url(../img/bg-content-top.png) right top no-repeat; clear:both; } body.col-1 #primary .content { float:left; width:670px; /* +padding = 702px */ padding:12px 16px 0 16px; background:transparent url(../img/bg-content-middle.png) right top repeat-y; } body.col-1 #primary .bg-bottom { float:left; width:702px; height:10px; background:transparent url(../img/bg-content-bottom.png) right top no-repeat; } /******************************************************************************************************************************************* #04 | header __________________________________________________________________________________________________________________________________________*/ .logo { float:left; margin-bottom:0; } /* standard-menu <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #standard-menu { float:right; border-left:1px solid #9f482c; } #standard-menu li { float:left; border-right:1px solid #9f482c; } #standard-menu li a, #standard-menu li a:hover, #standard-menu li.active { display:block; line-height:45px; padding:0 22px; } #standard-menu li a:hover, #standard-menu li.active { color:#fff; } /******************************************************************************************************************************************* #04 | main-menu __________________________________________________________________________________________________________________________________________*/ #main-menu { position:relative; float:left; width:702px; padding:0 0 12px 54px; z-index:999; } #main-menu li { position:relative; float:left; margin:0 10px 0 0; background:transparent url(../img/bg-main-menu.png) left top no-repeat; font-size:1.17em; /* 14px */ font-weight:bold; text-align:center; letter-spacing:0.08em; /* 1px */ } #main-menu li.last { margin:0; } #main-menu li a { display:block; width:168px; line-height:34px; } #main-menu li:hover, #main-menu li.active { background-position:right top; } /* sub-menu <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #main-menu li ul { position:absolute; left:-9999em; top:27px; width:168px; padding:7px 0 20px 0; background:transparent url(../img/bg-sub-menu.png) left bottom no-repeat; z-index:999; } /* show sub-menu */ #main-menu li:hover ul, #main-menu li.sfhover ul { left:0; } #main-menu li ul li { float:none; margin:0 2px; border-top:1px solid #494949; background-image:none; font-size:0.85em; /* 12px */ font-weight:normal; text-align:left; letter-spacing:0; } #main-menu li ul li.last { margin:0 2px; border-bottom:1px solid #494949; } #main-menu li ul li a { width:133px; /* + padding = 164px */ line-height:29px; padding:0 0 0 31px; color:#fff; background:transparent url(../img/arrow-sub-menu.gif) 15px 12px no-repeat; } #main-menu li ul li a:hover { color:#ff5119; background:transparent url(../img/arrow-sub-menu-active.gif) 15px 12px no-repeat; } /******************************************************************************************************************************************* #05 | content __________________________________________________________________________________________________________________________________________*/ .content { line-height:1.5; /* 18px */ } .article, .article-first { padding-bottom:1.5em; /* 18px */ } .content p, .content ul, .content ol, .content dl, .content form, .content table, .content address { margin-bottom:1.5em; /* 18px */ } /* headings <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ h1,h2,h3 { line-height:1em; font-weight:bold; color:#000; } h1 { font-size:1.67em; /* 20px */ } h2 { font-size:1.17em; /* 14px */ margin-bottom:1.33em; /* 16px */ } h3 { font-size:1.33em; /* 16px */ } /* lists <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .content ul, .content ol { line-height:1.67; /* 20px */ } .content ul { margin-left:1.17em; /* 14px */ list-style:disc outside; } .content ul ul { margin-left:1.33em; /* 16px */ margin-bottom:0; } .content ol { margin-left:1.42em; /* 17px */ list-style:decimal outside; } .content ol ol { margin-left:1.58em; /* 19px */ margin-bottom:0; } .content dt { margin-top:.92em; /* 11px */ font-weight:bold; } /* forms <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ fieldset { padding:1.5em; /* 18px */ border:1px solid #ccc; } legend { padding:0 .83em; /* 10px */ } form div { padding-bottom:.83em; /* 10px */ } /* label kann man hier eigentlich auch dazunehmen, dann hat man auch den hand-cursor, wenn * man bei checkboxen, radiobuttons usw. über das label geht. in einem fall ist es allerdings * schlecht: wenn man ein label vor einem submit-button hat, dann wird der button auch ausgelößt * wenn man auf das label klickt. -> quatsch, der wird ja auch ausgelößt wenn man für label kein * cursor:pointer; angibt -> man sollte submit-buttons einfach kein label zuweisen !! */ input, button, select, label { cursor:pointer; } /* cursor:pointer; für input[type='text'] und input[type='password'] rückgängig machen. * soll nur input[type='submit'], input[type='radio'] und input[type='checkbox'] betreffen */ input[type='text'], input[type='password'] { cursor:text; } input, textarea, button, select { /* input type="text" + type="submit" + textarea + button + select -tags übernehmen nicht die * font-family von body!! mit font:inherit; wird die Schrift übernommen, allerdings nicht im * IE6 + IE7, deswegen trotzdem font-family angeben. font:inherit; kann man zusätzlich * reinschreiben, dann wird auch die line-height übernommen, allerdings wieder nicht in den * IE's -> also line-height doch extra angeben. line-height bei input ist allerdings schlecht * in den IE's, dann sitzt der text nicht mehr zentriert, also nur für textarea angeben. * davon abgesehen bewirkt line-height in den anderen browsern in input-feldern rein gar nix * -> font:inherit; ist quatscht ...weglassen! */ font-family:Arial, Helvetica, sans-serif; } textarea { line-height:1.5; /* 18px */ } input, textarea, button { padding:2px 2px; } option { /* das zurücksetzen von padding + margin verursacht zu kleine selectboxen. dies wird korrigiert */ padding:0 .83em 0 .33em; /* 0.83em=10px, 0.33em=4px */ } label { /* hat bei der jetztigen konfiguration nur eine auswirkung auf radiobuttons und checkboxen mit * label davor bzw. dahinter, erhöht den abstand etwas */ line-height:1.8; } input[type='radio'] { /* gut für FF2+3, Netscape-7.1, schlecht für Safari-3.2-Win und. keine auswirkung auf Opera-9.01 * und IE7 ...da ist es auch ohne vertical-align gut. -> für Safari rückgängig machen ! */ vertical-align:middle; /* durch den margin ist es auch für den Safari-3.2-Win wieder einigermaßen ok */ margin-bottom:1px; } input[type='checkbox'] { /* gut für FF2+3, Netscape-7.1, schlecht für Safari-3.2-Win und. keine auswirkung auf Opera-9.01 * und IE7 ...da ist es auch ohne vertical-align gut. -> für Safari rückgängig machen ! */ vertical-align:middle; /* durch den margin ist es auch für den Safari-3.2-Win wieder einigermaßen ok */ margin-bottom:2px; } textarea, select, input[type='text'], input[type='password'] { border:1px solid #999; outline:2px solid #eaeaea; color:#333; background:#fff; } textarea:hover, textarea:focus, select:hover, select:focus, input[type='text']:hover, input[type='text']:focus, input[type='password']:hover, input[type='password']:focus { border-color:#666; outline:2px solid #eaeaea; color:#000; background:#fbfbfb; } button, input[type='submit'], input[type='button'], input[type='reset'] { /* padding für buttons anpassen, sind sonst 2px höher als input-type="text" felder. * benötigt FF2+3 und Netscape-7.1. Opera-9.01 bekommt eh eine extrawurst für buttons * (siehe unten). schlecht für Safari-3.2-Win, hier ist es ohne die padding deklaration * perfekt -> für Safari-3.2-Win also rückgängig machen ! */ padding:1px 2px; /* macht das padding für Safari-3.2-Win rückgängig bzw. gleicht es aus, so daß auch * im Safari-3.2-Win buttons die gleiche höhe wie input-type="text" felder haben. * line-height wird für alle button-typen vom FF2+3 und Netscape-7.1 ignoriert, * Opera-9.01 setzt es bei button-tags um (muß deshalb mit line-height:inherit; für * den Opera rückgängig gemacht werden ...siehe unten). der IE6+7 setzten line-height * beide um, der IE6 versteht diese anweisung aber eh nicht, da diese selektoren * (input[type='submit']) mit dabeistehen und der IE7 bekommt es eben per conditional * comment rückgängig gemacht */ line-height:1.4; border-top:1px solid #ccc; border-right:1px solid #666; border-bottom:1px solid #666; border-left:1px solid #ccc; outline:2px solid #eaeaea; background:#ccc; /* ist nur ein abstandshalter, wenn für die ganzen formular-elemente standardmäßig eine * outline aktiviert wird */ margin:0 4px; } button:hover, input[type='submit']:hover, input[type='button']:hover, input[type='reset']:hover { border-top:1px solid #666; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #666; } /* recent Opera versions 9 and below: * der button-tag button ist standardmäßig 3px höher als der input-type="xxx" button, wird * hierdurch ausgeglichen + anpassen der höhe der buttons an input-type="text" felder + etwas * mehr padding für left + right */ html:first-child button { padding:1px 5px 0 5px; line-height:inherit; } html:first-child input[type='submit'], html:first-child input[type='button'], html:first-child input[type='reset'] { padding:2px 5px 2px 5px; } /* der Opera-9.01 stellt checkboxen und radiobutton mit einem voreingestellten margin dar * (wie der IE6+7), wird hierdurch ausgeglichen */ html:first-child input[type='radio'], html:first-child input[type='checkbox'] { margin:0 -2px 0 -2px; } /* bringt label-text neben input-feld, select-box uns so auf eine höhe */ html:first-child select { vertical-align:middle; } /* tables <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ table { border-top:1px solid #ccc; border-left:1px solid #ccc; border-collapse:collapse; } caption { padding:0.67em 0; /* 8px */ } /* th = table header (kann man anstatt td verwenden) */ td, th { /* die em werte werden von den browsern unterschiedlich interpretiert, mit fester * pixelangabe ist es besser, vielleicht sollte man auch keine em-werte mit 2 * nachkommastellen benutzen bzw. dort nur in 0.5er schritten ...das ganze führte * ja schon zu dem problem mit dem langsamen magiczoom im FF3 */ padding:0.7em 0.7em 0.6em 0.7em; /* 0.67em = 8px, 0.58em = 7px */ border-bottom:1px solid #ccc; border-right:1px solid #ccc; /* im Opera 9.01 werden th's ansonsten zentriert! */ text-align:left; }