HTML_CSS - Sparte HTML_CSS

Formatierungen

Eingetragen am 03.08.2007

Das obige Beispiel zeigt ja nur die Struktur der Seite an und sieht nicht gerade fein aus. Wer sich nicht mit CSS auskennt, hier nun ein wenig Code.

Es sollte definiert werden, wie Schriftart, Farbe und Grösse auszusehen hat. Dies kann im -Tag geschehen oder man definiert td, p u.s.w. für sich.

Beispiel für : (Zelle einer Tabelle)

td {
text-align: center;
font-size: 0.8em;
color: Black;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Zentrierter Text, Darstellung 80% der eingestellten Schtiftgrösse im Bowser, schwarze Schrift, Schriftart Verdana. Die anderen Schriftarten werden angezeigt, falls Verdana beim Client nicht installiert ist.

Kommen wir zum Layout...
Jede Box kann mit Hintergrundfarbe, Hintergrundbild, Schriftart-, Grösse und Farbe definiert werden.

Nehmen wir mal den header-Container:

#header {
text-align:center;
width:100%;
height:130px;
background-image : url("top.jpg");
background-repeat : no-repeat;
border: 1px solid #000000;
}

Die Box würde den ganzen Bildschirm ausfüllen, wäre 130 Pixel hoch, hätte das top.jpg als Hintergrundbild, welches nicht gekachelt, bzw. wiederholt werden würde, der Text wäre zentriert und hätte einen schwarzen Rahmen in 1 Pixel Stärke.
Man könnte nun auch noch die Schrift formatieren u.s.w.
So könnte man jeden einzelnen Container formatieren.

Das Beispiel füllt ja den ganzen Bildschirm aus, soll die Seite nur 800 Pixel breit sein fügen, bzw. ändern Sie in den Containern das width-Attribut in

width:800px;

Soll die Seite z.B. 800 Pixel breit sein und zentriert auf dem Bildschirm erscheinen, müssen Sei einen weiteren Container erstellen und die vorhandenen Container darin einbinden.
Neuer Container:

#seite {
margin: 0 auto 0;
width:800px;
text-align: center;
}

margin-Anweisungen kann man einzeln erteilen, wie z.B. margin-left , top, right, bottom usw. Einfacher ist aber die Kurzanweisung (ab CSS1) wie oben beschrieben:

Ein Wert
Abstand oben, unten, links und rechts.
Zwei Werte
Der erste Wert für den Abstand oben und unten, der Zweite Wert für links und rechts.
Drei Werte
Der erste Wert für den Abstand oben, der Zweite links und rechts und der Dritte unten.
Vier Werte
Der erste Wert für den Abstand oben, der Zweite rechts, der Dritte unten und der Vierte links.

Bei auto wird der Abstand automatisch je nach Monitor und Auflösung gewählt. Hat bei unserem Beispiel jemand eine Auflösung von 1000px, verbleibt links und rechts ein Abstand von 100px.

Bisherige Kommentare: Kommentar schreiben»