— Beispiele —

Bilder als Kachel-Hintergrund

Ein ganz verzwicktes Thema. Man muss passende Bilder finden, die möglichst oben einen „glatten“ Bereich für den Text haben. Die Bilder müssen im Format 16:9 oder 4:3 vorliegen. Man darf nur „sehr wenig“ Text reinschreiben. Wird der Text zu lang, werden alle Bilder in einer Reihe, rechts und links beschnitten.

Die CSS-Klassen, die für die Kacheln verwendet wurden, stehen jeweils unter den Bildüberschriften. Die Bilder müssen im Template-Images-Ordner liegen. Die Festlegungen für die Bildnamen stehen in der stylesheet.css im Abschnit /* background images */ ziemlich weit oben.

Letztendlich ist es eine ziemlich heikle Sache. Man muss es eben ausprobieren, wenn man es denn will ;-)

Bild 1

w33 txtWhite txtShadow bgImg bgImg01 ratio16x9

Bild 2

w33 txtAmber txtShadow bgImg bgImg02 ratio16x9

Bild 3

w33 txtAmber txtShadow bgImg bgImg03 ratio16x9

BILD 4

w25 txtYellow txtShadow bgImg bgImg04 ratio4x3

BILD 5

w25 txtYellow txtShadow bgImg bgImg05 ratio4x3

BILD 6

w25 txtYellow txtShadow bgImg bgImg06 ratio4x3

BILD 7

w25 txtYellow txtShadow bgImg bgImg07 ratio4x3

Bilder Im Text

Hier folgen noch ein paar Beispiele, wie man Bilder „normal“ innerhalb der Kacheln positionieren kann.

Chair

Bild rechts randlos

CSS-Klasse: div.imgRrimless

Vorgehen

Auf der Seite gleich als erstes einen DIV-Bereich erstellen und ihm die Klasse div.imgRrimless geben. Darin das Bild platzieren.

Danach (hinter dem DIV) folgt normal der eigentliche Seitentext inklusive Überschrift usw.

Das Bild wird immer 40% des verfügbaren Bereiches einnehmen. Das bleibt auch bei kleinen Bildschirmen so. Der Text umfließt das Bild links.

Toscana

Bild normal

Bilder können auch völlig ohne Klasse gesetzt werden. Dazu an der gewünschten Stelle einen Absatz (Blockelement) setzen und dort das Bild einfügen. Der Text umfließt das Bild dann nicht.

In diesem Beispiel ist das Bild groß genug für die volle Kachel-Breite. Es wird auch bei kleineren Viewports nicht über diese Breite hinauslaufen, sondern sich proportional verkleinern. Der Absatz mit dem Bild wurde über der ersten Überschrift eingefügt.

Bild ausgerichtet

Die CSS-Klassen p.txtCenter und p.txtRight können die Inhalte zentriert bzw. rechts ausrichten. Das funktioniert auch bei DIVs und Überschriften. Und wenn ein Bild mit transparentem Hintergrund enthalten ist: umso besser.

Harley Davidson
Harley Davidson: p.txtCenter

Nur mal nebenbei bemerkt: Die Lenkradschaltung des folgenden Fahrzeugs konnte man gut mit zwei Fingern bedienen. Ein herrliches Fahrgefühl. Und durch die getönten Scheiben im Dach, war immer „schönes Wetter“. Ich hatte ein paar Jahre das Vergnügen.

Wartburg 312
Wartburg 312 Camping: p.txtRight