|
|
|
|
| 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. |
|
|||||
|
|
|
|
|
|
|
||||||||||||||||||||||
|
|
|||||||||||||||||||||
|
|
 |
Neue Projekte erstellt man am flexibelsten mit CSS. Hier finden Sie das Grundgerüst für ein CSS-Layout mit Kopf, Navigation, Inhaltsseite und Fußleiste, welches Sie be- liebig anpassen können. Sie erhalten ein pixelgenaues Layout ohne horizontale Scroll- balken auf Basis der Bildschirm-Auflösung 800x600 Pixel. Bei einer Breite von 760 Pixel ist selbst dann noch beidseitig etwas von der Hintergrundfarbe zu sehen, wenn der horizontale Scroll- balken sichtbar ist. Das Layout wurde von mir mit folgenden Browsern gestestet [mit Windows XP (SP 1)]:  Firefox 1.5
Internet Explorer 6.0
Internet Explorer 5.01
Internet Explorer 5.5 (SP2)
Netscape 7.1
Netscape 7.02
Netscape 6.2.3
Mozilla 1.7.5
Mozilla 1.4
Mozilla 1.0
Opera 9.0
Opera 7.20
Opera 7.11
Opera 6.05
Ansicht bei Bildschirm-Auflösung 1024x768 Pixel
Funktioniert nicht mit Netscape 4.x: Die nicht vorhandene Unterstützung der neueren
CSS-Befehle verhindert eine korrekte Anzeige des Layouts.
Layout
CSS-Layout 
(wie Abbildung oben)
CSS-Layout mit verschiedenen Farben
(bessere Differenz- ierung)
Tipp für Anfänger: Wenn Sie sich noch nicht so gut mit Stylesheets auskennen, nehmen
Sie das CSS-Layout
mit den verschiedenen Farben
,
und “spielen” Sie mit dem Beispielcode. Durch Ausprobieren (“Learning by
doing”) versteht man in der Regel am Schnellsten, wie CSS funktioniert, und welche Werte
welchen Einfluss auf die Optik des Layout nehmen.
Das zentrierte Grundgerüst
Beispielcode: <div style="width: 760px; margin: 0px auto; text-align: left; border: black 1px solid; background-color: white"> Inhalt [=vier DIV (Container)] </div> Das ist die Formatierung für das äußere Gerüst: Ein Block-Ele- ment (DIV, Container) mit einer Breite von 760 Pixel. Neben den Angaben zur Rahmenfarbe wird mit “margin” die Ausrichtung be- stimmt. Mit dem Wert “auto” wird der Seitenabstand automatisch berechnet, und zwar zu gleich großen Teilen auf beiden Seiten. Somit erhalten wir ein zentriertes Grundgerüst.
Kompatibilität zu Internet Explorer 5 und 5.5
Beispielcode:
body {
font-size: 12px;
margin-top: 30px;
font-family: Verdana;
background-color: #CCC;
text-align: center
}
Bei diesen beiden Browser muß man mit “text-align: center” zentrieren (obwohl dieser Befehl ursprünglich nicht für diesen Zweck vorgesehen ist). Dies wird im CSS-Bereich des Body-Bereichs aufgeführt. Um die Zentrierung für die (vier) inneren Block-Elemente wieder auszuhebeln (denn die Formatierung des äußeren Elements wird an die inneren Elemente vererbt), muß hier “text-align: left” an- gegeben werden. Siehe hierzu auch den Code-Abschnitt von “Das zentrierte Grund- gerüst”.
Die Titelleiste
Beispielcode:
#oben {
height: 65px;
padding-left: 24px;
padding-top: 5px;
border-bottom: black 1px solid;
background-color: #F77
}
Diese Angaben reichen aus, um die Titelleiste -und teilweise deren Inhalt (Abstände)- zu formatieren. Denn mit “padding-left” und “padding-top“ werden die Abstände der Elemente (in diesem Fall der Text “wwwdesign.info”) bestimmt. “border-bottom” wird benötigt, um diesen Bereich von der Navi- gation und der Inhaltsseite abzugrenzen. Ob Sie diesen Befehl einsetzen, ist natürlich Geschmackssache; wenn Sie den horizon- talen Strich nicht möchten, so löschen Sie einfach diese Zeile (oder setzen den Wert auf “0”).
Die Navigation und die Inhaltsseite
Beispielcode:
#navigation {
float: left;
width: 140px;
padding-top: 30px;
padding-left: 20px;
background-color: white
}
#inhalt {
float: right;
width: 560px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 130px;
background-color: white
}
Was hat es mit dem “float” auf sich? Hiermit wird erreicht, dass das linke Block-Element (“navigation”) mit “float: left” linksbündig ausgerichtet wird, und das rechte Block-Element mit “float: right” rechts “vorbeifließt”. Ein “padding-left” beim Inhalt wird nicht benötigt: Mit der Breite des Block-Elements bestimmen Sie den Abstand zur Navigation (siehe hierzu auch den nachfolgenden Hinweis).
Das rechte Block-Element liegt nicht direkt an dem linken Element an, sondern liegt rechtsbündig an.
Wenn Sie bei diesem Beispiel
die Breite von “inhalt” verringern, können Sie dies auch selbst gut nachvollziehen.
Die Gesamtbreite (das äußere Block-Element) beträgt 760 Pixel. Die Navigation ist 140 Pixel breit,
der Inhaltsteil 560 Pixel breit. Der Grund für die Differenz von 60 Pixel ist der, die
Kompatibilität zu Netscape und Opera-Browsern zu erreichen. Diese interpretieren die
Breite anders als der Internet Explorer. Dieser Abstand ist nötig, damit die Inhaltsseite nicht
unterhalb der Navigation “umbrochen” wird.
Achten Sie bei Änderungen als immer darauf, dass die Differenz zur Gesamtbreite (760 Pixel) immer mindestens 60 Pixel beträgt!
Der Befehl “clear” (Zeile 151)
Beispielcode: <br style="clear: both"> Dieser Befehl wird benötigt, um das voran gegangene “float” wieder außer Kraft zu setzen (an dieser Stelle zu beenden). Also: “Fortsetzung bei Textumfluss”.
Die Fußleiste
Beispielcode:
#unten {
width: 755px;
padding-bottom: 15px;
text-align: center;
background-color: white
}
Fazit:
Kann bei Bedarf voll- ständig weggelassen werden. Habe ich hier für wichtige Informationen [Kontakt-
möglichkeiten (z.B. E-Mail-Adresse)] eingefügt.
Der Text ist zentriert, damit es harmonischer aussieht. Abschließend ist zu empfehlen, die Format- ierung (CSS-Teil des Head-Bereichs) auszu- lagern. Dies hat zwei Vorteile:
|
 |
|
|
||||||||||||||||
|
||||||||||||||||||||||
