Webstatt.org - Community seit 2006 - 2012 (2024?)

Boxen design mit div's

user-137
09.12.2006 14:20
Hallo,

ich hab eine Problem, ich habe eine Boxendesign mit div's das eigentlich auch gut funktioniert nur bei der Höhe gibt es Probleme, also wenn ich height: 100% angebe kommt der ganze Style durcheinander aber bei 150px (z.b.) geht alles:

Man findet die Klassen in der Mitte des CSS Codes es sind l_m,r_m und m_m.
Beispiel im Anhang.

Code:

<div class="main">

	<div class="l_o"></div>

	<div class="r_o"></div>

	<div class="m_o"></div>

	

	<div class="l_m"></div>

	<div class="r_m"></div>

        <div class="m_m">Ich bin ein ziemlich kurzer und dummer Blindtext!</div>

	

	<div class="l_u"></div>

	<div class="r_u"></div>

	<div class="m_u"></div>

</div>


Und CSS:

/* Boxen Div's */



.main {

width: 600px;

}



.main_small {

width: 200px;

}



.l_o {

float: left;

width: 24px;

height: 33px;

background-image: url(./box/l_o.gif);

background-repeat: no-repeat;

}





.m_o {

width: 100%;

height: 33px;

background-image: url(./box/m_o.gif);

background-repeat: repeat;

}





.r_o {

float: right;

width: 24px;

height: 33px;

background-image: url(./box/r_o.gif);

background-repeat: no-repeat;

}











.l_m {

float: left;

width: 24px;

height: 100%;

background-image: url(./box/l_m.gif);

background-repeat: repeat;

}



.m_m {

width: 100%;

height: 100%;

}



.r_m {

float: right;

width: 24px;

height: 100%;

background-image: url(./box/r_m.gif);

background-repeat: repeat;

}









.l_u {

float: left;

width: 24px;

height: 24px;

background-image: url(./box/l_u.gif);

background-repeat: no-repeat;

}





.m_u {

width: 100%;

height: 24px;

background-image: url(./box/m_u.gif);

background-repeat: repeat;

}





.r_u {

float: right;

width: 24px;

height: 24px;

background-image: url(./box/r_u.gif);

background-repeat: no-repeat;

}
Avatar user-294
09.12.2006 14:32
gewöhn dir mal aussagekräftige Namen für deine Divs an, oder kommentier das direkt, das ist ja scheusslich zwinkern

Also, es gibt erstmal keine Definition, wie hoch ein Browserfenster ist, demnach kannst du auch nicht height: 100% verwenden. Je nach Browser und zusätzlichen CSS-Befehlen wird das a) gar nicht interpretiert, b) die Browserhöhe des Fensters in Pixeln verwendet, c) als 0 interpretiert.

Stell doch bitte mal ein Beispiel online, das ist sonst so blöd zu betrachten.

Wenn l.m und r.m lediglich zum Anzeigen des Hintergrundbilds da sind, alle drei Divs (l.m, m.m, r.m) zu einem Div verschmmelzen, eine 1px große Grafik erstellen, die dann die Breite der 3 Divs zusammen hat und eben die Ränder und den Hintergrund als Inhalt hat. Du kannst dich aber auch anderer Tricks bedienen, Beispiele gibt es zuhauf

www.intensivstation.ch
user-137
09.12.2006 16:08
Also es geht mir darum das die Höhe der Box sich anpasst zum Inhalt. Nur krige ich das nichthin, wie auf dem Bild zu sehen, nur wenn ich eine px angabe mache wird die Box richtig dargestellt.

Ich weiß deshalb nicht welches Beispiel du willst. das mit 100% oder 100px??
Avatar user-294
09.12.2006 16:24
Hey, bissi tüfteln gehört auch dazu lächeln

Schau dir mal das Template an. Da kannst du doch wunderbar deine Seite dran anpassen:
http://www.intensivstation.ch/files/templates/2/template-3.html
user-137
21.12.2006 17:50
Ich werde irgendwie daraus nicht schlau, mein Problem ist ja eigentlich nur das ich will das die div's:

l_m
r_m

automatisch die selbe höhe kriegen wie das div "m_m".

Gibt es eine möglichkeit das sich die div's die höhe von einem anderem div hohlen?

Mfg. BNS
user-137
21.01.2007 13:20
<Thema hochhol>

Hi, also ich habe jetzt die drei div's oben und unten zu einen zusammengefasst so sieht es jetzt aus:

CSS:

<!--



* { 

		padding: 0; 

		margin: 0; 

		border: 0; 

} 







/* Boxen Div's */



.main {

	width: 750px;

}



.main_small {

	width: 250px;

}







/* Oben */



.oben {

	width: 100%;

	height: 20px;

	background-image: url(./box/box_oben.png); 

	background-repeat: no-repeat;

}







/* Unten */





.unten {

	float: left;

	width: 100%;

	height: 20px;

	background-image: url(./box/box_unten.png);

	background-repeat: no-repeat;

}







/* Mitte */



.mitte {

	width: 100%;

	text-align: left;

}



.l_mitte {

	float: left;

	width: 37px;

	background-image: url(./box/box_mitte_03.png); 

	background-repeat: repeat;

}



.r_mitte {

	float: right;

	width: 37px;

	background-image: url(./box/box_mitte_04.png);

	background-repeat: repeat;

}







-->


Und der Code:



<div class="main">

	<div class="oben"></div>

	<div class="l_mitte"></div>

	<div class="r_mitte"></div>

	<div class="mitte">TEXT</div>

	<div class="unten"></div> 

</div>


Doch leider passen sich weiterhin die beiden divs außen ("l_mitte" und "r_mitte"zwinkern nicht an den mittigen an, ich hab jetzt schon mehrere versuche mit boxmodellen versucht aber irgendwie geht es nicht.

Mfg. BNS
Avatar user-180
21.01.2007 13:54
könntest du bitte ein live-beispiel hochladen? danke.
may the force be with you. but mostly with me.
user-137
21.01.2007 14:51
http://victorvici.vi.funpic.de/live/
Avatar user-180
21.01.2007 15:00
was genau ist dein problem?
ich vermute mal, dass du nen roten rahmen auf allen seiten willst, richtig?
doll der kasten, der in dem der text steht, eine bestimmte größe haben oder 100% groß sein?
vll kannst du es ja mal aufmalen?
may the force be with you. but mostly with me.
user-137
21.01.2007 15:22
Also der im div in der Mitte steht ja der text und die Box soll sich nach unten hin dynamisch erweitern, das klappt auch ganz gut, mein Problem ist aber ja das sich die beiden div die eigentlich an den seiten sind nicht erweitern sondern sich die höhe da auf 0px einstellt und wenn ich 100% angebe wird die box solange wie die Seite.

also so sieht es aus, so soll es aussehen:
Avatar user-253
21.01.2007 15:24
6 DIVs für eine aufgewertete Textbox? Das klingt ja fast nach Rekord.
Avatar user-180
21.01.2007 15:28
wüfür brauchst du dann 4 divs? es reichen doch 3? (eine feste breite vorrausgesetzt?
ein div: hintergrund: border-oben
ein div: hintergrund: border-linksundrechts hier kommt der text rein, lässt sich strecken
ein div: hintergrund: border-unten
may the force be with you. but mostly with me.
Avatar user-253
21.01.2007 15:29
Genau!
user-137
21.01.2007 15:34
ok, werde es mal so versuchen thx.