PNG-Bilder statt JPG und GIF?
Tricks mit PNG
Die Breite Ihres Inhaltbereichs können Sie natürlich ebenso flexibel an Ihr Layout anpassen wie das Aussehen Ihres Rahmens. Ändern Sie dazu die Werte für width und border entsprechend.
Sie sollten Ihrem Rahmen auf jeden Fall einen Innenabstand geben, damit der Text nicht direkt auf dem Rand klebt. Im Beispiel ist dieser mit 30 Pixel festgelegt, kann aber über padding flexibel an Ihr Layout angepasst werden.
Haben Sie beim Testen im Browser erkannt, dass der Effekt nicht ganz Ihren Erwartungen entspricht, passen Sie einfach über Ihr Grafikprogramm die Transparenz der Datei transp-black.png an oder ersetzen Sie diese Datei komplett und testen Sie die Darstellung erneut.
Überlagerungseffekte
Beim Umgang mit PNG-Dateien können Sie auch mehrere Ebenen einsetzen und damit auch mit Überlagerungseffekten arbeiten. In einem zweiten Beispiel zeigen wir Ihnen, wie Sie mehrere Ebenen übereinanderlegen können.
Am unteren Ende der Seite sollen zwei Grafiken angeordnet werden, die permanent dort verbleiben sollen. Diese sind überlagert, wobei beide transparente Bereiche enthalten können. Diese werden mithilfe von zwei div-Tags und CSS an der gewünschten Stelle am Ende der Seite platziert.
Die Webseite wird mit einem Hintergrund-Bild versehen, das im Beispiel mit dem Body-Bereich verknüpft ist - ebenfalls eine PNG-Grafik. Damit können Sie dann, falls der Text, den Sie definiert haben, länger ist auch die Grafik entsprechend ins Bild hineinscrollen. Die HTML-Seite besitzt im Body-Bereich somit folgenden Aufbau:
<div id="element_body"><p>Hier steht der Text</p></div><div id="footer_1"><div id="logo_2"></div></div>
Das Stylesheet für element_body stellt lediglich einen Rahmen zur Verfügung, in welchem die folgenden Inhalte dargestellt werden. Darin werden die Farbe des Texts, die Breite des Rahmens und die Abstände festgelegt.
Im Hintergrund des Body-Bereichs haben wir das erste Bild platziert, eine GIF-Datei mit Weiß-Transparenz. Zur Anordnung nutzen wir die Parameter von url, bei welchen Sie prozentual angeben können, wie das Element horizontal und vertikal angeordnet werden soll. Die Werte 50% und 100% geben die Längen- und Breitenangaben prozentual zur Normgröße an.
body {
background: #25b500 url(body-hintergrund.
gif) 50% 100% no-repeat;
font-size: 62.5%;
}
Wir arbeiten an dieser Stelle mit einer Fontgröße von 62,5 Prozent - dies entspricht einer Größe von 10 Pixeln. Wenn Sie mit diesem Wert arbeiten, können auch die Benutzer des Internet Explorers die Font-Größe ohne Probleme skalieren.
Die eigentliche Arbeit wird wie bereits erwähnt von den beiden Footer-Tags footer_1 und footer_2 übernommen. footer_1 platziert ein Element mit einer Höhe von 220 Pixel am unteren Ende des Bildschirms und verankert dieses dort auch über position:fixed. Da unser gewähltes Element deutlich breiter als der zur Verfügung stehende Platz ist, müssen wir keine exakte Breitenangabe einführen. Mit der Angabe width: 100% führt Ihr Browser die Skalierung eigenständig durch. Da ein zweites Element über das Bild des footer_1 gelegt werden soll, wird der z-Index so gesetzt, dass das zweite Bild automatisch darüber liegt.
