Div Container mit Layout Ecken

BooKer · #1 (**permalink**) 18.06.2010, 23:17

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

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:

Zitat:

.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; }

Zitat:

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

Walter IT-Services · #2 (**permalink**) 19.06.2010, 05:23

Hallo!

Es ist zwar unschön, aber ich hab das so gelöst, dass ich in dem Div mit dem Text 4 IMG-Tags absolute positioniert habe.

Beispiel:
CSS

HTML-Code:

img.top_left{
	position: absolute;
	top:0px;
	left:0px;
}

img.top_right{
	position: absolute;
	top:0px;
	right:0px;
}

img.bottom_left{
	position: absolute;
	bottom:0px;
	left:0px;
}

img.bottom_right{
	position: absolute;
	bottom:0px;
	right:0px;
}

div.content{
	position:absolute;
	top:50px;
	left:50%;
	margin-left:-400px;
	background-color:white;
	width:800px;
	padding:0px 20px 0px 20px;
}

HTML-Code:

<div class="content"> 
  <img class="top_right" src="img/corner/tr.png" /> 
  <img class="top_left" src="img/corner/tl.png" /> 
  <img class="bottom_right" src="img/corner/br.png" /> 
  <img class="bottom_left" src="img/corner/bl.png" />
</div>

LG
Micha

heiko_rs · #3 (**permalink**) 19.06.2010, 10:28

Zitat:

Zitat von Walter IT-Services

Es ist zwar unschön

Ja, hochgradig!

Deko immer ins CSS. Und dann verschachteln nach dem Prinzip Runde und andere Ecken (Webdesign) | andreas-kalt.de

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Div Container - Navigation verschoben	Azadeh	CSS	4	07.09.2008 14:03
Design Float IE6 Problem	koknarr	CSS	10	05.09.2008 18:05
div container verschachteln	blau	CSS	2	05.12.2006 19:44
2 Div Container, unten anordnen, keine feste Höhe	Hausmeista	(X)HTML	0	06.06.2006 17:28