✔ Boxes/Rounded Corners

[Mark]

Hallo Ihr Lieben!

Vorweg: meine Html-Kenntnisse stammen noch aus einer Zeit, als man Tables noch mögen durfte und <div>s gemieden wurden Folgendes stellt somit meine ersten Schritte mit CSS und divs als "Table-Ersatz" dar und man möge mich bitte nicht erschlagen, ob des niedrigen Niveaus

Ausgehend von Doug's 4 Rounded Corners, allerdings mit "background"s bin ich zu folgendem gekommen:
roundbox
Und nun schaffe ich es partout nicht, den Text "einrücken" zu lassen, so daß er "im Rahmen" bleibt. Meine Versuche mit "padding" und "margin" rückten jedes mal nicht nur den Text ein, sondern zerstörten auch den Rahmen.

Weiters legte ich den Text "position:absolut" über diesen "Rahmen", was mit das "padding" ermöglichte:
roundbox2
Klarerweise reagiert nun aber der Rahmen nicht mehr auf "überlange" Texte bzw. skaliert sich nach unten hin nicht mehr auf...

Und nun weiß ich nicht mehr weiter und würde mich über Eure Hilfe freuen.
Nochmal: wie bringe ich roundbox dazu, den Text einzurücken, die Box aber unberührt zu lassen?! Natürlich fürchte ich, die Lösung ist zum Schreien einfach, aber man glaube mir: ...habe alles versucht

Schon mal vielen Dank für Eure Hilfe,
Liebe Grüße,
Mark.

P.S.: ...ist es "gewünschter", wenn ich den Quelltext hier poste, denn ihn nur als Link anzugeben?

 

[Gumbo]

Interessanter Artikel: Roger Johanssons „Transparent custom corners and borders“.

 

[Maik]

Lösung für die roundbox: erweitere das Stylesheet mit folgender Regel:

.boxmid div div p {
margin: 0;
padding: 8px;
}

und packe den Text in ein p-Element:

<div id="box_1">
<div class="boxtop"><div><div></div></div></div>
<div class="boxmid"><div><div><p>Die erste Box mit ein wenig Text.</p></div></div></div>
<div class="boxbot"><div><div></div></div></div>
</div>

 

[Mark]

Hallo Ihr beiden!

Nach Gumbo's Link (vielen Dank dafür, schaut sehr interessant aus und wird von mir studiert ) war ich ja zunächst beruhigt: "puh, so einfach scheint es doch nicht zu sein, wenn's dazu einen solch langen Artikel gibt...", aber michaelsinterface belehrte mich ja nun: tausend Dank für diese pipifeine Lösung, auf die ich zwar hätte kommen müssen, worüber ich mich jetzt aber nicht ärgere, sondern mich stattdessen einfach nur freue! Vielen Dank!

Und erlaubt mir vielleicht noch die Frage: ist das, was ich da mache in "heutigem Sinne" "feiner Code" oder totaler blödsinn? ...hätte ich mir da den Wechsel von verschachtelten Tables gleich sparen können?

Nochmals vielen Dank Euch beiden,
Liebe Grüße,
Mark.

 

[Gumbo]

Semantisch gesehen, sind die zusätzlichen Elemente ohne Inhalt natürlich vollkommen unsinnig. Daher tendiere ich in solch einem Fall auch zu einer JavaScript-Lösung, die zudem auch bequemer und dynamischer ist.