Darstellung überprüfen, weitere Beispiele

Für diese Art der Platzierung geben Sie die angenommene Breite in Pixel für Ihre Webseite an, damit die Platzierung entsprechend erfolgen kann. Da das Hintergrundelement 900 Pixel breit ist und sich die Positionierung daran anlehnt, wird die Breite analog gewählt.

Unser Beispiel war nur eine abstrakte Spielerei, im täglichen Einsatz können Sie jedoch Ihre Webseite so gestalten, dass Sie am unteren Ende beispielsweise Kontaktdaten, Impressum und weiterreichende Links platzieren. Eine Sammlung an Beispielen von Footern, die auf CSS und oftmals auch auf PNG basieren, finden Sie hier.

Durch die freie Kombination der beiden Elemente haben Sie auch mehr Flexibilität in der Gestaltung. Sind beide bereits im Vorfeld über ein Grafikprogramm zu einer Einheit verschmolzen worden, müssen Sie bei der Neugestaltung das komplette Design wieder anpassen. In diesem Beispiel genügt es, eine der beiden Dateien auszutauschen und gegebenenfalls die Positionierung der Elemente zu überprüfen.

Darstellungsprobleme

Gerade mit älteren Browsern gibt es massive Darstellungsprobleme im Zusammenhang mit PNG und der Transparenz der Bilder. Nutzen Sie einen der aktuellen Browser, lassen sich diese Probleme für Sie nicht mehr nachvollziehen. Damit Sie sichergehen können, dass Ihre Darstellung korrekt arbeitet und der Hack für den Internet Explorer bis Version 6 auch wie geplant funktioniert, sollten Sie dies vorab prüfen.

Da sicherlich nicht mehr alle eine alte Version des Browsers parallel installiert haben, bietet sich die Nutzung eines Dienstes, wie Browsershots an. Mit diesem können Sie die Interpretation der Webseite simulieren.

Das Tool arbeitet die Darstellung der URL über alle angegebenen Browser ab und fertig jeweils einen Screenshot an. Dieser wird anschließend ausgegeben. Abhängig von der Anzahl der ausgewählten Browser kann die Bearbeitung bis zu einer Stunde dauern.

Beispiele und Ideen

Diese Beispiele mit PNG-Grafiken lassen sich noch beliebig ausbauen. Auf der Webseite von Self-HTML finden Sie ein Beispiel, in dem mithilfe von CSS und PNG-Dateien sowohl am oberen, als auch am unteren Ende des Fensters eine Art Vorgang platziert wurde und der Bereich dazwischen für die Darstellung von Text verwendet wird (aktuell.de).

Auch für die Navigation lassen sich PNG-Grafiken gut einsetzen. Auf der Webseite von Creative Pro wird erläutert, wie Sie mithilfe von CSS und PNG eine ansehnliche Navigation darstellen können (www.creativepro.com).