Um noch einmal auf den Bilderslider zurückzukommen: In dieser Variante bediente ich mich wieder der ursprünglichen Struktur, den gesamten Inhalt in eine Liste zu schreiben.

Javascript fängt fehlende CSS3-Fähigkeiten ab. Einem Browser der weder Javascript noch CSS3 unterstützt bleibt schließlich noch der CSS2.1-Hover-Effekt.

Code

Ansehen

Zwei Dinge stören mich bei der reinen CSS3-Version doch noch. Immerhin, es funktioniert. Wer einen geeigneten Browser hat, kann sich nun durch die einzelnen Bilder durchklicken. Da die <spans> mit den Bildern drin erst dann eine Ausdehnung bekommen, wenn sie "getarget" sind, bekam der Divcontainer in der vorherigen Version das erste Bild als Hintergrund, damit man beim Aufrufen der Seite nicht ins Leere blicken muss. Ungünstigerweise ist das jedoch dann das Bild, welches vom jeweils angewählten Bild "weggeschoben" wird. Das ist nicht schlüssig. Es sollte das jeweils vorherige Bild sein. Außerdem hätte ich gerne wieder das Thumbnail zum Bild ohne das transparente PNG darüber.

Also doch wieder ein bisschen Javascript. Beim Klicken auf ein Thumbnail ändert sich die Bodyklasse, und der Divcontainer bekommt ein anderes Hintergrundbild.

Auch hier wieder eine Videoaufnahme für Browser die noch kein CSS3 unterstützen.

Code

Ansehen

Heute Nacht vor dem Einschlafen kam mir die Idee, einen Versuch mit CSS3 zu starten und mit der Pseudoklasse "target" und für den Slideffekt "transition" zu arbeiten - und dabei so wenig wie möglich umbauen zu müssen. Erst mal war ich enttäuscht. Mein Standardbrowser Firefox steuerte zwar die Bilder an wie gewünscht, aber kein Slideeffekt. Dann öffnete ich Opera...

Das "Sollergebnis" zeigt das Video (noch nicht ganz, kleiner Fehler ist noch drin). Firefox und Internet-Explorer 9 (gibt es erst als Preview) zeigen das jeweils durch Klick auf sein Thumbnail ausgewählte Bild. Die gängigen Internet-Explorer (7 und 8) machen gar nichts, auch nicht mehr beim Hovern, da ich die HTML-Struktur für den neuen Versuch verändern musste. Opera, Safari und Chrome hingegen zeigen bereits einen Slideffekt (und hier ist auch der Fehler, es wird immer dasselbe Bild überblendet), und das ganz ohne Javascript.

Code

Ansehen

Bei reinem CSS wie im vorangegangenen Beispiel kann ein Bildwechsel nur beim Hovern über ein anderes Thumbnail erfolgen. Immerhin ist so eine Bedienung auch mit Browsern möglich, in denen Javascript gar nicht läuft. Für alle anderen erhöht sich der Komfort der Konstruktion mit Hilfe eines kleinen Kniffs. Der Body wechselt beim Anklicken eines Thumbnails seine Klasse, und das gewählte Bild bleibt bis zum nächsten Clickevent sichtbar - sofern kein Hovereffekt es überblendet. Hovern hat immer Vorrang (festgelegt mit z-index). Auch bleibt nun das Thumbnail des jeweils ausgewählten Bildes voll sichtbar, außer die Seite wurde gerade frisch geladen.

Code

Ausprobieren

(getestet mit den aktuellen Versionen von Firefox, Safari, Opera, Internet-Explorer 7 und 8)

Code

Ausprobieren

Anfang dieser Woche war es mal wieder so weit. Ich bekam Lust auf ein neues Layout. Diesmal wollte ich ein konstantes Layout das auch beim Scrollen stehen bleibt. Mit der Scrolleiste wird nur der Textbereich bewegt, und zwar unter den Layoutrahmen hindurch.

Die Bearbeitung der Template-Dateien nahm drei Tage in Anspruch. Dann startete ich Windows 2000, mit IE6, in der Virtual Box und warf einen Blick drauf. Damit konnte ich dann doch nicht leben (trotz des Vorsatzes mir nichts mehr aus der IE-6-Darstellung zu machen).

Das Originallayout im IE6. Die Inhalte kommen ganz weit unten. Die positionierten Rahmen-Divs wurden zuvor untereinander angeordnet.

Layout meiner Website in Firefox und IE7

Layout meiner Website im Internet Explorer 6, nachdem ich die Rahmenelemente einfach ausblendete und die Menü-Listenelemente im Headerbereich floaten ließ.

Der gesamte Gestaltungsrahmen ist im IE6 ausgeblendet. Das Menü wird in einem eigenen Container, der nur im IE6 (Kopfbereich) sichtbar ist, generiert. Außerdem habe ich die Breite auf 740 Pixel reduziert, denn wer noch den IE6 fährt hat ja vielleicht auch noch einen älteren kleinen Monitor. An der Formatierung der Inhalte selbst musste ich nichts mehr verändern. In einer Stunde (inklusive Tests) war die Anpassung vollzogen. Nein, so schnell geht das nicht immer.

Layout für mobile Endgeräte

Bisher war sie in meinen Webprojekten noch drin, für 2010 gilt das nicht mehr. Die Unterstützung des Internet-Explorer 6 mit eigenen CSS-Anweisungen um seine Bugs auszugleichen, stelle ich ab sofort ein. Meine eigene Website hatte ich bereits bei der letzten Neuauflage nicht mehr angepasst. Bei Betroffenen bitte ich dafür um Verständnis und empfehle die Installation einer neueren Internet-Explorer-Version oder eines modernen Alternativbrowsers.

Sollte die Internet-Explorer-6-Kompatibilität jedoch aus besonderen Gründen noch erforderlich sein, erfolgt die Anpassung selbstverständlich auf Wunsch.

... ein Hintergrundbild und eine Hintergrundfarbe haben? - Ja, jedoch kommt es auf die Reihenfolge an (dass das einen Unterschied macht fiel mir erst auf, als ich es mal versehentlich umkehrte).

So ist nur das Bild zu sehen, aber keine Farbe:
body {
background-color:#e2decf;
background:url(pix/hintergrundbild.png) repeat-x 0px 40px;
}

So geht's:
body {
background:url(pix/hintergrundbild.png) repeat-x 0px 40px;
background-color:#e2decf;
}

Nachfolgendes Beispiel zeigt wie ein Bild mit runden Ecken für ein Liquid-Layout eingebunden werden kann, das in der Breite flexibel ist. Ergänzt habe ich das Beispiel noch mit zwei Textboxen, bei denen dieselbe Methodik zur Anwendung kommt.

Beispiele ansehen

Beispiele downloaden (ausgiebig dokumentiert, auf Browserkompatibiltät getestet)