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.


Seitenanfang | Zurück zu Teil 3

© 2002 http://barrierefrei.e-workers.de