In CSS werden Elemente grundsätzlich als rechteckige Kästen oder als Streifen behandelt. Für die Beschreibung der Kästen werden dabei die folgenden – euch mittlerweile sicherlich bekannten – Eigenschaften verwendet:
• width – die Breite des Elements
• height – die Höhe des Elements
• left – Abstand nach links
• right – Abstand nach rechts
• top – Abstand nach oben
• bottom – Abstand nach unten
• margin – der äußere Rand
• border – der Rahmen um das Element
• padding – der Innenabstand, also der Abstand vom Rahmen zum Elementinhalt
Diese Eigenschaften wurden bereits vorgestellt.
Die Gesamtbreite eines Elements addiert sich aus der Breite der einzelnen Angaben. (Gleiches gilt dann übrigens auch für die Höhe).
Ein Beispiel:
div#box {
width: 100px;
padding: 20px; /* je 20px links und rechts /
border: 2px solid; / je 2px links und rechts /
margin: 0 30px; / je 30px links und rechts */
}Welche Breite besitzt dieser div-Bereich? Lasst uns einen Blick auf die einzelnen Werte werfen:
• 100 Pixel
• 2 Mal 20 Pixel
• 2 Mal 2 Pixel
• 2 Mal 30 Pixel
Das ergibt eine Gesamtbreite des Elements von 204 Pixel.
Die Breite und Höhe von Elementen werden über width und height bestimmt. Stehen diese Angaben nicht explizit im Stylesheet, gilt Folgendes:
• Fehlt width, wird die Box so breit wie das umgebende Element dargestellt.
• Fehlt height, wird das Element so hoch wie sein Inhalt angezeigt.
Ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* je 2px links und rechts */
margin: 0 30px; /* je 30px links und rechts */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Im Browser sieht das folgendermaßen aus:
Das übergeordnete Element des div-Elements ist body. Folglich wird das Element tatsächlich so breit wie das body-Element angezeigt. Bei der Höhe orientiert es sich hingegen am Inhalt.
Alles auf Null
Jeder Browser besitzt ein eingebautes Stylesheet. In diesen Stylesheets sind einige Standardwerte definiert. Das gilt beispielsweise auch für padding und margin. Und diese Standardwerte variieren leider in den verschiedenen Browsern. Dieser Aspekt macht es schwierig, in den jeweiligen Browsern identische Ergebnisse u.a. im Zusammenhang mit dem Boxmodell zu erzielen. Daher empfiehlt es sich, die Abstände, die in den Browsern vorgegeben sind, auf Null zu setzen. Das kann man folgendermaßen machen:
* { padding: 0; margin: 0; }
Fügt diese Zeile an den Anfang eures Stylesheets ein. Auf diese Weise könnt ihr nun beginnen, die Boxen an den gewünschten Stellen zu platzieren.
Boxtypen
Wie ein Element letztendlich dargestellt wird und wie es andere Elemente beeinflusst, ist von der Art des Elements abhängig. Tatsächlich unterscheidet die CSS-Spezifikation zwischen Blockelementen und Inline-Elementen. (Es gibt noch andere Typen, die an dieser Stelle aber außen vor gelassen werden, da sie nur eine untergeordnete Rolle spielen).
Blockelemente erzeugen immer eine neue Zeile. Darauffolgende Elemente beginnen ebenfalls in einer neuen Zeile. Typische Blockelemente sind beispielsweise p, div, h1, ul usw. Für diese Elemente gelten die zuvor aufgeführten Eigenschaften Außenabstand, Innenabstand, Höhe, Breite und Rahmen.
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Ein Blick auf das Ergebnis im Browser zeigt, dass h1 und p jeweils eine eigene Zeile erzeugen.
Inline-Elemente erzeugen hingegen keinen eigenen Absatz, sie werden vielmehr im normalen Textfluss angezeigt. Typische Inline-Elemente sind span, em, strong, img, br usw. Für Inline-Elemente gelten keine vertikalen Außenabstände und keine Breiten- und Höhenangaben.
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Und auch hier ein Blick auf das Ergebnis:
Ihr könnt nun aus Elementen, die eigentlich Blockelemente sind, Inline-Elemente machen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Ein Bild ist immer ein Ganzes</em>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
</body>
</html>Seht euch das Ergebnis im Browser an.
Die Hintergrundfarbe der h1-Überschrift signalisiert, dass das Element über die gesamte Breite geht. Die Breite orientiert sich dabei am übergeordneten body-Element.
Jetzt kommt die Eigenschaft display ins Spiel.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Ein Bild ist immer ein Ganzes</em>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
</body>
</html>
Durch display: inline verändert sich die Breite des Elements.
Tatsächlich passt sich die Elementbreite jetzt dem vorhandenen Inhalt an. Hier eine Übersicht darüber, welche Werte display noch zugewiesen werden können:
• none – keine Anzeige
• block – das Element wird als Block-Element dargestellt, erzeugt also eine neue Zeile.
• inline – das Element wird als Inline-Element dargestellt, erscheint also im laufenden Textfluss.
• inline-block – erzeugt äußerlich einen Block, für den Höhe, Breite und Außenabstand angegeben werden können. Jedes Element bleibt aber im laufenden Textfluss. Es handelt sich demnach um eine Kombination aus einem Block- und einem Inline-Element.
• list-item – das Element wird als Block-Element angezeigt. Ihm wird aber zusätzlich ein Aufzählungszeichen vorangestellt.
• run-in – erzeugt abhängig vom Inhalt ein Block- oder ein Inline-Element.
• table – wirkt wie das aus HTML bekannte table-Element.
• inline-table – wirkt wie das HTML-Element table, aber inline.
• table-row – das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das HTML-Element tr.
• table-cell – das Element steht für eine Tabellenzelle und wirkt wie die beiden HTML-Elemente th und td.
• table-row-group – das Element enthält eine Elementgruppe mit mehreren nebeneinander angeordneten Kindelementen und wirkt wie das tbody-HTML-Element.
• table-header-group – das Element enthält eine Elementgruppe mit mehreren nebeneinander angeordneten Kindelementen und wirkt wie das thead-HTML-Element.
• table-footer-group – das Element enthält eine Elementgruppe mit mehreren nebeneinander angeordneten Kindelementen und wirkt wie das tfoot-HTML-Element.
• table-column – hierüber werden die Eigenschaften der Zellen einer Spalte beschrieben. table-column wirkt wie das col-Element aus HTML.
• table-column-group – dieses Element enthält eine Gruppe von Elementen, über die die Eigenschaften von Zellen einer Spalte beschrieben werden. Es wirkt wie das HTML-colgroup-Element.
• table-caption – hierüber wird die Tabellenüberschrift definiert. Die Eigenschaft wirkt wie das HTML-Element caption.
Tatsächlich bietet CSS also für die verschiedensten Elementtypen unterschiedliche Darstellungsoptionen. Diese spielen im Zusammenhang mit der Positionierung von Elementen eine entscheidende Rolle. Mehr dazu in den nächsten Tutorials.
