Tipps und Tricks: Initiale
Initiale nennt man vergrößerte Buchstaben oder Zahlen am Anfang eines Satzes. Mit CSS ist kein Problem, diese auch auf Webseiten zu verwenden.
,
,
,
,
<p><span style="margin-top:-5px;margin-right:5px; font-size:35px;font-weight:bold;float:left;">H</span> ast du schon gehört:... </p>
H ast du schon gehört: Ein Bug im Netscape Navigator erlaubt es jedem, übers Internet deine Festplatte zu lesen." "Weiß ich, deshalb bleibe ich ja auch bei Netscape." "???" "Na wenn's ein Microsoft-Bug wäre, dann dürfte jeder meine Festplatte auch noch beschreiben.
Dieses Beispiel stellt einen Text mit einem vergrößerten Anfangsbuchstaben dar.
Dafür setzt du den Buchstaben in ein <span>-Tag und fügst ein
float:left ein. Damit fließt der nachfolgende Text rechts an dem Buchstaben vorbei.
margin-top:-5px schiebt den Buchstaben etwas nach oben
und margin-right:5px bestimmt den rechten Abstand zum Text.
Alles andere bestimmt lediglich das Aussehen. Du kannst auch Rahmen und Hintergrundfarben angeben:
,
,
,
,
<p><span style="margin-top:-5px;margin-right:5px; font-size:35px;font-weight:bold;float:left;color:#f00; border:1px solid #000;background-color:#efefef;">E</span> in Säugling wird in der Microsoft Zentrale gefunden... </p>
E
in Säugling wird in der Microsoft Zentrale gefunden. Das Jugendamt ermittelt,
wer der Vater ist. In Betracht gezogen werden auch Bill Gates und seine Mitarbeiter,
dieser Verdacht wird jedoch bald verworfen, denn:
1. "Bei Microsoft war noch nie was nach 9 Monaten fertig." und
2. "Es gibt bei MS nichts was von Anfang an Hand und Fuß hatte."
Mehr findest du im Workshop Browserweiche
Anmerkung:
Ähnliche Effekte kann man mit dem Pseudo-element :first-letter erreichen.
Browser
Nur die älteren Browser, wie der Netscape 4, die die Eigenschaft float nicht kennen, haben Probleme mit diesem Trick. Wenn dich das nicht stört, kannst du diese Technik bedenkenlos einsetzen.