Pseudo-Formate in Text

[Alan]

Hallo,
ich möchte die erste Buchstabe von manchen Worter im Fliseetext anderes Formatieren.
Mit den Tags DIV oder P funktioniert das:
.persons_name:first-letter { color: #ff0000; }
Aber dann nur am Anfang eines Absatzes.

Im Fliesstext könnte ich einen SPAN Tag benutzen, aber dann funktioniert das first-letter nicht.

Hat jemanden Ideen?

Vielen Dank

Alan

[Thomas J.S.]

Hallo,

Mit den Tags DIV oder P funktioniert das:
.persons_name:first-letter { color: #ff0000; }
Aber dann nur am Anfang eines Absatzes.

Klar, denn es wird ja eben nur das erste Buchstabe anders formatiert.

Im Fliesstext könnte ich einen SPAN Tag benutzen, aber dann funktioniert das first-letter nicht.

Wo/Warum funktioniert(e) ein:
<span class="persons_name">Bla Blabla</span> nicht ??

Grüße
Thomas

[MudGuard]

Hi,

.persons_name:first-letter { color: #ff0000; }
Im Fliesstext könnte ich einen SPAN Tag benutzen, aber dann funktioniert das first-letter nicht.
Wo/Warum funktioniert(e) ein:
<span class="persons_name">Bla Blabla</span> nicht ??

The :first-letter pseudo-element matches parts of block-level elements only.

Zitiert aus: http://www.w3.org/TR/REC-CSS2/selector.html#first-letter

Span ist ein Inline-Element...

cu,
Andreas

[Alan]

Hi,

Span ist ein Inline-Element...

Schade...
Aber ich habe etwas gelernt - danke.

Gruss,

Alan

[Alan]

Hallo,

Wo/Warum funktioniert(e) ein:
<span class="persons_name">Bla Blabla</span> nicht ??

Im Header habe ich:
<STYLE TYPE="text/css">
 .persons_name { font-size: 90%; text-transform: uppercase; }
 .persons_name:first-letter { font-size: 110%; vertical-align: bottom; }
</STYLE>
und in Body dann:
Text Text <SPAN CLASS="persons_name">Müller</SPAN> Text Text Text.

Dies ist eigentlich ein Versuch einen Workaround zu machen für "font-variant:small-caps" da in IE 5.0 & 5.5 die erste Buchstabe nicht grosser gemacht wird.

Gruss,

Alan

[MudGuard]

Hi,

.persons_name { font-size: 90%; text-transform: uppercase; }
.persons_name:first-letter { font-size: 110%; vertical-align: bottom; }

Ach ja, mit _ in class names solltest Du vorsichtig sein.
Der ursprüngliche CSS2-Standard erlaubte diese nicht.
Manche Browser mögen _ in class daher Namen nicht...

Das wurde erst in den Errata korrigiert, aber einige Browser haben das nicht korrigiert.

cu,
Andreas

[Alan]

Hi,

Ach ja, mit _ in class names solltest Du vorsichtig sein.
Der ursprüngliche CSS2-Standard erlaubte diese nicht.

Noch etwas gelernt.
Weiss Du ob dann "-" erlaubt ist?
Es wurde mich ein Bißchen Zeit sparen...

Gruss,

Alan

[MudGuard]

Hi,

Weiss Du ob dann "-" erlaubt ist?

Ja. Und ja, es ist erlaubt.

cu,
Andreas