Ausrichtung schafft Platz und Luft
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Die Seiten in den folgenden vier Abbildungen verdeutlichen, welche Wirkung text-align auf die Lesbarkeit und das Layout einer Seite haben kann. In der folgenden Abbildung wird die Textausrichtung noch nicht genauer definiert, sondern einfach ihren Standardwerten überlassen. Nach dieser Abbildung steht der zugehörige HTML-Code.
Abbildung: Einfaches Seitenlayout ohne Stilregel für die Textausrichtung.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Einfaches Layout ohne Textausrichtung in CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #FFFFFF;
font-family: helvetica, arial, sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<h1>Die zehn Gebote für eine optimale Performance</h1>
<p>Das sorgfältige Studium und die Analyse von mehr als 35.000 Seiten Selbsthilfeliteratur führt zu der Schlussfolgerung, dass es letztendlich nur zehn Basisregeln gibt, die zu optimalen Ergebnissen und Erfolg führen.</p>
<h2>Energie – Bekennen Sie sich zu Spitzenleistung</h2>
<p>Es gibt keine toten Spitzenkräfte, oder? Um auch nur eine minimale Performance zu erreichen, müssen Sie aktiv sein, leben, handeln und sich lebendig fühlen. Wenn Sie nicht die Menge an Energie aufbringen, die Sie benötigen, werden Sie niemals Ihr wahres Potenzial erreichen.</p>
<h2>Mission – Konzentrieren Sie sich auf die wichtigen Dinge</h2>
<p>Bis Sie wissen, was wirklich wichtig für Sie ist, verbringen Sie Ihr Leben mit Dingen, die unrelevant sind. Solange es Ihnen an einer Richtung und an einem Ziel fehlt, sind Sie nicht imstande, eine wirkliche Veränderung in Ihrem Leben herbeizuführen. Wie dem auch sei, alle Selbstbeschränkungen fallen weg, wenn Sie endlich die Macht verspüren, die nur durch wahre Leidenschaft entsteht.</p>
<h2>Haltung – Verwandeln Sie Leidenschaft in Aktion</h2>
<p>Selbst wenn Sie genügend Leidenschaft für die Dinge aufbringen, die wirklich wichtig sind im Leben, solange Sie nicht auch wirklich daran glauben, dass Sie ganz anders leben können, passiert gar nichts. Nichts ändert sich, nicht mal der kleinste Versuch bringt etwas, solange Sie nicht fest genug an sich selbst glauben, um Ihre Leidenschaft in Aktion umzuwandeln.</p>
<h3>Aus: "Die Macht des TQ" von Nine to Five Screen Gems Software Inc. nachgedruckt mit Erlaubnis des Verlegers</h3
</body>
</html>Diese Seite ist nicht sonderlich kompliziert gestaltet und wirkt auch nicht besonders ansprechend, selbst wenn sich jemand für ihren Inhalt interessieren sollte.
Eine Verbesserung tritt ein, wenn wir die oberste Überschrift zentrieren und die Zwischenüberschriften rechts anstatt links ausrichten. Das Ergebnis sehen Sie in folgender Abbildung:
Abbildung: Einfaches Seitenlayout mit ausgerichteten Überschriften.
Um diesen Effekt zu erzeugen, haben wir einfach folgende Stilregeln angelegt:
h1 {
text-align: center;
}
h2 {
text-align: right;
}Zugegeben, das Layout der Seite wirkt noch etwas ungewöhnlich, aber schon deutlich interessanter als in unserem ersten Versuch. Der Weißraum auf der linken Seite erregt zumindest Aufmerksamkeit.
Die Seite besteht aus Überschriften, die mit Absätzen markiger Ratgebersprüche kombiniert werden. Der Inhalt scheint sich daher besser für ein Design zu eignen, wie man es aus Werbeanzeigen kennt. Schauen wir doch einmal, wie die Seite aussieht, wenn wir die Absätze zentrieren. Die folgende Abbildung zeigt das Ergebnis.
Abbildung: Einfaches Seitenlayout mit zentrierten Textabsätzen.
Für diesen Effekt haben wir unser Stylesheet einfach um eine Stilregel für p-Elemente erweitert:
h1 {
text-align: center;
}
h2 {
text-align: right;
}
p {
text-align: center;
}Ob die Seite nun wirklich so besser aussieht oder nicht, Sie merken, worauf unser Beispiel hinausläuft: Es ist nicht schwer, mehr Weißraum auf einer Seite zu erzeugen. Durch einen bewussten Einsatz der Textausrichtung kann man mit einfachen Mitteln Seitenlayouts wirkungsvoller gestalten.
Wir sind jedoch noch nicht fertig mit unserem Beispiel. Die nächste Abbildung zeigt, wie wir die Wirkung des Weißraums durch den Einsatz einer Hintergrundfarbe für die Überschriften weiter verstärken können. Wir wählen dafür Gelb, da es eine helle Grundfarbe ist, die ein Raumgefühl erzeugt, und keinen Farbbalken, der die Seite noch voller macht.
Abbildung: Weißraum wird durch eine helle Hintergrundfarbe betont.
Unser Stylesheet für diese Abbildung mit der Definition der Hintergrundfarbe für h2 sieht jetzt so aus:
h1 {
text-align: center;
}
h2 {
text-align: right;
background-color: yellow;
}
p {
text-align: center;
}| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg