Dr. O. Hoffmann
Auf dem Weg sind wir doch alle...
Olaf Hoffmann
Wir wollen uns nun an einem ersten Layout mit CSS probieren, ich mag das
nicht CSS-Design nennen, weil das durch viele sogenannte web-Designer
bereits einen schlechten Klang hat. Als Werkzeug nehmen wir
erst einmal ein aktuelles Darstellungsprogramm (ab mozilla/gecko 1.5, opera 7.54 oder konqueror 3.2)
und eine gut strukturierte Datei mit Inhalt her:
Kein CSS
Es handelt sich dabei um eine Datei im Format XHTML 1.1. Das wird in alten Darstellungsprogrammen
nicht funktionieren, um die kümmern wir uns später.
Der Inhalt ist in einem
Einzeldokument zusammengefaßt, es handelt sich sich
um den Text 'Projekt erstellen'
beziehungsweise 'Information für alle'. Im Anschluß
gucken wir uns auch noch ein kleines Projekt an,
welches auf mehrere Seiten verteilt ist.
Die Anordnung des Inhaltes im XHTML-Quelltext ist
bereits der Schlüssel zu einem gut strukturierten Dokument.
Die Anordnung ohne jegliches CSS muß vor allem im puren
XHTML-Dokument inhaltlich sinnvoll sein und darf nicht dem Design geopfert werden
Bei diesem Einzeldokument ist ein kleines Menü im oberen Ende der Datei sinnvoll, damit
der Nutzer gegebenenfalls nach einer Leseunterbrechung direkt zu einer Sektion
springen kann. Bei größeren Projekten wird man daher Verweise auf andere
Dokumente eher am Ende der Seite unterbringen, weil der Nutzer zu einem anderen
Dokument erst wechseln wollen wird, nachdem der Inhalt gelesen ist. Mittels CSS kann
diese lineare Anordnung dann einfach umstrukturiert werden, um eine gleichzeitige
Sicht auf Inhalt und Menü zu ermöglichen, auch parallele Anordnung.
Wesentliche Elemente der Datei, die mit CSS ausgezeichnet werden können, als Leerdatei (lediglich einige nützliche Vorgaben für Abkürzungen und Akronyme sind bereits vorgegeben. Vergleiche auch den Quelltext):
html { } body { } h1 { } h2 { } h3 { } acronym:hover, abbr:hover { cursor: help; } abbr[title], acronym[title], span[title] { border-bottom: thin dotted; cursor: help; } a:link { } a:visited { } a:hover { } a:active { } a:focus { } div.mail{ } div.inhalt { } div.text { } div.umkopf { } div.kopf { } div.umfuss { } div.fuss { } div.ulmenu { } ul.menu { } div.ummenu { } div.menu { } a.m:link { } a.m:visited { } a.m:hover { } a.m:active { } a.m:focus { } p:first-letter { }
Als erstes legen wir mal die Schriftart, -farbe und Hintergrundfarbe fest. Soll der gesamte Anzeigebereich mit
einer Hintergrundfarbe (oder einem Bild) versehen werden, so ist die entsprechende Eigenschaft für das
Element html
anzugeben oder ein anderes Element mit dem Hintergrund entsprechend
auszudehnen. Aufgrund einer Sonderregelung kann nur bei HTML auch das Element
body
mit gleicher Wirkung verwendet werden, bei XHTML nicht.
Wenn wir gleich ein
Menü links oben anordnen wollen, schieben wir den body
auch noch um
15em nach rechts...
Die Größe der h?
-Elemente legen wir auch gleich in em fest.
Schritt 1
Schritt 1 CSS
Jetzt schieben wir erstmal das erste Menü per position
: absolute;
nach links oben, legen die Breite auf 13em fest und definieren für das Listenelement die linken Randabstände, weil die für verschiedene Darstellungsprogramme sonst nicht einheitlich sind,
gleichzeitig entfernen wir die Listensymbole und die Einrückung.
Durch position
: relative; für das Element ul
und geeignete Farbangaben erzeugen wir einen Schatten.
Schritt 2
Schritt 2 CSS
Solche Schatten können wir auch schon mal um andere wichtige Elemente herum realisieren.
Weil das etwas mehr hermacht, ziehen wir um die Elemente auch noch einen dünnen Rahmen.
Im Kopfbereich kann man den Platz bei großen Anzeigebereichen besser ausnutzen, daher wird
die h1
-Überschrift mit float
: left;
positioniert und im mail-Bereich ein br
-Zeilenumbruch mit
display
: none;
entsorgt. Und die h3
-Überschriften verzieren wir mit dem Pseudoformat
:first-letter
, ebenso wie Absätze.
Schritt 3
Schritt 3 CSS
Nun macht das Menü noch nicht besonders viel her, das können wir aber schnell und einfach
ändern. Die Elemente li
bekommen einen dekorativen Rahmen und mittels des
Pseudoformates :hover
können wir sie etwas dynamischer erscheinen lassen.
Die Elemente a
darin werden bei der Gelegenheit auch gleich mit Pseudoformaten verziert.
Da das Menü nicht mit dem Inhalt mitrollen muß, wechseln wir dessen Positionierung auf
fixed.
Bei zu langen Menüs geht das nicht, da bekommen wir ein Problem, wenn der Anzeigebereich
kleiner als das Menü wird. Für standardkonforme Programme, die fixed noch nicht
interpretieren, lassen wir position
: absolute davor allerdings
stehen. Der msie hat da einen Fehler, den wir später kompensieren werden.
Schritt 4
Schritt 4 CSS
Unten sieht die Seite mit den beiden doppelten Blöcken noch nicht so schick aus, versuchen
wir also mal beim Fuß den Kasten wieder zu entfernen und den Inhalt unten links zu
positionieren. Um Konflikte mit dem Menü zu vermeiden, legen wir vorsichtshalber noch
jeweils den z-index
explizit fest.
Das Extramenü unten verzieren wir noch mit einem text-align
: center.
Bei so einer Einzeldatei ist dieses Menü natürlich nicht notwendig, bei größeren
Projekten jedoch wird man dort vielleicht die globale Navigation einbauen oder besondere
Verweise, die auf jeder Seite verfügbar sein sollen, wie die Hilfeseite, das Glossar oder
das Impressum, der Kontakt oder das CSS-Stilmenü, falls mehrere Stile angeboten
werden sollen - vorrangig vermutlich erstmal die CSS-freie Version und die Druckversion.
Schritt 5
Schritt 5 CSS
Jetzt gucken wir systematisch mit den üblichen aktuellen Darstellungsprogrammen Mozilla/Gecko, Opera,
Konqueror (2 und 3, alternativ Safari), Amaya und machen gegebenenfalls noch ein bißchen
Feinschliff.
Wird wirklich XHTML verwendet, sind wir eigentlich fertig, nur können etwa Netscape4 und
msie kein XHTML interpretieren, daher sendet man die Seite für diese alten Darstellungsprogramme
dann meist als HTML.
Die Ansicht mit Netscape4 hat zum Glück eine zugängliche, wenngleich doch leicht
fehlerhafte Darstellung geliefert, die aber so gut genug ist. Einzig der msie macht deutliche Probleme
und zeigt groben Unfug an. Das ist nun noch zu kompensieren. Dazu fügen wir folgende
Zeilen in den head
-Bereich hinter dem normalen CSS-link
ein (zudem kann der
msie kein XHTML, darum muß man ihm das XHTML als HTML servieren):
<!--[if lte IE 6.99]> <link rel="stylesheet" type="text/css" href="erstesmsie.css" media="screen" /> <![endif]-->
Dies trifft nun die Versionen kleiner oder gleich 6.99, nicht also Version 7. Da verschiedene Versionen verschiedene
Fehler haben, kann es sein, daß man bei Bedarf auch für verschiedene Versionen verschiedene
Fehlerkompensationen anbieten kann, deren Kommentarzeilen zur Einbindung einfach hintereinander geschrieben
werden können.
In die Datei erstesmsie.css schreiben wir nun, was notwendig ist, damit auch der msie die
Seite brauchbar anzeigt - und wer mag, kann auch noch ein paar dekorative Fehler kompensieren,
die der msie ebenfalls macht. Wichtig ist vor allem, das Menü wieder auf
position
: absolute
zu setzen und die float
s aus dem Kopfbereich herauszunehmen, die den msie durcheinander
gebracht haben. Der Rest bezieht sich nur auf Dekoratives im Menü und kann im Grunde
auch weggelassen werden.
Anmerkung dazu: Weil diese link
-Zeile für andere Programme nur Kommentar ist, ist der
Inhalt der Datei beliebig, kann also auch proprietär und fehlerhaft sein, wenn damit Anzeigefehler
des msie kompensiert werden können. Empfehlenswert ist allerdings auch weiterhin,
in der Datei korrektes CSS zu notieren.
Schritt 6
Schritt 6 CSS
msie CSS
Jetzt könnte man natürlich auch noch ein paar Hintergrundbilder reinpappen,
aber da wir dieses Beispiel nicht überladen wollen, lassen wir es einfach dabei und
genießen die schlichte zeitlose Eleganz des schlanken Designs der Seite.
Weitere Beispiele gibt es unter dem gleichnamigen Menübeitrag, weitere einfache
Übungen zur Positionierung im Menübeitrag Übung.
Als zweites Beispiel gucken wir uns ein Projekt mit mehren Seiten an. Es handelt sich um
den Artikel 'Texte schreiben' beziehungsweise 'Ausgezeichnet schreiben',
in dem es gerade darum geht, wie gut strukturierte Projekte mit XHTML beziehungsweise XML
realisiert werden können.
Die XHTML-Dokumente sind recht schlicht gehalten, bestehend aus einen Kopfbereich, dem
Bereich mit Inhalt und dem Menü. Einige Seiten verfügen über ein zweites
Menü zur Navigation in den Unterkapiteln der Seite.
Das XHTML-Dokument ohne CSS.
Entsprechend die Vorgabe für CSS mit den wesentlichen auszuzeichnenden Elementen:
html { } body { } h1 { } h2 { } h3 { } h4 { } abbr[title], acronym[title], span[title] { border-bottom: thin dotted; cursor: help; } a:link { } a:visited { } a:hover { } a:active { } a:focus { } div.umkopf { } div.kopf { } div.uminhalt { } div.inhalt { } div.inhalt p{} div.ummenu { } div.menu { } div.menu ul { } div.menu ul li { } div.menu strong { } div.ummenu2 { } div.menu2 { } p:first-letter { }
Die übergeordneten Dokumentstrukturen sind mit div
-Elementen realisiert, weil es dafür
keine speziellen Elemente mit besonderer Bedeutung gibt. Tatsächlich sind sogar jeweils zwei
div
-Elemente verwendet worden, entweder um wie beim vorherigen Beispiel Schattenwurf zu simulieren
oder um sonst flexibler in der Gestaltung zu sein. Das ist im XHTML-Quelltext eigentlich das einzige
Zugeständnis an das Layout oder Design, welches aber wegen der fehlenden inhaltlichen
Bedeutung des Elementes div
unwesentlich ist und für die vorgestellten Varianten nicht einmal
notwendig benutzt wird.
Wie beim ersten Beispiel machen wir seitlich Platz für das Menü mit margin
.
Damit auch mal ein Hintergrundbild erscheint, habe ich eines meiner Lieblingsbilder verwendet.
Ich mag ja einfache abstrakte Werke, dieses ist periodisch in x- und y-Richtung und wird dynamisch
mit PHP erzeugt. Bei jedem Aufruf sollte sich ein anderes Bild ergeben - was für den Nutzer
weniger langweilig ist.
Das Hauptmenü wird erst einmal provisorisch absolut positioniert, das Untermenü wird
mit float
eingebaut.
Grobeinteilung
Grobeinteilung CSS
Ich habe ja erst letztens aus meinen ersten Layouts wieder einige Spielereien entsorgt - einfach,
klar und auf den Inhalt konzentriert wirkt immer noch am besten, so soll auch hier nicht mehr
so viel gemacht werden, das Hintergrundbild kann so gut wirken. Die normalen blauen Verweise
sind schlecht lesbar, zwar kann der Nutzer auch andere Farben eingestellt haben, da wir aber
bereits Hintergrundfarbe und Textfarbe festgelegt haben, ist dies auch für die Verweise
sinnvoll festzulegen. Überschriften werden dann auch noch gleich farbig gekennzeichnet
und ein paar andere dekorative Kleinigkeiten geregelt:
Dekoration
Dekoration CSS
msie-Korrektur
Weil das Menü auf fixed
gesetzt wurde, kommt auch wieder eine Korrektur-Datei
für den microsoft internet-explorer zum Einsatz. Damit zudem bei kleinem Anzeigebereich
der Inhalt nicht unzugänglich übersteht, wird auch die bottom
-Position
festgelegt und zudem overflow
: auto gefordert, damit im Bedarfsfalle ein
Rollbalken erscheint.
Als kleinen Spaß wird beim Menü und beim Inhalt beim Drüberfahren mit
der Maus ein teiltransparenter Hintergrund eingeblendet, der das große Hintergrundbild
so etwas dämpft und damit den Kontrast zwischen Hintergrund und Schrift
vergrößert, was die Lesbarkeit noch verbessert. Allerdings kosten teiltransparente
Hintergrundbilder Rechenleistung beim Nutzer. Es sollte also gut besser noch eine einfache
Alternative für jene angeboten werden, die weniger Rechenleistung verplempern
möchten oder können. Da der msie weder Teiltransparenz noch das Pseudoformat
:hover
für div
-Elemente versteht, erübrigt sich hier
sogar eine Fehlerkompensation.
Wenn wir jetzt noch zum sogenannten Dreispalten-Layout kommen wollen, verwenden wir
einfach margin-left
und margin-right
und ordnen die
beiden Menüs entsprechend mit Positionierung an.
Drei Spalten
Drei Spalten CSS
msie-Korrektur
Nun haben wir es eigentlich recht einfach, weil wir im Inhalt keine Bilder haben. Der etablierte Trick, damit große Bilder nicht überstehen, liegt darin, ihre Größe per CSS zu begrenzen:
img.skalieren { max-width: 90%; height: auto; }