uwepr, handgemachte Webseiten
Home
Willkommen auf meiner privaten Webseite. Sie finden hier zwei Subdomains, welche einem Teil meiner Leidenschaften gewidmet sind:
Ein weiteres Hobby ist leicht erkennbar:
Webseiten schreiben mit (X)HTML und deren Gestaltung mit CSS
Dabei beschränke ich mich nach Möglichkeit auf (X)HTML + CSS + PHP, was der Barrierefreiheit zugute kommt. Javascript kommt zum Einsatz, um Browserfunktionalität nachzurüsten, z.B. im Kontaktformular, oder um die Zahl von Einzeldateien, z.B. in den Galerieseiten von Wandern und Genussklettern, in einem überschaubaren Rahmen zu halten. Neben meinen eigenen Webseiten habe ich den Code und das Design für die Gesellschaft der Freunde der Staatskapelle Halle e.V. und das Roßmäßler-Vivarium 1906 - Verein für Aquarien- und Terrarienfreunde Halle (Saale) e.V. entwickelt.
Zum Design dieser Seite
Normalerweise versuche ich semantisch korrekten HTML-Code mit einem Minimum an CSS ansprechend zu gestalten. Für diese Seite habe ich ausnahmsweise tief in die Trickkiste gegriffen, wofür allerdings zusätzliche Elemente nötig waren. Das Ergebnis ist ein dreispaltiges Layout mit folgenden Eigenschaften:
- Minimal- und Maximalbreite für standardkonforme Browser und für den IE6 mittels einer Expression, abhängig von der Schriftgröße.
- horizontale Zentrierung bei Browserfenster größer der Maximalbreite
- gemischtes dreispaltiges Layout mit Breite abhängig von der Schriftgröße für die Hauptnavigation, fester Breite für die rechte Spalte und flexibler Breite für die mittlere Spalte
- grafische Gestaltung mittels sliding-door-Technik für den Seitenkopf und vorgetäuschte Spalten (Faux Columns)
Dieses Design ist sehr gut geeignet, in der linken Spalte Navigationselemente, in der mittleren Spalte Texte und in der rechten Spalte kleine Bilder mit einer Breite bis zu 170px aufzunehmen.
Die Datei maincssie.css spricht allerdings eine deutliche Sprache, welche Klippen mit dem IE6/7 hier zu umschiffen waren. Das geht mit einer Expression für Mindest- und Maximalbreite nach www.gunlaug.no los und geht mit hasLayout für wichtige Hauptelemente der Seite weiter. Manchmal helfen die Bugs des IE auch: Um clear nach float braucht man sich nicht groß zu kümmern, hasLayout erledigt das Einschließen der float-Container. Die als CSS-Tabelle gestaltete Link-Liste in der linken Spalte wird vom IE6 und IE7 ebenfalls nicht verstanden: ul, li und a mit den über display zugewiesenen Eigenschaften table, table-row und table-cell werden nicht entsprechend dargestellt. Eine inline-block-Simulation mit zoom:1 und display:inline löst das Problem weitgehend. Damit die Linkliste im IE6 an der richtigen Stelle angezeigt wird, ist zusätzlich noch position: relative für sie notwendig.
Leider sind aber nicht alle Probleme mit dem IE6 lösbar: Da die Element-Breite vom IE6 quasi als Mindestbreite interpretiert wird, führen überbreite Inhalte wie z.B. sehr lange Wörter zum Aufdrücken der Container und somit zur Zerstörung des Layouts. So kann es passieren, dass bei Schriftvergrößerung die rechte Spalte vom IE6 aufgedrückt wird, bei Schriftverkleinerung hingegen die mittlere Spalte. Es ist kaum möglich, gängige Kontaktformulare in den Dreispalter einzubauen. Deshalb wurde das Kontaktformular + Impressum als Zweispalter gestaltet. Die folgenden Rechenbeispiele verdeutlichen die Probleme mit dem IE6.
Beispiele für die Berechnung der Spaltenbreite für die Schriftgrößen „Mittel” und „Sehr klein” für den IE6
| Mindestbreite 47.5em | 760px |
| davon 20px für Seiten-Rand | -20px |
| davon 13em für linke Spalte | -208px |
| davon 200px für rechte Spalte | -200px |
| davon 40px für white-space | -40px |
| ergibt eine maximale Elementbreite für die mittlere Spalte von 292px / 18.25em ohne Aufdrücken des Containers. | |
| Mindestbreite 47.5em | 570px |
| davon 20px für Seiten-Rand | -20px |
| davon 13em für linke Spalte | -156px |
| davon 200px für rechte Spalte | -200px |
| davon 40px für white-space | -40px |
| ergibt eine maximale Elementbreite für die mittlere Spalte von 154px / 12.83em, entsprechend 9,625em auf 100% Schriftgröße ohne Aufdrücken des Containers. | |
Daraus ist recht gut ersichtlich, dass es in diesem Layout enge Grenzen für die Breite der Elemente in der mittleren Spalte gibt.
Durch den Wegfall des hasLayout-Konzeptes und die viel bessere CSS-Unterstützung sind für den IE8 keine gesonderten Anweisungen mehr erforderlich. Dafür „glänzt” der IE8 mit neuen Eigenschaften: Obwohl ich bei dessen Installation unter WinXP möglichst restriktive Einstellungen für den Datenschutz getätigt habe meldet die Firewall bei jedem Aufruf von lokal in „Eigene Dateien” gespeicherten HTML-Dateien einen ausgehenden Verbindungsversuch des IE8.
Für die semi-professionelle Gestaltung mit CSS setze ich angesichts der immer noch weiten Verbreitung des IE6/7 weiter auf feste Breiten. Die Probleme mit dem IE6/7, insbesondere mit dem IE6, sind dabei wesentlich leichter beherrschbar.
( Mai 2010)
Eine vollständig scalierbare Box
Hier ist ein Ausblick auf CSS3:
Für eine scalierbare grafisch gestaltete Box sind in CSS2 mindestens vier ineinander verschachtelte Container nötig, mit denen übergroße Hintergrundbilder positioniert werden. Um eine vollständig scalierbare Box in CSS2 mit acht Grafiken zu bekommen, wären acht Container nötig. In CSS3 ist es dann möglich, solch eine Box mit zwei ineinander verschachtelten Containern zu erhalten. Erforderlich sind dafür vier Grafiken für die Seiten und vier Grafiken für die Ecken der Box:
Und hier ist der erforderliche CSS3-Code:
#scalierbox {
background:
url(Grafik/scalierbox-links.jpg) left repeat-y,
url(Grafik/scalierbox-unten.jpg) bottom repeat-x,
url(Grafik/scalierbox-rechts.jpg) right repeat-y,
url(Grafik/scalierbox-oben.jpg) top repeat-x;
background-color: #bcbaf9;
}
#scalierbox-innen {
background:
url(Grafik/scalierbox-unten-links.jpg) left bottom no-repeat,
url(Grafik/scalierbox-unten-rechts.jpg) right bottom no-repeat,
url(Grafik/scalierbox-oben-rechts.jpg) right top no-repeat,
url(Grafik/scalierbox-oben-links.jpg) left top no-repeat;
}
Das Ergebnis können Sie bereits jetzt in modernen Versionen der WebKit-Browser wie Safari, Chrome, Midori oder Arora testen.
( März 2010)
Für eine größere Ansicht bitte jeweils auf das Bild klicken.
Für das Design dieser Seite wählte ich einen schlichten Einspalter mit floatenden Sidebars. Da teilweise erhebliche Textmengen pro Unterseite anfallen, werden so die Scroll-Balken nicht so lang wie vergleichsweise bei der Webseite der „Freunde der Staatskapelle Halle e.V.”. Besonderen Wert habe ich dabei auf die Gestaltung des Seitenkopfes mit Hilfe von Schrift-Formatierungen mittels CSS gelegt.
Hier ging es darum, einen als PDF vorliegenden Entwurf möglichst genau nach zubauen. Deshalb realisierte ich das Projekt als Zweispalter mit float und einer Fußleiste, welche auch das clear übernimmt. Bei diesem Projekt gelang es mir, ohne zusätzliche Anweisungen für die IEs aus zukommen.
Meine Seite zum Thema „Wandern und Genussklettern” ist im Wesentlichen eine Bildergalerie, welche ich zunächst völlig ohne Javascript schrieb. Nachdem die Anzahl der Bilder die 200 überschritt, stellte ich dann auf eine Javascript-Lösung um. Meine Wahl fiel auf popeye. Ein wichtiger Entscheidungspunkt war für mich die Tatsache, dass die Inhalte bei dieser Lösung auch bei abgeschaltetem Javascript zugänglich bleiben. Bei der Überarbeitung des Designs habe ich die Gelegenheit genutzt, auf "content first" umzustellen. Dabei wird eine gefloatete Navigationsbox simuliert mittels Platzhalter und absoluter Positionierung. Außerdem lag mir daran, die Galerien möglichst weit oben zu platzieren, damit bei Großansicht auch bei Hochformat-Bildern möglichst das komplette Bild ohne zu scrollen angezeigt wird. Der IE6 bekommt nur noch ein Basis-Styling geliefert, da er mit popeye im Test auf leistungsschwachen Rechnern einfriert. Dieses Basis-Styling erscheint auch bei deaktiviertem Javascript und kann auf Wunsch in allen gängigen Browsern dargestellt werden.
Meine Seite zum Thema „selbst gehaltene Malawibuntbarsche” habe ich mit einem Minimum an CSS gestaltet. Nur bei der Schriftart habe ich etwas Aufwand mittels @font-face betrieben.
Ein Screen-Shot der vollständig scalierbaren Box, aufgenommen mit Midori.