Seit Beginn dieses Jahres habe ich wieder etwas am Aussehen der Schul-Homepage verändert.
- Der Inhaltsbereich besteht nun aus genau 3 Blöcken à 250 Pixeln mit je 20 Pixeln Rand. Alle div-Container sind jetzt in dieser Standardbreite (bisher nur 235px am rechten Rand). Auch wenn es nur wenig Inhalt gibt, sind sie mit (min-height:188px;) mindestens so hoch wie die typischen Bilder. Allerdings sieht es jetzt manchmal ein bisschen leer aus, wenn es nicht genügend Inhalt gibt.
- Das Design kommt ohne (Hintergrund-) Bilder und Rahmen aus. Jedes Bild würde einen http-request benötigen und die Ladezeit verlangsamen.
- Die Icons oben rechts und unser Logo sind als sprite zusammengefasst.
Ein sprite ist eine Grafik, die nur einmal geladen werden muss und jeweils genau so verschoben wird, dass nur der gewünschte Ausschnitt sichtbar ist.
Zum Vergleich das Facebook-sprite. Update: Eigentlich wollte ich alle Pfeile durch Sonderzeichen darstellen. Da aber selbst der Firefox in der Version 3.6 Probleme mit der Darstellung hat, werden die Pfeile jetzt doch wieder als Grafik geladen. - Da der IE in den älteren Versionen Innen- und Außenabstände der einzelnen Textfelder unterschiedlich darstellt, gab es sogenannte Browserweichen, die alternative stylesheets luden. Da auch die neueren Versionen IE7 und IE8 keine abgerundeten Ecken darstellen können und selbst der IE9 Farbverläufe nicht interpretiert, wäre selbst heute ein alternatives Stylesheet nötig. Allerdings gibt es noch eine andere Lösung:
Unterschiedliche Browser kennzeichnen ihre Befehle mit sogenannten vendor-prefixes. Jeder Browser arbeitet die Befehle für den Hintergrund ab. Die älteren Browser, die noch kein html5 und css3 können, laden das Hintergrundbild während der Rest die Farben direkt im Browser erzeugt. In späteren Zeiten, wenn die alten Versionen verschwunden sein werden, wird nur die letzte Zeile benötigt!
#navigation ul.hauptnavi {
background: transparent url(../images/layout/nav_bg.png); /* Old browsers */
background: -moz-linear-gradient(top, rgba(168,168,168,1) 0%, rgba(14,14,14,1) 69%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(168,168,168,1)), color-stop(69%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -o-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(14,14,14,1) 69%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(168,168,168,1) 0%,rgba(14,14,14,1) 69%); /* IE10+ */
background: linear-gradient(top, rgba(168,168,168,1) 0%,rgba(14,14,14,1) 69%); /* W3C */
}