Block, der sich an die Breite seines Inhalts anpasst

[Claudius L.]

Hallo,

ich wurstle nun schon eine Weile an dem Problem herum; da ich zu keiner Lösung komme, hoffe ich auf euch.

Und zwar geht es um einen Textabsatz (<p>). Das Element soll vor allem zwei Eigenschaften haben:
1. seine Breite an seinen Inhalt anpassen. Dies liese sich problemlos per display:inline; realisieren, klar.
2. es soll einen Block erzeugen.

Da liegt das Problem. Wenn ich es als Inline-Element definiere, erzeugt es natürlich keinen Block. Ich möchte allerdings eine Hintergrundfarbe und einen Rahmen um das _ganze_ Element und nicht um die einzelnen Textzeilen. Darum brauche ich einen Block.
Verwende ich display:block;, so habe ich zwar Rahmen und Hintergrund wie gewünscht, das Element passt seine Breite aber nicht an den Inhalt an, sondern nimmt die gesamte verfügbare Breite ein. – Das soll es aber nicht.
dispay:inline-block; hilft leider auch nicht, da es sich zwar in Opera wie gewünscht verhält, aber nicht im FF oder dem IE (in den beiden nimmt das Element wieder die gesamte Breite ein).

Ich habe auch schon darüber nachgedacht, die Sache mit zwei Elementen zu realisieren: <div><p>foo bar</p></div>.
Meine Hoffnung dabei war, ich könnte beide Elemente als Inline-Elemente definieren und dann Rahmen und Hintergrundfarbe dem <div> zuweisen. Die Idee dahinter war, dass das <div> eine Box um das <p> bildet – was aber natürlich nicht der Fall ist, wegen meines Denkfehlers: das <div> ist ja ebenfalls ein Inline-Element …

Aber irgendwie muss das doch möglich sein. Ich würde mich über Tipps sehr freuen.

Gruß und Schönen Ostermontag noch,

Claudius

[Auge]

Hallo

Und zwar geht es um einen Textabsatz (<p>). Das Element soll vor allem zwei Eigenschaften haben:

1. seine Breite an seinen Inhalt anpassen. Dies liese sich problemlos per display:inline; realisieren, klar.
2. es soll einen Block erzeugen.

Da liegt das Problem. Wenn ich es als Inline-Element definiere, erzeugt es natürlich keinen Block. Ich möchte allerdings eine Hintergrundfarbe und einen Rahmen um das _ganze_ Element und nicht um die einzelnen Textzeilen. Darum brauche ich einen Block.
Verwende ich display:block;, so habe ich zwar Rahmen und Hintergrund wie gewünscht, das Element passt seine Breite aber nicht an den Inhalt an, sondern nimmt die gesamte verfügbare Breite ein. – Das soll es aber nicht.

Soweit das Standardverhalten.

dispay:inline-block; hilft leider auch nicht, da es sich zwar in Opera wie gewünscht verhält, aber nicht im FF oder dem IE (in den beiden nimmt das Element wieder die gesamte Breite ein).

Soweit zur unterschiedlich guten Interpretation von CSS.

Aber irgendwie muss das doch möglich sein. Ich würde mich über Tipps sehr freuen.

Außer der expliziten Vorgabe einer Breite für den Textabsatz fällt mir auch nicht browserübergreifend funktionierendes ein.

Tschö, Auge

[Claudius L.]

Hallo Auge!

Außer der expliziten Vorgabe einer Breite für den Textabsatz fällt mir auch nicht browserübergreifend funktionierendes ein.

Ne, das wäre in meinem Fall unpraktisch. Macht dank Detlef aber ja nix …

Gruß,

Claudius

[Detlef G.]

Hallo Claudius

Und zwar geht es um einen Textabsatz (<p>). Das Element soll vor allem zwei Eigenschaften haben:

1. seine Breite an seinen Inhalt anpassen. Dies liese sich problemlos per display:inline; realisieren, klar.
2. es soll einen Block erzeugen.

Ein gefloatetes Element nimmt die Breite seines Inhalts an, und erzeugt weiter einen Block.
(anschließendes claeren nicht vergessen)

Ein absolut positioniertes Element nimmt die Breite seines Inhalts an, und erzeugt weiter einen Block.
Es wird dabei allerdings genau wie beim floaten aus dem Elementfluss genommen, allerdings ohne die Möglichkeit diesen durch claeren wieder herzustellen.

Du kannst auch mal auf CSS tests and experiments stöbern.

Auf Wiederlesen
Detlef

[Claudius L.]

Hallo Detlef!

Ein gefloatetes Element nimmt die Breite seines Inhalts an, und erzeugt weiter einen Block.
(anschließendes claeren nicht vergessen)

Wow, super, das ist perfekt. Da wäre ich fürchte ich nie darauf gekommen … danke!

Du kannst auch mal auf CSS tests and experiments stöbern.

Kannte ich noch nicht, ist ja sehr interessant. Auch hierfür dankeschön.

Gruß,

Claudius