06.01.2008
Newsbox, Infobox, Teaser
Es handelt sich um die kleinen Boxen, aus denen die neuesten Informationen einer Website als Kurzmeldung hervorgehen und von denen aus dann gerne zu weitergehendem Inhalt verlinkt wird. Sie sind meist in einer sogenannten "Adbar" angeordnet und sehen etwa aus wie in dieser Demo.
Solche Kästchen lassen sich mit CSS sehr einfach gestalten. Sehen wir uns zunächst den HTML-Quelltext an:
<div class="box">
<h4>Newsbox</h4>
<p>
In diese Newsbox kann man aktuelle Kurznachrichten einfügen und ggf. zu weitergehenden Berichten verlinken. <a href="../0011.php">zurück</a>
</p>
</div><!--Ende Box-->
Wir öffnen die Box mit einer Div-Klasse (Klasse deshalb, weil das Element auf einer Seite mehrmals vorkommen kann), fügen eine Überschrift ein und den Text packen wir in einen Absatz. Danach wird die Box wieder geschlossen.
Auch die CSS-Angaben sind recht einfach:
.box
{
width: 200px;
border: 1px solid #00008B;
background: #F1EDC2;
margin-bottom: 15px;
}
h4
{
padding: 3px 0 3px 8px;
background: #00008B;
color: #fff;
font-size: 0.9em;
margin: 0;
}
.box p
{
font-size: 0.8em;
padding: 8px;
margin: 0;
}
Die Klasse ".box" enthält eine Breitenangabe, einen Rahmen und eine Hintergrundfarbe (sofern erwünscht). Der Wert margin-bottom: 15px; dient dazu, einen Abstand zur jeweils nächstfolgenden, darunter angeordneten Box herzustellen.
Bei der Überschrift achten wir insbesondere darauf, dass der letzte (rechte) Wert mit dem späteren Padding-Wert für den Absatz übereinstimmt, damit sie "auf Flucht" mit dem Inhaltstext kommt. Der Wert margin: 0; sorgt dafür, dass der Abstand zum Text nicht zu groß wird. Ansonsten Hintergrund- Schriftfarbe und Schriftgröße nach Belieben hinterlegen.
Mit der Klasse ".box p" legen wir nun noch spezielle Angaben für den Text innerhalb eines Absatzes in dieser Box fest. Auch hier dient der Margin-Wert "0" wieder der Vermeidung von zu großen Abständen.
nach oben