Layout Testseiten

Während der Entwicklung der MSXFAQ habe ich verschiedene Test und Spielseiten gebaut, um das Verhalten bei CSS zu evaluieren. ich wollte all die Zwischenstände und Ergebnisse nicht einfach löschen. Sie sind ja auch für mich eine Referenz zum nachschauen und vielleicht interessiert Sie das ein oder andere zum Abschauen oder verbessern:

Bei allen Seiten wurde auf CSS-Dateien verzichtet und das Stylesheet mit in den Code addiert. So kann ich die Seite einfach kopieren und anpassen und gehe nicht in einer Unmenge von CSS-Dateien unter. In der "Produktion" werden die Layouts natürlich ausgelagert.

Große Seitenlayouts

Diese Testseiten beschäftigen sich mit dem Platzieren der Elemente. Wichtig ist die korrekte Anzeige, dass keine Teile verdeckt werden, auf unterschiedlichen Auflösungen und Geräten passend aussehen und auch die Druckausgabe sinnvoll aussieht.

  • Boxtest1
    Versuch1 mit feststehender Fußleiste am Ende. Sieht unschön aus, wenn der Content kürzer als die Navigation ist
  • Boxtest2
    Diesmal darf der Content neben dem Skyscaper auch das Menü umfliessen und der Footer klebt dran. Platznutzung maximiert.
  • Boxtest3
    Klassischer Weg mit umfließen des Skyscraper aber Content umfließt nicht das Menü
  • Boxtest4
    Basierend auf Box3 mit Verschwindetrick für Menü und Skyscraper bei zu wenige Breite. Statt des normalen Menü käme dann ein "miniMenü" zum Vorschein, was aber nur auf kleinen Geräten erscheint-
  • Layout2013
    Das Layout von Box3 nun mit dem MSXFAQ Layout und Verschwindedynamik für Skyscraper

FLOAT-Tests

Auch innerhalb des Content arbeite ich mit Floats und habe dazu einige Testseiten gebaut

  • Float1
    Test um Bilder umfliessen zu lassen. Wichtig war, dass die Abstände stimmen und Folgeabschnitte nicht auch noch mit "reinlaufen". Hier ist das noch nicht, so dass bei großen Fensterbreiten das Layout schlecht wird
  • Float2
    Hier dann die gleiche Seite nur dass die Hauptblöcke für "<p>" und "<h1> - <h3>" mit einem Clear:both bestückt sind.

Menüs

Der "klare Look" von Metro mit den Kacheln gefällt mir schon und ich habe eigentlich vor, dass zumindest die Index-Seiten auch immer eine "Liste" der unterseiten enthalten. Diese Liste "<ul>" können per StyleSheet angepasst werden, d.h. wenn das Layout der Seite sehr "schmal" wird, könnte der Browser das Menü Ausblenden und als Kacheln einblenden. (Siehe auch Boxtest4)

  • Kachel1
    Ein paar Tests mit Kacheln
  • Kachel2
    Ein zweiter Test der schon eher dem Ergebnis nahe kommt. Aber noch mit einem DIV-Tag
  • Kachel3
    Nun das ganze als Class für unnumberedList "<ul>".
  • kachel 4
    Offen sind aktuell noch zwei Punkte.
    1. Anzeige bei viel Text
      Hier würde ich mir wünschen ,dass der Text abgeschnitten wird aber beim "Hover" darüber die Kachel aufgeht und alles anzeigt. Das Aufgehen geht mit "overflow:visible" recht einfach aber das Layout leidet, weil auch ein Z-Index nichts bringt um das drüber zu setzen.
    2. Anzeige bei LI mit "<a>" und Normaltext
      Aktuell ist das komplette Menü ein "Link" und so funktioniert auch hoover. Der Block sollte aber auch den "nicht verlinkten" Anteil enthalten.

Weitere Testseiten kommen gegebenenfalls dazu.