pdf-download

Einstellungen CSS – Beispiel
Dieses Arbeitsblatt basiert auf einer Beispieldatei von Adobe Dreamweaver CS4.
Für den body
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
color: #000000;
margin: 0;
padding: 0;
Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements
auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen
Rechnung zu tragen.
text-align:center;
Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im
#container-Selektor die Standardausrichtung left (links) zugewiesen.
Für den container
width: 780px;
Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können
Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale
Bildlaufleiste vermeiden.
background: #FFFFFF;
margin: 0 auto;
Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite
zentriert.
border: 1px solid #000000;
Man kann mit Hilfe eines Leerzeichens auch mehrere Werte (z. B. Breite,
Beschaffenheit, Farbe) dem Hauptelement zuordnen.
text-align:left;
Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben.
Für den #header (Kopfbereich)
background: #92472E;
text-align:right;
padding: 10px 10px 10px 50px;
Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den
divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild
eingesetzt wird, sollten Sie die Auffüllung entfernen.
Für den #header h1 (Überschrift im Kopfbereich)
margin: 0;
Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen,
können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn
das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche
Wirkung hat.
padding: 10px 0;
Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich
gewährleisten, dass das Element die Kanten des div nicht berührt.
Für die #sidebar1 (z. B. ein Menü)
float: left;
Da es sich hier um ein floatendes (fließendes) Element handelt, muss eine Breite
angegeben werden.
width: 130px;
Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im
Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und
den Rahmen.
background:
#930;
Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt.
padding: 0px 0px 15px 20px;
Für den #mainContent (Hauptinhalt)
margin: 0 0 0 200px;
Durch den linken Rand dieses div-Elements entsteht die Spalte am linken
Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des
sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des
#mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in
#sidebar1 endet.
padding: 0 20px 20px 20px;
padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den
Außenabstand der div -Box.
Für den #footer (Fußzeile)
padding: 0 10px 0 20px;
Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den
divs, die darunter erscheinen.
background: #600;
Für den Text in der Fußzeile #footer p
margin: 0;
Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen,
können Sie unerwartete Abstände zwischen divs vermeiden.
padding: 10px 0;
Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei
einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme.
Für .floatright (zu umfließende Elemente rechts)
Mit dieser Klasse können Sie ein Element auf der Seite nach rechts fließen lassen.
Das floatende Element muss vor dem Element stehen, neben dem es auf der
Seite erscheinen soll.
float: right;
margin: 0 0 10px 20px;
Für .floatleft (zu umfließende Elemente links)
Mit dieser Klasse können Sie ein Element auf der Seite nach links fließen lassen.
float: left;
margin-right: 8px;
Für .blocksatz
text-align:justify;
Für .clearfloat (die Aufhebung von Float)
Diese Klasse sollte in einem div- oder break-Element platziert werden und das
letzte Element vor dem Schließen eines Containers sein, der wiederum einen
vollständigen Float enthalten sollte.
clear:both;
height:0;
font-size: 1px;
line-height: 0px;