Neben der Größe von Elementen auf einer Website ist ein wichtiges Gestaltungselement der Abstand von diesen Elementen zum nächsten. Wenn wir die Abstände im Webdesign genauer betrachten, haben wir es sogar mit dreierlei Abständen zu tun:
- Der Abstand vom Inhalt eines Elements, z.B. Text oder Bild, bis zum (sichtbaren oder unsichtbaren) Rahmen ist der Innenrand. Diese wird in CSS mit der Eigenschaft padding eingestellt
- Der Rahmen eines Elementes kann ganz ausgeschaltet und damit unsichtbar sein (dann beeinflusst er auch nicht die Abstände und Größe des Containers). Oder man kann dem Rahmen eine bestimmte Breite/Dicke geben, z.B. indem man die gewünschte Breite in Pixeln angibt. Der Rahmen wird mit der CSS-Eigenschaft border kontrolliert.
- Der Abstand vom (sichtbaren oder unsichtbaren) Rand bis zum nächsten Element ist der Außenrand. Dieser wird in CSS mit der Eigenschaft margin beeinflusst.
Alle drei Abstände können für die vier Seiten eines Containers jeweils unterschiedlich, d.h. unabhängig voneinander definiert werden. Aus dem Zusammenspiel dieser Eigenschaften ergibt sich das CSS-Boxmodell. Dazu eine erläuternde Abbildung von w3schools.com:
Um in CSS zielsicher zu layouten, muss man mit diesem Grundprinzip umgehen können. Ein Beispiel zum Testen und Kennenlernen des "ursprünglichen" Box-Modells gibt es auch bei w3schools. Wenn Sie sich das Beispiel genauer ansehen und die Werte im CSS ändern, stoßen Sie automatisch auf die größte Schwierigkeit mit dem Verhalten der Container und Abstände in CSS, an denen sich alle angehenden Webdesigner gerne reiben: Gibt man einem div-Container eine feste Breite (Eigenschaft width) von 320 Pixeln und definiert zusätzlich einen Rahmen (border) von 5 Pixeln auf allen vier Seiten und einen Innenabstand (padding) von 10 Pixeln, so hat der Container in der Ausgabe durch den Browser ein tatsächliche Breite von 350 Pixeln. Denn zur definierten Breite von 320 Pixeln wird horizontal noch zweimal der Rahmen und zweimal der Innenabstand dazu gerechnet.
Wem das zu viel Rechnerei ist, der kann dank CSS3 nun von diesem voreingestellten Box-Modell auf ein intuitiveres umschalten: Für die Eigenschaft box-sizing kann nun der Wert border-box definiert werden (statt des voreingestellten content-box) und die Breite eines Containers ist dadurch so wie in der width definiert. Nun werden Rahmen und Innenabstand quasi von dieser Zielbreite abgezogen und der Content bekommt als Breite das was übrig bleibt. Zum Testen können Sie im interaktiven Beispiel der Regel für div die Deklaration
box-sizing: border-box;
hinzufügen und sich von der Wirkung überzeugen.
Bei beiden Box-Modellen kommt dann um den Container herum noch der Außenabstand zum Tragen. Je mehr Rand nach außen man für ein Element definiert, desto mehr Platz braucht es im Layout, allerdings wird der Außenabstand nicht zur eigentlichen Breite (wie sie auch in den Entwicklertools im Reiter Box-Modell angezeigt wird) hinzugezählt. Aber beachtet werden muss er dennoch, wenn man den gegebenen Platz auf einer Seite exakt aufteilen will.
Nun kennen wir das grundlegende Zusammenspiel der Ränder, aber wie setzt man diese nun in CSS?
Innen- und Außenabstand funktionieren von der Deklaration her sehr ähnlich. Sie werden entweder für alle vier Seiten separat definiert oder in Kurzschreibweise (engl. shorthand). Man kann also schreiben:
<style>
/* Einstellen der Ränder */
div {
padding-top:15px;
padding-right:10px;
padding-bottom: 5px;
padding-left: 10px;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}
</style>
In Kurzschreibweise geht das ganze wesentlich kompakter: hier nimmt man nur die Eigenschaft padding oder margin und definiert die Werte beginnend von oben im Uhrzeigersinn, also oben, rechts, unten, links. Die obige Deklaration lässt sich dadurch dann so abkürzen:
<style>
/* Einstellen der Ränder */
div {
padding: 15px 10px 5px 10px;
margin: 10px 5px 0 5px;
}
</style>
Dadurch spart man sich also jeweils drei Zeilen, was das Stylesheet kompakter und übersichtlicher hält, man muss aber wissen, wie es funktioniert (Bei einem Wert von 0, kann die Einheit (wie Pixel) wegfallen.) Noch kürzer geht es, wenn die Ränder gleichförmig definiert werden sollen:
margin: 10px; ist das gleiche wie: margin: 10px 10px 10px 10px;
Hier wird also der erste angegebene Wert viermal wiederholt.
padding: 10px 15px; ist das gleiche wie: padding: 10px 15px 10px 15px;
Hier wird das Wertepaar entsprechend wiederholt. Eine hilfreiche Wirkung erzielt man mit dem Wert "auto" in Kombination mit der Eigenschaft margin. Mit der Deklaration
margin: 10px auto 0px auto;
Kann man einen Container horizontal innerhalb des Elternelements zentrieren (auto gilt in diesem Fall für den Abstand nach links und rechts). Dies ist eine Technik, die wir in unserem Beispiel gut einsetzen können.
Nun betrachten wir noch die Deklaration des Rahmens. Da der Rahmen nicht nur ein Breite (für jede der vier Seiten) haben kann, sondern auch eine Farbe und einen Rahmen-Stil, braucht man hier theoretisch noch mehr Deklarationen (zugleich hier der Hinweis darauf, dass man Rahmen in modernen Webdesign eher sparsam einsetzen sollte). Wir wollen um einen Container einen einfachen schwarzen Rahmen mit zwei Pixel Breite ziehen. Dies erreichen wir mit folgender Regel:
<style>
/* Einstellen des Rahmens */
div {
border-width: 2px;
border-style: solid;
border-color: black;
}
</style>
Auch hier gibt es eine Kurzschreibweise, mit der man dies in eine Zeile bekommt:
<style>
/* Einstellen des Rahmens */
div {
border: 2px solid black;
}
</style>
Will man einen schmalen Rahmen oben und einen dickeren unten, dann würde man das hiermit erreichen:
<style>
/* Einstellen des Rahmens */
div {
border-top: 2px solid black;
border-bottom: 10px solid black;
}
</style>
Einen Überblick über die möglichen Werte für die Gestaltung des Rahmens erhalten Sie wieder auf w3schools.
Nun wollen wir aber unser erweitertes Knowhow endlich dazu verwenden, das Layout unserer Beispielseite weiter in Richtung Vorgabe zu trimmen. Der wichtigste Kniff ist dabei, dem Inhaltscontainer <article> den Außenrand margin: 0 auto; zuzuweisen.
<style>
/* Ausgelassene Regeln */
article {
width: 580px;
margin: 0 auto;
background-color: #ffffff;
}
/* Ausgelassene Regeln */
</style>
Dadurch wird der Container nun horizontal im Browserfenster zentriert und hat nach oben und unten keinen Abstand (Anzeige im Browser). Nun ist der erste Anschein des Layouts schon wesentlich näher dran an der Vorlage. Der Inhaltscontainer ist nun zentriert - allerdings hat der Container nach wie vor einen Abstand nach oben, auch das abschließende Footer-Element geht nicht ganz bis zum Rand des Browsers, obwohl sich in den Entwicklertools keine definierten Ränder nachweisen lassen. Mit etwas detektivischer Fleißarbeit kommt man diesem Rand aber auf die Spur: Schuld sind wie so oft die CSS-Voreinstellungen der Browsers. Hier ist für den body ein (optisch durchaus sinnvoller) margin von 8px deklariert. Dieser ist für unser Design aber nun nicht erwünscht, insofern überschreiben wir diese Vorgabe in unserem Stylesheet und deklarieren für alle vier Seiten des <body> einen Rand von 0.
<style>
/* Unsere ersten CSS-Regeln */
body {
font-family: Arial,sans-serif;
background-image: url('https://webdev.raphael-rossmann.de/wp-content/uploads/texture-20-res.jpg');
background-size:cover;
margin:0;
}
/* Ausgelassene Regeln */
</style>
Dadurch sind wir nun die seltsamen Ränder am Rand des Browserfensters los geworden. Nun sollten wir uns aber weiter um die Container und deren Inhalte kümmern - der Text in den Containern hat generell zu wenig "Luft". Im Design ist aber Raum um Elemente (engl. white space) ein sehr wichtiges Element für eine ausgewogene und angenehme Wirkung. Dieses Problem sollten wir nun ebenfalls mit unserem Wissen über Abstände in CSS beheben können.
Wir stellen also für die Elemente <header>, <h2> und <footer> jeweils Innenabstände (padding) nach oben und unten ein und rücken dadurch den Text etwas von den Containerrändern weg - die Container werden automatisch höher dargestellt. Außerdem wollen wir den Text, wie in der Vorlage gezeigt, horizontal zentrieren. Dies erreichen wir durch die Deklaration:
text-align: center;
Dadurch gibt sich nun folgendes CSS (nur die geänderten Regeln):
<style>
/* Ausgelassene Regeln */
header {
background-color: #404040;
color: #ffffff;
padding: 10px 0;
text-align: center;
}
/* Ausgelassene Regeln */
h2 {
background-color: #04407a;
color: #ffffff;
padding: 20px 0;
text-align: center;
}
/* Ausgelassene Regeln */
footer {
background-color: #a30064;
color: #ffffff;
padding: 10px 0;
text-align: center;
}
</style>
Im Browser ergibt sich nun diese Ausgabe. Wir nähern uns zügig dem Layoutziel, jetzt stören noch die fehlenden Abstände, z.B. der normalen Absätze, zum Rand des Content-Containers.
Um diese hinzuzufügen, gibt es zwei grundlegende Vorgehensweisen. Bei der ersten gibt man dem umschließenden Container einen Innenrand (am besten man würde dann das box-sizing anpassen, damit dieser nicht um den Innenrand verbreitert wird, s.o.). Je mehr unterschiedliche Elemente man innerhalb des Containers verwendet, desto eher wird man diesen Weg wählen. Ein Problem bekommt man dann aber mit Elementen, die über die ganze Breite des Containers bis zum Rand gehen sollen (wie unsere h2-Elemente und das Bild) - dies werden ja auch durch den Innenrand auf Abstand gehalten. Hier muss man sich dann mit negativen Außenrändern (margins) behelfen.
Die zweite Methode ist in unserem Fall die einfachere und daher werden wir auch diesen Weg gehen: Wir definieren für die Elemente innerhalb des Containers, die auf Abstand gehalten werden sollen einen entsprechenden Außenrand (margin) nach links und rechts. Dies betrifft in unserem kleinen Beispiel die Elemente <h1>, <p>. Also keine sehr schwierige Aufgabe. Bevor wird aber die margins setzen können, sollten wir diese Elemente im Webinspektor checken, denn durch die Browser-Stile haben diese ja bereits Außenabstände nach oben und unten, die wir beibehalten und um die Abstände nach rechts und links ergänzen wollen. Für die <h1>-Elemente stellen wir daher nach oben und unten 30 Pixel ein, für die <p> bestimmen wir 16 Pixel. Nach links und rechts wählen wir einen Außenabstand von 20 Pixel, was der Vorlage entspricht.
Zusätzlich brauchen wir noch etwas Luft nach unten am Endes des Content-Containers. Dies löst man in diesem Fall am besten mit einem Innenrand (padding-bottom).
Wir implementieren diese Änderungen in unserem Stylesheet und erhalten damit zwei geänderte und eine neue Regel (für <p>):
<style>
/* Ausgelassene Regeln */
article {
width: 580px;
margin: 0 auto;
background-color: #ffffff;
padding-bottom: 20px;
}
h1 {
color: #404040;
/* gleich wie: color: rgb(64,64,64); */
font-weight: normal;
font-style: italic;
font-size: 35px;
text-transform: uppercase;
margin:30px 20px;
}
/* Ausgelassene Regeln */
p {
margin:16px 20px;
}
/* Ausgelassene Regeln */
</style>
Betrachten wir wieder die Ausgabe im Browser. Erfreulicherweise sind wir nun schon sehr nahe dran an der Vorlage. Störend ist noch der Abstand der <h2> mit dem Text "Alles in Ordnung?" zum Foto darüber - in der Vorlage ist dazwischen kein Abstand. Im Webinspektor sehen wir für das <h2>-Element einen Außenabstand nach oben und unten von 20 Pixel. Dieser soll aber nicht generell geändert werden, da er für die obere/erste <h2> gut passt. Wie können wir zwei Elemente des gleichen Typs per CSS unterschiedlich gestalten? Gibt es noch andere Möglichkeiten, Regeln auf Elemente anzuwenden als mit dem Tag-Namen, den wir bisher verwendet haben? Diese Fragen lassen sich mit dem Targeting in CSS beantworten.
> weiter