XHTML SVG CSS PHP

Dr. O. Hoffmann

CSS-Layout

Auf dem Weg sind wir doch alle...
Olaf Hoffmann

Erstes CSS-Layout, CSS lernen

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 floats 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.

Zweites CSS-Layout, Projekt mit mehreren Seiten

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;
}