Mini-Website Template
Auf der Suche nach Material im Public Domain, stieß ich auf die Site Grafic Witness, die Illustratoren vorstellt. Unter anderem sind ein paar der Illustratoren schon länger als 100 Jahre tod. Damit sind ihre Arbeiten freiwild.
Kein geringerer als Joseph Keppler war so freundlich mir und der Welt den Schneider zu vermachen, der im Original das Gewandt des Elefanten näht. Was in dem Template wie Baumwolle aussieht, ist in Wirklichkeit eine geschnippelte Wolke von William Hogarth aus jenem Bildkommentar zu Grausamkeit an Pferden.
Die Technik hinter dem Template
Die Technik, die dahinter steht, ist im Grunde sehr einfach. Sobald <html> und <body> eine Höhenangabe haben, kann man Prozentwerte angeben und eine Box mit fester Größe in die Mitte platzieren. Weil in dem System bis zur Kante und nicht zur Mitte der inneren Box (<div class="content">) gemessen wird, zieht man die Pixel bis zur Mitte der Box über die Styleangabe margin wieder ab.
Jedes Element, das ich außerhalb der Box habe, bezieht sich in den Werten auf den <body>. Wenn ich nun die Werte auf die Maße der Box in der Mitte abstimme, in dem ich jeweils zunächst bis zur Mitte gehe und dann vor oder zurück via Pixel in der Margin, dann bleiben die Elemente immer in Bezug zueienander. Um möglichst wenig sich mit Crossbrowser-Pixelschupser-Orgien zu beschäftigen, verzichtet man bei den Basis-Boxen auf die Styleanweisung padding und greift auf eine Schachtel in der Schachtel (<div class="inner">) zurück, die dann über margin und padding die Abstände des Textes zum Rand der Box übernimmt. Damit Die Überschrift immer sauber auf dem Rand sitzt, hat die innere Box im Header noch die Funktion am unteren Headerrand zu sitzen (.inner {position: absolute; bottom: 0; margin-bottom: [knapp über 1/2 Höhe der Box 'content'];}). Die Höhe 50% bei der Headerbox (#header {height: 50%; position: absolute; top: 0;}), sorgt dafür, dass wie mit einer margin-bottom auf die innere Box angewendet wieder die voll Kontrolle über die Bezüge zur führenden Box haben. Wir erinnern uns: Erst zur Mitte und von dort pixelweise zur eigentlichen Position.
Zu beachten ist noch, dass in der Box der Text nicht zu lang werden sollte, denn der Schneider wurde über den Skrollbalken der Textbox gelegt. Also muss der Mausknopf, um den Inhalt rauf und runter zu bewegen, immer so lang sein, dass die Maus noch etwas anfassen kann. Dabei muss man beachten, dass User die Schrift auch größer einstellen können. Sprich Luft lassen.
Will man das Problem mit Skrollbalken vermeiden, kann man auch die Technik "fixed-position" anwenden. Dann wird ein weiterer <div> benötigt, mit dem man den Bereich des unteren Randes abdeckt und eine Grafik mit der der untere Rahmen gestaltet wird. Das Prinzip in Bezug auf das Zusammenspiel bleibt das Gleiche. Das führende Element gibt den Ton an und alle Deko-Elemente und weiteren Boxen (Hier z.B.: <div id="header"> und <div id="sitenavi">) Machen stets wie die führende Box (Hier: <div id="content">) erst den Sprung zur Mitte, bevor sie sich Pixelweise zurückziehen oder vorwärtspreschen.
- Bearbeitungszeit für die Elemente: ca. 1/2 Stunde.
- Entwurf der Seite: 1/4 Stunde tops.
- Ausführung in XHMTL 1.0 und CSS ca. 3-5h je nach Entschlußfreudigkeit
(MSIE 6 zickt hier etwas und benötigt zusätzlich Aufmerksamkeit), Download (ZIP: 24KB)
Der Entwurf und Template mit dem Schneider ist
unter Creative Commons by 2.0 publiziert.
Kurz gefasst:
Der Beitag beschäftigt sich primär mit dem mittig gesetzten Feld für Seiteninhalte.
Artverwandtes:
- Silkester.de:
Noch mehr Beispiele für Anleihen aus der gemeinfreien Welt der Kunstschaffenden. - Templaterie:
Die semantischen Kuchenschnittchen einer Hompage - Templaterie:
Was ist ein Template? - de.selfhtml.org:
Das Box-Modell
