filter() ohne Zeilenumbruch?

[Jürgen Meiser]

hallo
ich benutze die CSS filter() und bekomme danach aber immer einen zeilenumbruch. kann man den irgendwie verhindern? sieht irgendwie dumm aus wenn das glühende wort in einer extra zeile steht.
danke euch

[Tobias Kloth]

Hallo Jürgen,

ich benutze die CSS filter()

Warum?

und bekomme danach aber immer einen zeilenumbruch. kann man den irgendwie verhindern? sieht irgendwie dumm aus wenn das glühende wort in einer extra zeile steht.

Wie sieht denn dein Code aus?

Grüße aus Nürnberg
Tobias

[Jürgen Meiser]

Ich habe es so wie in Selfhtml beschrieben probiert:

<div style="width:100%; font-size:64pt; color:#9999CC; filter:Glow(color=#000000, strength=12)">Glühender Text</div>

Ohne die Breitenangabe kommt der Effekt nicht und da liegt eben das Problem.

[Helfer]

Ohne die Breitenangabe kommt der Effekt nicht und da liegt eben das Problem.

Wenn du dem DIV "sagst", daß es 100% deiner Seitenbreite einnehmen soll, dann belibt dem Browser ja nichts anderes übrig als einen Zeilenumbruch (eine extra Zeile) zu machen.

Probier mal ein andere Größe (z.B. 100px)

[Jürgen Meiser]

Das bringt mir ja nichts. Ich habe schon width:1% probiert, dann wird der Text natürlich nach jedem Wort umgebrochen. Aber ohne width gibts keinen Glow Effekt. Oder kennt jemand eine Möglichkeit?

[Tobias Kloth]

Hallo Jürgen,

<div style="width:100%; font-size:64pt; color:#9999CC; filter:Glow(color=#000000, strength=12)">Glühender Text</div>

div ist eben ein block-level-Element - und die verursachen eben einen Zeilenumbruch (solange man ihnen nichts anderes sagt). Wenn du keinen Zeilenumbruch möchtest musst du eben ein inline-Element (wie z.B. span) verwenden.

Grüße aus Nürnberg
Tobias

[Jürgen Meiser]

Da sagst du mir nichts neues, das habe ich natürlich auch schon probiert. Das ändert aber nichts daran, dass der filter ohne width Angabe nicht funktioniert, warum auch immer. Bei width:1% gibts zwar danach keinen Zeilenumbruch aber natürlich innerhalb des Textes. Bei width:100% gibts natürlich danach einen Zeilenumbruch. Ich kann auch was dazwischen nehmen, aber ich weiß ja nicht wie lang der glühende Text wird. Solange ich also eine width Angabe brauche siehts immer schlimm aus. Deswegen frage ich ja ob jemand weiß wie man dieses width umgehen kann.

[Ingo Turski]

Hi,

aber ich weiß ja nicht wie lang der glühende Text wird.

wieso denn nicht? Wird der Text dynamisch generiert? Wenn nicht, hilft dir eine passende Weite in EM weiter.

freundliche Grüße
Ingo

[Andreas Schneider]

Hallo Ingo,

wieso denn nicht? Wird der Text dynamisch generiert? Wenn nicht, hilft dir eine passende Weite in EM weiter.

Und wenn doch, kann er ja immer noch die passende Breite dynamisch reinschreiben (style="width:<%= x %>em").

Grüße
Andreas

[Jürgen Meiser]

Ja der Text wird dynamisch generiert und wie soll ich bitte die Breite von Text herausfinden (PHP)?

[Andreas Schneider]

Hallo Jürgen,

Ja der Text wird dynamisch generiert und wie soll ich bitte die Breite von Text herausfinden (PHP)?

1em ist IIRC die Breite des Zeichens m. Mit einer Breite des Elements von (Anzahl Zeichen des Textes + 2)em sollte der Text immer in das Element passen, unabhängig von den Schriftgrößeneinstellungen des Besuchers.

Grüße
Andreas

[Ingo Turski]

Hi,

1em ist IIRC die Breite des Zeichens m.

Nein - die Höhe des Fonts (bzw. des Buchstabens "M".
Ungefähr kann man anhand der Anzahl der Buchstaben eine passende Weite ermitteln. Man sollte aber auch evtl. andere Laufweiten bei alternativen Schriftarten einkalkulieren.

freundliche Grüße
Ingo

[Andreas Schneider]

Hallo Ingo,

Hi,

1em ist IIRC die Breite des Zeichens m.
Nein - die Höhe des Fonts (bzw. des Buchstabens "M".

Ja, da war ich mir auch nicht mehr so sicher.

Grüße
Andreas