Notwendige Quellcodes für Teil 3
Im HTML-Code wird der neue Container t-box geöffnet, und zwar innerhalb des Containers content. Anschließend wird eine Überschrift definiert (optional) und der Container teaser eingefügt. Der Teaser selbst muss als Klasse (class="teaser") definiert werden, da er mehrfach vorkommen kann. Zu beachten ist hier auch die korrekte Verschachtelung - erst werden alle (falls mehrere) teaser geschlossen, ganz am Ende der Container t-box.
...
<-- Hier beginnt der Container 'content' -->
<div id="content">
<-- Hier beginnt die Teaser-Box -->
<div id="t-box">
<h4>Mitteilungen</h4>
<-- Hier beginnt der Container 'teaser' -->
<div class="teaser">
<div class="t-head">
<strong>Überschrift1</strong>
</div>
<div class="t-txt">
Hier steht der Text oder
sonstiger Inhalt des Teasers.
</div>
</div>
<-- Der Container 'teaser' kann beliebig oft wiederholt werden. -->
</div>
<-- Hier endet die Teaser-Box -->
...
Inhalt des Containers 'content'
...
</div>
<-- Hier endet der Container 'content' -->
Die dazugehörigen Anweisungen im Stylesheet sehen so aus:
/* Die Teaser-Box */
#t-box {
float: right;
display: block;
}
/* optional */
#t-box h4 {
letter-spacing: 1px;
color: #666;
}
/* Der eigentliche Teaser (als Klasse!) */
.teaser {
width: 180px;
background-color: #e7d5b5;
border: solid 1px #09c;
margin: 1px 1px 10px 10px;
}
.t-head {
font-family: 'Trebuchet MS',sans-serif;
background-color: #09c;
color: #e0e0e0;
padding: 3px;
margin: 0;
font-size: 85%;
}
.t-txt {
font-family: Arial,sans-serif;
color: #000000;
padding: 5px;
line-height: 150%;
font-size: 75%;
}
Die Klassen t-head und t-text dienen lediglich zur Formatierung der Überschriften und Textblöcke innerhalb der Teaser.