Mehrere <p> mit gemeinsamem Hintergrund

[Encoder]

Hallo Gemeinde

Ich sitze gerade an einer Idee für ein Layout.
Eine Seite hat einige Wiederholungen von

• Überschrift
• einige Absätze <p>

Jetzt ist die Idee, den Absätzen eine dezente Hintergrundgrafik zu verpassen. Die soll links oben im Eck des ersten Absatzes beginnen und sich dann vielleicht max. 200 Pixel nach unten und rechts erstrecken. Falls eine neue Überschrift kommt, soll Schluss sein mit dem Hintergrund. Als Blickfänger und optische Auflockerung.
Für mich riecht das stark nach dem da
<h1>Überschrift</h1>
<div id="Hintergrundbild links oben">
<p>erster Absatz</p>
<p>zweiter Absatz</p>
<p>dritter Absatz</p>
</div>

<h1>noch ne Überschrift</h1>
<div id="Hintergrundbild links oben">
<p>erster Absatz</p>
<p>zweiter Absatz</p>
</div>

Gibts für solche Spielereien was schönes in css, so dass ich nur die Absätze notiere und dann durch irgendwelche Angaben der Rest von selbst passiert?
Die jetzige Idee wird eine Kopieraktion, überall die divs drum rum und wenns mir nicht gefällt wieder weg. Wenn ich mir das ersparen könnte wär ich dankbar.

[Matthias Apsel]

Om nah hoo pez nyeetz, Encoder!

Das geeignete Element wäre wohl section.

Matthias

[Matti Mäkitalo]

Hi,

Das geeignete Element wäre wohl section.

Oder article, je nachdem, was die Absätze sein sollen.
Und dann die Überschrift in den Container legen, da das je dann jeweils zusammengehört.

Bis die Tage,
Matti

[Malcolm Beck´s]

مرحبا

Oder article, je nachdem, was die Absätze sein sollen.

Idealerweise wäre article bereits der umschliessende Container. Dann können gewisse Sektionen eines Artikels auch als sections ausgezeichnet werden.

mfg

[Encoder]

Ok ich werd mich damit mal beschäftigen.
Was ich dachte war, vielleicht kann so eine Gruppierung über irgendeine Definition in CSS selbst erfolgen, ohne dass ich dazu was definieren muss.
War mir aber fast schon klar dass das Illusion ist.

[ChrisB]

Hi,

Was ich dachte war, vielleicht kann so eine Gruppierung über irgendeine Definition in CSS selbst erfolgen, ohne dass ich dazu was definieren muss.
War mir aber fast schon klar dass das Illusion ist.

Es geht ja unter gewissen Bedingungen auch ohne „Gruppierung“:
Der Überschrift ein entsprechendes padding-bottom geben, dort das Hintergrundbild platzieren – und den nachfolgenden Content über ein negatives margin wieder „nach oben ziehen“.

(Dabei wird das Hintergrundbild natürlich immer in der vollen Höhe des Paddings angezeigt – selbst wenn der nachfolgende Inhalt kleiner sein sollte.)

MfG ChrisB