|
|
|
|
| Das Stylesheet-Template (inkl. Reset) | 1. |
| Textumfluss um Motiv des Hintergrundbildes | 2. |
| Layout ohne Tabellen | 3. |
| Prioritäten bei mehreren Stylesheets | 4. |
| Die drei Varianten der CSS-Formatierung | 5. |
|
|||||
|
|
|
|
|
|
|
||||||||||||||||
|
|
|||||||||||||||
|
|
 |
Das Resultat: Fünf Oscar-Nominierungen. Vier Oscars hat der Film schließlich abgeräumt. Mit Hilfe von Blockelementen (DIVs) können Sie Ihren Text um das Motiv (!) des (viereckigen) Hintergrundbildes fließen lassen. Der Text wird zwischen ein Gerüst von mehreren Containern ge- zwängt, welche die linke und rechte Ausrichtung des Textes be- stimmen. Der große Vorteil dieser Methode liegt (u.a.) darin, dass sich Schriftgrößenänderungen -im Gegensatz zur Ausrichtung mit Tabelle(n) oder mit Leerzeichen- nicht negativ auf die Ausrichtung des Textes auswirken - also dazu, dass das sorgsam aufgebaute Layout zerstört wird.
Achten Sie darauf, genug Blöcke “auf Reserve” zu kon- struieren. Bedenken Sie, dass der
Text bei Änderung der Schriftgröße mehr Raum einnimmt. Befänden sich dann Wörter oder ganze Sätze
unterhalb der (untersten) Blöcke, so würde der Text an dieser Stelle das Motiv bedecken (sehr
anschaulich, wenn Sie die Schriftgröße dieses Textes über “Textgröße/-kontrast” erhöhen).
Motiv am rechten Bildrand
Wenn sich das Motiv auf der rechten Seite befindet, so müssen Sie lediglich darauf achten, das Hintergrundbild (innerhalb des dafür vorgesehenen Codeabschnitts) mit Beispielcode: right: 0px; am rechten (Browser-) Rand zu positionieren. Denn so vermeiden Sie ein “verrutschen” der DIVs (weg vom Motiv), wenn der Be- sucher eine “andere” (als Sie) Bildschirmauflösung verwendet, oder einfach nur das Browserfenster verkleinert/vergrößert: Textausrichtung bei 800 x 600 Pixel ... 
... und 1024 x 768 Pixel (Schema). 
“Hinter den Kulissen”
Fünf Oscar-Nominierungen. Vier Oscars hat der Film schließlich abgeräumt.
Der Quellcode
Den hier aufgeführten Quellcode können Sie auch direkt aus dem Beispiel
im externen Browserfenster ent- nehmen:
Beispiel in neuem Browserfenster
Beispielcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Textumfluss um Motiv des Hintergrundbildes
</title>
<style type="text/css">
body {
background-image: url(../../img/
tautou_2.jpg);
background-repeat: no-repeat;
background-position: 10px 15px;
font-family: Verdana, Arial, Helvetica,
sans-serif;
font-size: 12px;
line-height: 18px
}
#drei, #vier, #fuenf, #sechs, #sieben, #acht, #neun,
#zehn, #elf, #zwoelf, #dreizehn, #vierzehn,
#fuenfzehn, #sechszehn, #siebzehn, #achtzehn,
#neunzehn, #zwanzig {
border-width: 1px;
border-style: solid;
border-color: #BD1525;
height: 30px
}
#eins, #drei, #fuenf, #sieben, #neun, #elf,
#dreizehn, #fuenfzehn, #siebzehn, #neunzehn {
float: left;
clear: left
}
#zwei, #vier, #sechs, #acht, #zehn, #zwoelf,
#vierzehn, #sechszehn, #achtzehn, #zwanzig {
float: right;
clear: right
}
#eins {
width: 58px;
height: 35px;
border-width: 1px;
border-style: solid;
border-color: #BD1525
}
#zwei {
width: 54px;
height: 35px;
border-width: 1px;
border-style: solid;
border-color: #BD1525
}
#drei {
width: 76px
}
#vier {
width: 72px
}
#fuenf {
width: 115px
}
#sechs {
width: 92px
}
#sieben {
width: 105px
}
#acht {
width: 112px
}
#neun {
width: 95px
}
#zehn {
width: 72px
}
#elf {
width: 38px
}
#zwoelf {
width: 42px
}
#dreizehn {
width: 125px
}
#vierzehn {
width: 72px
}
#fuenfzehn {
width: 150px
}
#sechszehn {
width: 115px
}
#siebzehn {
width: 168px
}
#achtzehn {
width: 132px
}
#neunzehn {
width: 173px;
height: 53px
}
#zwanzig {
width: 143px;
height: 53px
}
</style>
</head>
<body>
<div id="container" style="background-image:
url(../../img/tautou_3.jpg); background-position:
top right; background-repeat: no-repeat">
<div id="content">
<div id="eins"> </div>
<div id="zwei"> </div>
<div id="drei"> </div>
<div id="vier"> </div>
<div id="fuenf"> </div>
<div id="sechs"> </div>
<div id="sieben"> </div>
<div id="acht"> </div>
<div id="neun"> </div>
<div id="zehn"> </div>
<div id="elf"> </div>
<div id="zwoelf"> </div>
<div id="dreizehn"> </div>
<div id="vierzehn"> </div>
<div id="fuenfzehn"> </div>
<div id="sechszehn"> </div>
<div id="siebzehn"> </div>
<div id="achtzehn"> </div>
<div id="neunzehn"> </div>
<div id="zwanzig"> </div>
</div>
(<strong>Tipp: Verändern Sie die Größe des
Browserfensters</strong>)
<br><br>
Dieses süße Mädel hier ist <strong>Audrey
Tautou</strong>, den meisten besser bekannt
als Amélie. Die französische Schauspielerin
wurde mit dem Liebesfilm “Die fabelhafte
Welt der Amelié” aus dem Jahre 2001
weltbekannt. Einige meinen, dies wäre der
schönste Film der Welt, ein absoluter
Glücksgriff - dem kann ich mich
anschließen.
<br>
Fünf Oscar-Nominierungen. Vier Oscars hat
der Film schließlich abgeräumt.
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br>
</div>
</body>
</html>
Die farbigen Rahmen der Block-Elemente eignen sich sehr gut zum Ausrichten. Danach entfernen Sie sie,
indem Sie im CSS-Bereich “#eins, #zwei, #drei, (...)” die “border”- Angaben
löschen.
Es wird bei der “div id” empfohlen, ein Wort ohne Leer- zeichen zu
verwenden. Auch sollte die “div id” nicht nur aus Zahlen bestehen. Möglich wäre aber eine
Kombination aus Buchstaben und Zahlen.
Wenn Ihnen also die Schreibweise “eins”, “zwei” (...) zu umständlich erscheint, so wäre z.B. “links_1”, “rechts_2” als Alternative gut geeignet.
Fazit:
|
 |
|
|
||||||||||
|
||||||||||||||||
