|
Abstand halten
HTML-Elemente nehmen eine sogenannte Box, also ein Rechteck auf dem Bildschirm ein.
Mit den beiden CSS-Eigenschaften margin und
padding wird die Grösse dieses Rechtecks
beeinflüßt. Der Unterschied zwischen den beiden liegt darin, daß
margin den Abstand zu den umgebenden Boxen angibt (Außenabstand) und padding
den Abstand zwischen dem Rand der Box und dem Inhalt (Innenabstand).
Ein Beispiel für margin
als CSS-Eigenschaft
Ein Beispiel für padding
als CSS-Eigenschaft
Wie Ihr seht, ist im ersten Beispiel die graue Box klein und hat einen gewissen
Abstand zum umgebenden Text. Im zweiten Beispiel ist dieser Abstand ebenfalls
grau unterlegt, da mit padding der Innenabstand vergrössert wurde.
Beide Eigenschaften könnt Ihr für die vier Ränder der Box getrennt
angeben. So wirkt beispielsweise margin-bottom nur auf den
Außenabstand zum Element darunter oder padding-left
auf den Innenabstand nach links. Die Richtungen werden jeweils mit
left, right,
top und bottom bezeichnet.
Die Grösse des Elements an sich legen die beiden Eigenschaften
width und height fest.
Auf Wunsch kann der Browser auch Rahmen um Eure Elemente malen. Dazu dienen
Eigenschaften wie border-style,
border-width oder border-color.
border-style akzeptiert als Werte
- none oder hidden -
kein Rahmen (Normalfall)
- solid - durchgezogene einfache Linie
- dashed - gestrichelt
- dotted - gepunktet
- double - durchgezogene doppelte Linie
- groove, ridge,
inset, outset -
verschiedene 3D-Rahmenformen
'solid' schafft heutzutage eigentlich jeder Browser. Bei den anderen Rahmentypen
kann es Unterschiede geben; da hilft mal wieder nur Ausprobieren.
border-width legt, wie der Name schon sagt, die Dicke des Rahmens fest. Das kann
entweder ein numerischer Wert sein, oder auch thin,
medium oder thick. border-color
macht ebenfalls seinem Namen Ehre und setzt die Farbe des Rahmens. Alle drei
Rahmen-Eigenschaften könnt Ihr, wie schon bei margin und top, für die vier
Ränder getrennt setzen. Beispiele: border-top-style,
border-left-width oder
border-right-color.
Aus dem Hintergrund
CSS bietet auch die Möglichkeit, die Hintergrundfarbe eines Elements festzulegen.
Dazu ist die Eigenschaft background-color da. Das gleiche
für eine Hintergrundgrafik erledigt background-image.
Geeignet sind, genau wie bei «Vordergrundgrafiken» auch, *.jpg, *.gif
und *.png-Dateien. Die Wertzuweisung an background-image ist etwas ungewöhnlich.
Ihr weist nämlich nicht einfach die URL des gewünschten Bildes zu, sondern
benutzt die url-Funktion
body{background-image:url(hintergrund.png)}
Ohne weitere Angaben wiederholt der Browser das Hintergrundbild über den
gesamten verfügbaren Raum (Kachelung). Mit der Eigenschaft
background-repeat könnt Ihr das ändern. Dabei
bedeutet repeat kacheln wie in der Voreinstellung,
repeat-x kachelt nur waagerecht,
repeat-y nur senkrecht, und
no-repeat zeigt das Hintergrundbild nur einmal an.
Beim Scrollen wird das Hintergrundbild normalerweise mitgescrollt. Die Eigenschaft
background-attachment mit dem Wert
fixed bewirkt, daß der Hintergrund nicht mitgescrollt
wird (Wasserzeichen-Effekt). Das Standard-Mitscrollen erreicht Ihr mit dem Wert
scroll.
background-position legt fest, wo die linke obere Ecke
der Hintergrundgrafik platziert werden soll. Diese Eigenschaft nimmt zum einem
numerische Werte
body{background-position:30px 20px}
Der erste Wert steht für die horizontale Position, der zweite für die
vertikale. Anstelle von Werten in Pixel könnt Ihr auch Prozentwerte verwenden.
Daneben gibt es noch folgende Schlüsselwörter
- horizontal
- left - links bündig
- middle - horizontal mittig
- right - rechts bündig
- vertikal
- top - oben bündig
- center - vertikal mittig
- bottom - unten bündig
Das Hintergrundbild wird also oben in die Mitte gesetzt mit
body{background-position:middle top}
Noch eine Anmerkung: Ihr könnt prinzipiell jedem Element auf Eurer Seite
ein Hintergrundbild mitgeben, nicht nur dem Body als ganzes. Möglich wäre
damit beispielsweise ein Hintergrundbild für die ganze Seite und darauf mehrere
Textabsätze, die jeweils auch ein Hintergrundbild haben.
|
