first-letter über 2 zeilen

[HTMLton]

hallo

Wie stell ich es an, wenn ich den first-letter über 2 oder mehrere Zeilen spannen will (so wie die von der Zeitung das machen)?

gruss
HTMLton

[Orlando]

Hi HTMLton,

hallo

Wie stell ich es an, wenn ich den first-letter über 2 oder mehrere Zeilen spannen will (so wie die von der Zeitung das machen)?

mit :first-letter kannst du das nicht umsetzen, du musst den ersten Buchstaben auch im Markup trennen:

span.absatz {
 font-size:3em;
 float:left;
}

<p><span class="absatz">b</span>la bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

Grüße,
 Roland

[MudGuard]

Hi,

Wie stell ich es an, wenn ich den first-letter über 2 oder mehrere Zeilen spannen will (so wie die von der Zeitung das machen)?
mit :first-letter kannst du das nicht umsetzen, du musst den ersten Buchstaben auch im Markup trennen:

p:first-letter { font-size:2.5em; vertical-align:top; float:left; padding:0.1em; }

erzeugt den erwünschten Effekt im Mozilla und im IE (sie unterscheiden sich etwas darin, wieviele Zeilen der Buchstabe braucht, da müßte man noch etwas mit der Schriftgröße und ggf. dem padding-top/padding-bottom spielen...
Opera hab ich grad keinen hier.

cu,
Andreas

[HTMLton]

Hi,

span.absatz {font-size:3em;float:left;}
<p><span class="absatz">b</span>la bla bla [...] bla bla</p>

----------

p:first-letter { font-size:2.5em; vertical-align:top; float:left; padding:0.1em; }

vielen Dank für die beiden Lösungsansätze, werde es bei nächster Gelegenheit ausprobieren.

gruss
HTMLton

ps: das thema sollte eigentlich schon CSS heissen, wer sieht, um welche zeit ich gepostet habe, versteht mich vielleicht :)

[Orlando]

Hi Andreas,

p:first-letter { font-size:2.5em; vertical-align:top; float:left; padding:0.1em; }

das war mein erster Ansatz.

Opera hab ich grad keinen hier.

Opera 6.05 beginnt den weitergehenden Text rechts neben dem ersten Buchstaben und zwar in jeder Zeile.

Opera 7.03 rendert den ersten Buchstaben größer, der weitergehende Text steht jedoch wie angenagelt auf der Grundlinie.

In beiden Browser ist erkennbar, was gewünscht ist, leider aber auch, dass es nicht funktioniert. Oder ich habe irgendetwas verstellt, denn jetzt zeigt das von mir gepostete Beispiel plötzlich eine andere Wirkung als zum Zeitpunkt, als ich es gepostet habe...

Grüße,
 Roland