✔ DIV Layout mit Grafikecken

[BooKer]

Hallöchen,

ich habe ien Problem wo ich absolut nicht weiter komme.
Ich möchte ein DIV Layout erstellen das Layoutecken hat und dynamisch in der Größe ist. Die herausforderung dabei ist, dass der Text auch bis oben in das Layout reinragen soll (es ist schwer zu beschreiben, daswegen hab ich ein paar Bilder eingefügt).

Bild Test = wenig Text
Bild Test2 = viel Text
Bild Test3 = das was ich jetzt habe. (hier soll der text aber weiter nach oben)

Ich habe jetzt schon sehr viele Variationen ausprobiert. Z.B. das obere LAyout als hintergrund zu legen und da drüber ein div mit dem text. Das klappt aber leider nur bedingt da ich den unteren Grafikbereich dann wieder nicht mehr sauber ran bekomme bzw. er sich nicht mit nach unten bewegt wenn der Text mehr wird.

Ich hoffe ich habe mich hallewegs verständlich ausgedrückt ^^

Das ist das wo ich jetzt hänge:

.SidebarContainer { width: 220px; min-height: 400px; }
.SidebarContainerTop { background: url(../images/SidebarBoxTop.png) no-repeat; width: 180px; padding: 20px 20px 0px 20px; height: 29px; font-weight: bold; color: #CC0000; }
.SidebarContainerMiddle { width: 180px; padding: 0px 20px 0px 20px; margin: 0px auto; height: auto; }
.SidebarContainerBottom { background: url(../images/SidebarBoxBottom.png) no-repeat; width: 180px; padding: 20px; height: 9px; }

<div class="SidbarContainer">
<div class="SidebarContainerTop"></div>
<div class="SidebarContainerMiddle">Hier kommt der Dynamische Text rein</div>
<div class="SidebarContainerBottom"></div>
</div>

 

[Maik]

Hi,

der Text soll demnach näher an den Rahmen von .SidebarContainerTop rücken?

Dann sollte es doch ein Leichtes sein, den mittleren Block mit Hilfe eines negativen margin-top-Wert nach oben zu verrücken.

Besser aber, du nutzt das Hintergrundbild direkt für .SidebarContainerMiddle, womit der inhaltsleere Block .SidebarContainerTop aus dem Quellcode fällt.

mfg Maik

 

[BooKer]

Cool danke für den Tip. Aber wie bekomme ich dann das gleiche bei dem unteren Rand hin?

 

[Maik]

Indem du das Hintergrundbild stattdessen für .SidebarContainer verwendest, und es mittels background-position:left bottom an dessen unteren Boxenrand positionierst. .SidebarContainerBottom entfällt somit ebenso im HTML-Code.

Übrigens ist dir hier ein Tippfehler unterlaufen:

<div class="SidebarContainer">

Am Ende heißt es dann: "Aus vier mach zwei"

<div class="SidebarContainer">
     <div class="SidebarContainerContent">Hier kommt der Dynamische Text rein</div>
</div>

.SidebarContainer { width: 220px; min-height: 400px; background: url(../images/SidebarBoxBottom.png) no-repeat left bottom;}
.SidebarContainerContent { width: 180px; min-height: 29px; height: auto; padding: 0 20px; margin: 0; background: url(../images/SidebarBoxTop.png) no-repeat; }

mfg Maik

 

[BooKer]

Vielen Dank. Das klappt super

Geiles Forum =)