Da wir nun wissen, wie CSS grundlegend funktioniert und wie wir mit den Entwicklertools auch eventuelle Problem aufspüren können, sollten wir uns nun daran machen, unsere kleine HTML-Seite mit Hilfe von CSS etwas mehr in Richtung "richtiges Webdesign" zu trimmen. Dazu schauen wir uns als erstes an, wo die Reise hingehen soll. Wir wollen aus dem aktuellen Stand dieses Design entwickeln:
Ganz schön bunt! Aber so wird der Unterschied zu unserer bisherigen, von den Browser-Stilen geprägten Optik gut verdeutlicht. Auffällig ist vom Layout her der auf der Seite zentrierte Container, in dem unser Inhalt nun etwas kompakter platziert ist - die Zeilen sind dadurch kürzer und besser zu lesen. Der Header sitz mit in diesem Container, während der Footer über die ganze Breite der Seite geht. Innerhalb des Containers ist der Text mit einer anderen Schriftart als Arial gestaltet, auffallend sind vor allem die Überschriften (h2), die als blaue Blöcke die Abschnitte deutlich trennen. Das Bild wurde auf die Breite des Containers eingestellt. Als prägendes optisches Element springt sicher als erstes das Hintergrundbild ins Auge, das den kompletten Bereich hinter dem Inhalts-Container auffüllt (es stammt aus dem WordPress-Theme dieses Wikis).
Wir werden nun schrittweise unser bisheriges Stylesheet erweitern, um am Ende bei dem vorgegeben Design zu landen. Wie fängt man nun am besten an? Wie löst man so eine Aufgabe, bei der an allen möglichen "Designschrauben" gedreht wird?
Am besten beginnt man mit dem grundlegenden Layout, wir haben ja bisher unseren Inhalt im Browser quasi frei fließen lassen innerhalb des body-Knotens. Nun wollen wir ja einen Inhalts-Container erstellen, der eine von uns vorgegebene Breite hat und im Browser-Fenster zentriert ist. Dahinter wollen wir das Hintergrundbild platzieren. Dabei ergibt sich für uns als erstes ein Problem am HTML-Markup: Für unseren Container brauchen wir am besten ein entsprechendes Element, das wir dann mit CSS gestalten können. Diese Element müssen wir also noch im HTML einfügen, ein durchaus nicht seltener Vorgang im Webdesign. Hier sind Sprünge zwischen HTML und CSS bei der Gestaltung des grundlegenden Designs oftmals nötig.
Betrachten wir zunächst einmal nur unseren HTML-Teil der Seite:
<body>
<header>HTML rocks!</header>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen <strong>weltweit</strong>
zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text <em>klar strukturieren</em>
und <em>übersichtlich präsentieren</em>.</p>
<h2>Der Schlüssel</h2>
<p>Der <a href="http://de.wikipedia.org/wiki/Webbrowser" target="_blank"
title="Definition in Wikipedia aufrufen">Browser</a> ist das Fenster
in die Welt des WWW. Er ist heute in fast jeder Tasche und jederzeit
mit dem Internet verbunden.</p>
<p>Sogar am See kann man damit Surfen:</p>
<img src="https://webdev.raphael-rossmann.de/wp-content/uploads/see.jpg"
alt="Ein schöner See mit W" title="Ein schöner See mit W" width="600">
<h2>Alles in Ordnung?</h2>
<p>HTML hilft uns dabei, Texte zu ordnen:</p>
<ul>
<li>Durch Überschriften</li>
<li>Durch Absätze</li>
<li>Durch Listen</li>
<li>Durch optische Betonungen</li>
</ul>
<footer>KuD rocks even more!</footer>
</body>
Für das angestrebte Layout brauchen wir einen Container, der den header und die darauf folgenden Elemente (h1, h2, p, ul) einschließt, nur der footer muss separat bleiben, da dieser ja über die volle Breite der Seite (des body) gehen soll. Vor HTML5 hätte man als Container-Tag einen <div>-Tag verwendet, nun kann man auch den semantischen Tag <article> verwenden. Unser Inhalt ist ja schließlich eine Art Artikel. Also schließen wir die oben genannten Elemente ein in einen übergeordneten Knoten <article> </article>. Daraus ergibt sich folgender Markup:
<body>
<article><!-- Container für Seiteninhalt -->
<header>HTML rocks!</header>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen <strong>weltweit</strong>
zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text <em>klar strukturieren</em>
und <em>übersichtlich präsentieren</em>.</p>
<h2>Der Schlüssel</h2>
<p>Der <a href="http://de.wikipedia.org/wiki/Webbrowser" target="_blank"
title="Definition in Wikipedia aufrufen">Browser</a> ist das Fenster
in die Welt des WWW. Er ist heute in fast jeder Tasche und jederzeit
mit dem Internet verbunden.</p>
<p>Sogar am See kann man damit Surfen:</p>
<img src="https://webdev.raphael-rossmann.de/wp-content/uploads/see.jpg"
alt="Ein schöner See mit W" title="Ein schöner See mit W" width="600">
<h2>Alles in Ordnung?</h2>
<p>HTML hilft uns dabei, Texte zu ordnen:</p>
<ul>
<li>Durch Überschriften</li>
<li>Durch Absätze</li>
<li>Durch Listen</li>
<li>Durch optische Betonungen</li>
</ul>
</article><!-- Ende Container für Seiteninhalt -->
<footer>KuD rocks even more!</footer>
</body>
Die Ausgabe im Browser ändert sich durch den zusätzlichen Container zwar nicht, aber nun können wir im CSS den Inhaltsbereich gezielt mit den notwendigen Deklarationen versehen. In der Vorlage ist zu sehen, dass der Inhaltscontainer eine vorgegebene Breite hat. Zumindest für Desktop-Browser ist eine derartige Einstellung durchaus üblich, da zu lange Zeilen für uns unangenehm zu lesen sind. Wir fügen also eine neue Regel in unser Stylesheet ein, die auf den Selektor article zielt. Der Reihenfolge im Markup folgend platzieren wir die Regel nach der für den body. Als Eigenschaft brauchen wir hier die Breite, also englisch width, mit einem Wert von 580px:
<style>
/* Unsere ersten CSS-Regeln */
body {
font-family: Arial,sans-serif;
}
article {
width: 580px;
}
h1 {
color: #404040;
/* gleich wie: color: rgb(64,64,64); */
font-weight: normal;
font-style: italic;
font-size: 35px;
text-transform: uppercase;
}
</style>
Die Breite lässt sich, wie in diesem Beispiel absolut deklarieren (meist in Pixeln) oder auch proportional in Prozent. Bei prozentualer Deklaration würde sich der Container allerdings mit der Größe des Browserfensters verändern, dies stellt man aber eher bei kleineren Displays, z.B. Smartphones im Rahmen der Mobiloptimierung (Responsive Web Design) ein. Für unsere Desktop-Version der Seite ist ein absoluter Wert für uns besser zu kontrollieren.
Zu beachten ist: Eine Deklaration der Breite ist nur für sogenannte Block-Elemente, wie <header>, <footer> , <p>, <h1>, <div> möglich. Diese wurden in den Browser-Stilen mit der Deklaration display:block versehen. Block-Elemente gehen ohne weitere Einstellungen über die ganze Breite des Eltern-Elements (entspricht: width:100%;). Block-Elemente werden in der Ausgabe stets untereinander platziert und stehen nicht horizontal nebeneinander: Jedes Block-Element bekommt quasi eine eigene Zeile (Sie können dies auch gut in den Entwicklertools testen, indem Sie unterschiedliche Elemente inspizieren).
Dem gegenüber stehen die sogenannten Inline-Elemente (display:inline). Als Inline-Elemente vordefiniert sind z.B. <a>, <strong>, <em> und <span>. Wie wird am Beispiel unseres Links im HTML gesehen haben, durchbrechen diese Elemente nicht den Textfluss und beanspruchen für sich nicht die volle Breite, sondern nur die Breite und Höhe des umschlossenen Elements oder Textes.
Eine Mischform aus diesen beiden Ausprägungen stellen Elemente mit der Deklaration display:inline-block dar. Diese können zwar mit einer festen Breite und Höhe versehen werden, werden aber nebeneinander dargestellt - dies wird z.B. bei horizontalen Navigationsleisten gerne verwendet.
Die Deklaration der Eigenschaft display hat großen Einfluss auf die Ausgabe eines Elementes im Browser!
Block-Elementen kann eine absolute oder relative Größe zugewiesen werden und sie werden vertikal übereinander dargestellt.
Inline-Elemente folgen dagegen dem Textfluss und erhalten ihre Größe vom eingeschlossenen Element.
Nun sollten wir die Auswirkung unserer Deklaration der Breite für das Block-Element <article> im Browser ansehen. Die Auswirkung ist bisher kaum zu sehen, nur die Zeilen laufen etwas kürzer. Denn alle Container haben bisher die Hintergrundfarbe Weiß aus den Browser-Stilen geerbt. Stellen wir also im nächsten Schritt ein paar Hintergrundfarben ein, dann wird unsere Arbeit etwas leichter.
Die Deklaration der Hintergrundfarbe eines Elements erfolgt über die Eigenschaft background-color. Als Wert können wir die bereits bekannten Farbangaben verwenden. Damit können wir nun dem <header>, <footer> und der Überschrift <h2> eine eigenen Hintergrundfarbe zuweisen. Für den <header>-Container verwenden wir das gleiche dunkle Grau im Hexadezimalformat wie für die <h1>: #404040. Für die anderen beiden Container habe ich aus dem Hintergrundbild, das wir im Anschluss definieren werden, zwei weitere Farben extrahiert: Die <h2> erhalten das dunkle Blau (#04407a) und der <footer> soll mit dem dunklen Rosa hinterlegt werden (#a30064). Da diese drei Farben eher dunkel sind, stellen wir zusätzlich die Textfarbe innerhalb der drei Elemente auf Weiß ein. Im Stylesheet sieht das so aus:
<style>
/* Unsere ersten CSS-Regeln */
body {
font-family: Arial,sans-serif;
}
article {
width: 580px;
}
header {
background-color: #404040;
color:#ffffff;
}
h1 {
color: #404040;
/* gleich wie: color: rgb(64,64,64); */
font-weight: normal;
font-style: italic;
font-size: 35px;
text-transform: uppercase;
}
h2 {
background-color: #04407a;
color:#ffffff;
}
footer {
background-color: #a30064;
color:#ffffff;
}
</style>
Betrachten wir uns das Ergebnis wieder im Browser. Inspizieren Sie bitte ab nun diese Ausgaben auch regelmäßig mittels der Entwicklertools, um sich an dieses Werkzeug zu gewöhnen (professionelle Webentwickler tun das quasi automatisch). Man sieht durch die Hintergrundfarben nun deutlich die Breite der Block-Elemente: der header und die h2 sind nun 580 Pixel breit, also 100% des übergeordneten Elementes ("Elternelement") <article>. Der footer geht dagegen über die volle Breite des Browserfensters und hat somit eine variable Breite. Unschön ist, dass das Bild über den article-Container hinausragt. Dies liegt daran, dass wir dem Bild, das physisch eine Breite von 800 Pixeln hat, innerhalb des <img>-Tags, d.h. im HTML, eine width von 600 zugewiesen haben. Dies können wir aber bei der nächsten Änderung mittels CSS korrigieren, ohne dass wir das im HTML ändern müssen, indem wir für den Selektor img die Eigenschaft width auf den Wert 580px setzen.
Um der Vorlage schnell noch ein Stück näher zu kommen, fügen wir nun dem <body> das Hintergrundbild hinzu. Hintergrundbilder sind im Webdesign ein sehr mächtiges Werkzeug, das wir hier nur kurz anschneiden können. Die zugehöre Eigenschaft heißt background-image. Da hier ja ein externes Bild geladen werden muss (ähnlich wie beim img-Tag) erwartet CSS als Wert die Angabe einer Quelle. In CSS heißt der Wert allerdings nicht src, sondern url(). Als Parameter in Klammern kann man einen relativen Pfad zur Bilddatei ausgehend von der CSS-Datei (z.B. "bild.jpg", wenn die Datei im gleichen Verzeichnis liegt) oder eine absoluten Pfad angeben, der auch eine komplette URL inklusive "http://" sein kann. In unserem Beispiel verwenden wir letzteres.
Die Deklaration lautet dann:
background-image: url('https://webdev.raphael-rossmann.de/wp-content/uploads/texture-20-res.jpg');
Damit das Bild den Hintergrund des Browserfensters immer vollständig ausfüllt, ohne verzerrt zu werden, verwenden wir zusätzlich die Deklaration:
background-size: cover;
Damit erhalten wir nun folgendes Stylesheet:
<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;
}
article {
width: 580px;
}
header {
background-color: #404040;
color:#ffffff;
}
h1 {
color: #404040;
/* gleich wie: color: rgb(64,64,64); */
font-weight: normal;
font-style: italic;
font-size: 35px;
text-transform: uppercase;
}
h2 {
background-color: #04407a;
color:#ffffff;
}
img {
width: 580px;
}
footer {
background-color: #a30064;
color:#ffffff;
}
</style>
Checken wir wieder die Ausgabe im Browser...
Oops, das Hintergrundbild ist natürlich zu unruhig, um durch den Inhalts-Container zu scheinen! Deklarieren Sie daher für das <article>-Element noch die Hintergrundfarbe Weiß. Damit ergibt sich diese Ausgabe, die nun schon deutlich mehr wie unsere Vorlage aussieht. Allerdings klebt unser Inhaltsbereich noch links am Rand und ist nicht, wie in der Vorlage und wie auf vielen anderen Websites, zentriert innerhalb des Browserfensters. Auch ansonsten stimmen die Abstände noch nicht, z.B. um den Text im header-Container herum. Um diese wichtigen Stellschrauben für jedes Weblayout kümmern wir uns im nächsten Abschnitt.
> weiter