Border mit Radius und darin zwei Farben

[Border]

Guten Abend
Ein div hat einen Rahmen. Darin sitzt ein p mit Überschrifttext und gelbem Hintergrund. Darunter ein weiteres p mit Text und weißem Hintergrund.

Nun soll das div abgerundete Ecken erhalten. Dabei überschreibt leider das grün des oberen p die oberen Ecken. Es hält sich nicht an die Rundung sondern steht über die Rundung hinaus.
Muss ich hier dem p ebenfalls abgerundete Ecken geben oder geht die Lösung auch anders?
Danke für Hilfe

[Matthias Apsel]

Om nah hoo pez nyeetz, Border!

Zeig bitte die entsprechende Seite, das div-Element ist möglicherweise überflüssig.

Matthias

[Border]

Hallo
Das geht leider noch nicht da die Seite bisher nur auf meinem Rechner existiert.
Das div ist vielleicht wirklich überflüssig. Ich habe es hinzugefügt um den Border nicht in beiden p Abschnitten zu setzen sondern nur in einem Element.
Wenn ich die p untereinander setze und dort die border Teile einzeln setze geht es aber das ist dann ziemlich umständlich.

[Matthias Apsel]

Om nah hoo pez nyeetz, Border!

Das geht leider noch nicht da die Seite bisher nur auf meinem Rechner existiert.

Es gibt dabblet oder js-fiddle. Zur Not kannst du relevanten Code auch hier posten.

Matthias

[Border]

Wow coole Seite! Das hier ist ein Beispiel für dabblet.
.thediv { border:1px solid black; border-radius:20px; }
.firstp { background:yellow; margin:0; padding:10px; }

<div class="thediv">
<p class="firstp">Der erste Abschnitt</p>
<p class="nextp">Der zweite Abschnitt</p>
</div>

Wenn ich .firstp um border-radius:20px 20px 0px 0px; ergänze sieht es wieder aus wie es soll.
Wenn das p im div ist und das div einen gebogenen Rand hat müsste dann nicht das p nur innerhalb dieses Rands liegen? Da hab ich noch ein Problem mitm Verständnis.
Ist nicht schlimm wenn ich den border-radius beim p auch dazu schreibe. Ich wüsste nur gerne warum :-)

[Matthias Apsel]

Om nah hoo pez nyeetz, Border!

Wenn das p im div ist und das div einen gebogenen Rand hat müsste dann nicht das p nur innerhalb dieses Rands liegen? Da hab ich noch ein Problem mitm Verständnis.
Ist nicht schlimm wenn ich den border-radius beim p auch dazu schreibe. Ich wüsste nur gerne warum :-)

Ein p-Element ist ein Blockelement und nimmt den ganzen zur Verfügung stehenden Platz ein. border-radius wird nicht vererbt, daher geht das innere p über die Abrundungen hinaus.

Neben der Variante, dem inneren Element border-radius zu geben (übrigens braucht man dazu keinen border definieren) wären auch padding für das äußere oder margin für das innere Element möglich.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Border!

.thediv { border:1px solid black; border-radius:20px; }
.firstp { background:yellow; margin:0; padding:10px; }

<div class="thediv">
<p class="firstp">Der erste Abschnitt</p>
<p class="nextp">Der zweite Abschnitt</p>
</div>

Du kannst es auch anonym erstellen.

http://dabblet.com/gist/7204412

_Das_ ist das coole daran.

Dann sehen wir auch, dass meine Vorschläge mit margin und padding nicht zielführend sind.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Dann sehen wir auch, dass meine Vorschläge mit margin und padding nicht zielführend sind.

Mit overflow: hidden fürs Containerelement sind sie’s. Zu Risiken und Nebenwirkungen …

Qapla'

[Gunnar Bittersmann]

@@Border:

nuqneH

Wow coole Seite! Das hier ist ein Beispiel für dabblet.

Das wirklich Coole an Dabblet ist, dass andere den Quellcode nicht kopieren müssen. Wenn man’s denn richtig anwendet.

Qapla'

[Gunnar Bittersmann]

@@Border:

nuqneH

Das div ist vielleicht wirklich überflüssig.

Ein Container ist vermutlich angebracht. Allerdings gibt es sicher ein passenderes Element als div. Je nach Inhalt section, article, aside, footer, …

Aber vielleicht auch dl mit dt und dd drin.

Wenn ich die p untereinander setze und dort die border Teile einzeln setze geht es aber das ist dann ziemlich umständlich.

Was wäre daran umständlich?

Qapla'

[Gunnar Bittersmann]

@@Border:

nuqneH

Darin sitzt ein p mit Überschrifttext

Nei-en! p soll nicht für Überschriften verwendet werden.

Qapla'