XHTML SVG CSS PHP

Dr. O. Hoffmann

CSS-Layout

Es ist noch kein Meister vom Himmel gefallen.
Ovid

Übung

Wer noch gar keine Erfahrung mit CSS-Layout hat, dem seien erst die früheren Abschnitte dieses Projektes empfohlen. Die Erstellung eines kompletten Layouts Schritt für Schritt findet sich im Abschnitt 'erstes CSS' des Menüs.
Hier wollen wir nun ein paar einfache Übungen zum Kastenmodell probieren, dazu legen wir erst einmal eine XHTML-Datei von etwa folgender Form an:


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE
 html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <title>CSS-Layout-Test</title>
    <style type="text/css">
    <![CDATA[
    /*  ... Hier werden die Formate definiert ... */
    ]]>
    </style>
  </head>
  <body>

  <div class="kiste" title="Kiste">
  <ul class="menu" title="Menue">
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
  <li>Punkt 5</li>
  </ul>

  <div class="inhalt" title="Inhalt">

  <p>bla bla </p>
  <p>hier kann noch mehr Text hin ...</p>

  </div>

  </div>
  </body>
</html>

Und damit wollen wir als erstes folgendes Seitenlayout erreichen:

Zum Einsatz relevant sind für unsere Belange erst einmal die CSS-Eigenschaften zur Ausrichtung und Absatzkontrolle von Text (line-height, text-align, vertical-align), Außen- und Innenabstand (margin, padding), Listenformatierung (list-style), Positionierung (position, top, left, right, bottom) und Anzeige (max/min-width, height, float, z-index, display, visibility).

  1. Aufgabe: Obiges Layout mit position: static sinngemäß erstellen, nutze float für das Menü und margin-left für den Inhalt.
    Lösung 1
    Frage: was passiert, wenn der Inhalt des Menüs größer wird als der beim Inhalt mit margin-left vorgesehene Platz? Was macht man, um das Menü auf die rechte Seite zu bekommen?
  2. Aufgabe: Nehme statt position: static nun position: absolute und positioniere mit top und left.
    Lösung 2
    Fragen: Was passiert, wenn der Inhalt des Menüs größer wird als der beim Inhalt mit left vorgesehene Platz?
    Was passiert dann beim Einsatz von z-index? und bei float? oder wenn die Breite des Menüs mit width eingeschränkt wird?
    Alternativ: Platz für das Menü mit margin-left oder margin-right für das Element body schaffen und das Menü mit position: absolute positionieren.
  3. Aufgabe: Setze das Menü auf position: fixed, Inhalt auf static oder absolute. Was passiert beim Rollen der Seite? Das Menü sollte stehenbleiben. Tut es das nicht, ist das Darstellungsprogramm veraltet.
    Lösung 3
    Fragen: Was passiert, wenn das fixierte Element größer als das Anzeigefenster (und der Inhalt kleiner) ist? Funktioniert float noch? Was passiert bei einem Überlapp? Wie sieht es mit dem z-index aus - bei position: static und absolute?
    Gebe für das fixed positionierte Menü eine definierte Höhe an oder aber sowohl top als auch bottom und zusätzlich overflow: auto. Was passiert nun bei Überstehendem Inhalt?
  4. Aufgabe: Nun soll das Menü oben auf der Seite erscheinen, und zwar so, daß die Einträge nebeneinander stehen. Im html-Bereich soll dafür nur der eigentliche Listeneintrag geändert werden - ein Stern als Trennzeichen kann auch noch hinzugefügt werden.
    Lösung 4
    Fragen: Wie wirkt sich fixed beim Menü auf den Inhalt aus? Zum Beispiel mit margin-top wäre also oben ausreichend Platz zu lassen - bei verschiedenen Fenstergrößen testen! Und wie kann nur durch Änderung der Stilvorlage erreicht werden, daß das Menü unten erscheint? (einmal mit position: absolute und einmal mit fixed?) Und wie sieht es dann mit zu reservierendem Platz aus?
  5. Aufgabe: Wir binden ein Bild in den html-Bereich ein (innerhalb des Inhaltes) und geben dem Element img den Klassennamen 'bild'. Die Breite setzen wir willkürlich zu Übungszwecken auf 600 Pixel. Dazu nehmen wir ein weiteres mit einer Breite von weniger als 200 Pixeln. Begrenze einmal das Inhalts-div-Element auf eine minimale Breite in Pixeln, dann in 'em' und in Prozent und das Bild auf eine maximale Breite in 'em' und dann in Prozent. Ansonsten kann das Layout von Aufgabe 1 genutzt werden.
    Lösung 5
    Fragen: Was passiert, wenn das Bild größer als der Inhaltsbereich wird? Was ist der Nachteil der Angabe der minimalen Breite in Pixeln für den Inhalt? Warum ist es besser, provisorisch die maximale Breite des Bildes in em festzulegen?
    Anmerkung: Optimal ist es natürlich, die Bilder gleich so zu dimensionieren, daß es unwahrscheinlich ist, daß der Nutzer solche Notskalierungen überhaupt zu sehen bekommt, wie das etwa beim kleineren Bild passiert.
  6. Aufgabe: Etwas kniffliger ist es, mit Prozentangaben für horizontale Maße zu erreichen, daß der Anzeigebereich ausgewogen ausgefüllt wird und der Inhalt doch nicht so breit wird, daß er schlecht lesbar wird - einfach mal ausprobieren...
    Lösungsbeispiel 6
  7. Aufgabe: Wem bei Nutzung eines hinreichend neuen Programmes (Geckos, Opera, Konqueror) die lustigen Effekte im Menü aufgefallen sind - es geht noch viel spektakulärer mit ganzen Auswahlmenüs. Es soll ein Beispiel versucht werden, bei dem der Pfeil beim Pseudoformat :hover für das Element a neben dem Kasten erscheint und zum Beispiel bei :active eine andere Farbe annimmt...
    Lösungsbeispiel 7
  8. Aufgabe: Bei mehrseitigen Dokumenten ist es meist sinnvoll, im Quelltext das Menü auf den Inhalt folgen zu lassen, weil der Nutzer das Menü erst wieder braucht, um auf eine neue Seite zu wechseln, wenn der Inhalt gelesen ist. Blinde Nutzer möchten zudem nicht immer auf jeder Seite erst das Projekt-Menür vorgelesen bekommen, bevor es mit dem Inhalt weitergeht. Daher ändern wir obige XHTML-Vorlage so, daß erst der Inhalt kommt, dann das Menü und beginnen wieder bei Punkt 1, testen alles auf Durchführbarkeit und testen alternative Lösungsmöglichkeiten. Man beachte insbesondere, daß floats nur auf den folgenden Text wirken, diese also für die Positionierung von Menüs nur noch von sehr begrenztem Nutzen sind.
  9. Aufgabe: Wer Spaß dran hat, kann sich ja einmal am 'Zen Garden' probieren, ein Projekt zu ausgefuchstem CSS-Design:
    » 'Zen Garden', deutsche Übersetzung