|
|
|
|
| Das Stylesheet-Template (inkl. Reset) | 1. |
| Textumfluss um Motiv des Hintergrundbildes | 2. |
| Layout ohne Tabellen | 3. |
| Prioritäten bei mehreren Stylesheets | 4. |
| Die drei Varianten der CSS-Formatierung | 5. |
|
|||||
|
|
|
|
|
|
|
||||||||||||||||
|
|
|||||||||||||||
|
|
 |
Die Ergänzung zum XHTML-Template, welches als Grund- gerüst zeiteinsparend für (fast) alle künftigen Projekte Verwendung findet.
Das korrespondierende XHTML-Template
Zusammen mit dem XHTML-Grundgerüst können Sie bei der Umsetzung künftiger Projekte enorm Zeit einsparen, indem Sie bei Ihren Projekten auf diesen beiden Templates aufbauen. Wie auch beim XHTML-Template liegen dem Stylesheet bestimmte Standards zu Grunde, welche nicht nur für mehr Übersichtlichkeit sorgen sondern auch die Arbeit wesentlich erleichtern. Einige der Standards werden unter dem Markup aufgeführt. Die Vorlage enthält bereits Anpassungen für Internet Explorer 6 (betreffend größerer Containerbreiten und daraus resultierendem Chaos bei Positionierungen mit “float”). Das Markup:
/*
* (c) 2009 (Firmenname)
* Author: (Nachname, Vorname)
* Author: (Nachname, Vorname)
*/
/*
/*
* Clear Browser Stylesheet
*/
* {
font-size: 100%;
margin: 0;
padding: 0;
}
html {
height: 100%;
margin-bottom: 1px;
}
body {
background-color: #ffffff;
color: #000000;
font: normal 62.5%/1.5em Verdana, Arial, Helvetica, sans-serif;
}
/*
* italic-bugfix for IE6 (check sideffects)
*/
* html body * {
overflow: visible;
}
* html iframe,
* html frame {
overflow: auto;
}
fieldset,
img {
border: 0 solid;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-style: normal;
}
ul, ol, dl {
list-style: none;
}
option {
padding-left: 0.4em;
}
/*
* Default Styles
*/
h1, h2, h3, h4, h5, h6 {
font-size: 2em;
font-weight: bold;
}
h2, h3, h4, h5, h6 {
font-size: 1.8em;
}
h3, h4, h5, h6 {
font-size: 1.6em;
}
h3, h4, h5, h6 {
font-weight: normal;
}
div {
overflow: hidden;
}
/*
* Globals
*/
div.globalLogo {}
div.globalNavigationMain {}
div.globalNavigationMeta {}
/*
* Layout
*/
div.layoutPage {}
div.layoutPageHead {}
div.layoutPageBody {}
div.layoutPageFoot {}
div.layoutColumns {}
div.layoutColumns layoutColumnRight {}
div.layoutColumns layoutColumnLeft {}
/*
* Modules
*/
div.modulFriends {}
div.modulTopList {}
Jeder Webdesigner / Developer entscheidet i.d.R. selbst welche Standards beim Aufbau des Markups Verwendung finden.
Von mir verwendete Standards (Projekte ab 2008!) sind (u.a.):
Fazit:
|
 |
|
|
||||||||||
|
||||||||||||||||
