[CSS]DIV-Höhenproblem

Mirod · 25.08.2005, 11:40

Tag leute!

nach google und Foren-suche (hab mir auch den thread von warrenfaith durch gelesen, ist aber glaub nicht die lösung meines problems)

folgendes problem:

ich habe nen ziemlich simplen div-container:

Code:

#body {
	position: absolute;
	padding: 15px;
	padding-bottom: 15px;
	margin-left: -250px;
	left: 50%;
	width: 500px;
	height: 100%;
	border: solid 1px black;
}

der funzt schön und gut. erstreckt sich sauber über die ganze seite (vertikal).

ich habe jedoch innrhalb des body-divs noch nen div: #inbody, der sieht so aus:

Code:

#inbody {
	position: absolute;
	padding: 0px;
	width: 100%;
	height: 100%;
	border: solid 1px black;
}

hier das html konstrukt:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
	<head>
		<title>{$titel}</title>
		<link href="styles.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="body">
			<div id="inbody">
			</div>
		</div>
	</body>
</html>

nun ja das problem ist nun, dass der innere div das padding des äusseren nicht akzeptiert.

...und somit nen scroll balken erscheint.

kennt jemand das problem?

PaterNoster · 25.08.2005, 11:49

Könnte es damit zusammenhängen, dass Du die ID "Body" verwendest? Ist immerhin ein HTML-Tag und evtl bringt ihn das durcheinander...

CIX88 · 25.08.2005, 11:56

Dein CSS und DOCTYPE sieht zwar etwas komsich aus, aber teste mal:

Code:

body {
   margin: 0;
   padding: 0;
   }

#body { 
   position: absolute; 
   padding: 15px; 
   padding-bottom: 15px; 
   margin-left: -250px; 
   left: 50%; 
   width: 500px; 
   height: 100%; 
   border: solid 1px black; 
} 

#inbody {
   padding: 0; 
   width: 100%; 
   height: 100%; 
   border: solid 1px black; 
}

So ist das ab und zu mit festen Positionen

Mirod · 25.08.2005, 12:49

danke euch beiden, es war tatsächlich das position: absolute; *schäm*

folgendes css läuft perfetto (falls es wen interessiert

Code:

html {
	height: 100%;
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;	
	color: white;
}

#rahmen {
	position: absolute;
	padding: 15px;
	padding-bottom: 15px;
	margin-left: -250px;
	left: 50%;
	width: 500px;
	height: 100%;
	border: solid 1px black;
}

#imrahmen {
	padding: 0px;
	width: 100%;
	height: 100%;
	border: solid 1px black;
}

big thx!

@pater: hab sogar die divs umbenannt

@ cix: wieso ist mein css etwas komisch?

CIX88 · 25.08.2005, 13:47

Zitat:

@ cix: wieso ist mein css etwas komisch?

margin: 0px;
padding: 0px;

0px gibt es garnicht, also blos:

margin: 0;
padding: 0;

padding: 15px;
padding-bottom: 15px;

Schwachsinn, wenn schon alles auf 15px gesetzt ist, braucht unten nicht auch noch auf 15 setzen.

Das sehe ich zum erstem mal

margin-left: -250px;
left: 50%;

EDIT:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Also entweder Strict oder Transitional

Mirod · 25.08.2005, 14:42

@margin: http://www.css4you.de/margin.html ist meine quelle

@padding: stimmt

hab ich wohl zu viel rum kopiert ^^

Zitat:

margin-left: -250px;
left: 50%;

mittet dat ganze ein!

und last but not least beim doctype hab ich auch etwas viel kopiert

PaterNoster · 25.08.2005, 14:44

Zitat:

Das sehe ich zum erstem mal

margin-left: -250px;
left: 50%;

Dann guck mal hier:

http://www.thestyleworks.de/tut-art/centerblock.shtml

DasMööp · 22.08.2006, 23:48

Problemstellung:

Man nehme einen DIV0 darin enthalten drei weitere DIV1-3 Container welche horizontal angeordnet sind.

body/html & div0 je 100% höhe

der mittlere DIV2 wechselt je nach Inhalt seine höhe hat selbst auch 100%höhe. Somit ändert sich ja auch die höhe des DIV0, wenn jetzt DIV1 und 2 mit
100% angegeben werden wollte ich annhemen das diese sich vertikal nach unten ausdehnen.

Dies ist nicht der Fall. Hier bischen Code:

PHP-Code:


			
#DIV1, #DIV2, #DIV3 {



    height:100%;

    min-height:100%;



    width:155px;

    min-width:155px;



    float:left;



}



#DIV0 {

    width:810px;

    min-width:810px;



    height:100%;

    }





#DIV1 {

    background-image: url(./pic/style_07.gif);

    background-repeat:repeat-y;

}



#DIV3 {

    background-image: url(./pic/style_09.gif);

    background-repeat:repeat-y;



    width:140px;



    padding-left: 20px;

}



#DIV2 {

    background-image: url(./pic/bg1.gif);

    background-repeat:repeat-x;



    width:455px;

    min-width:455px;



    height:100%;



    padding-left: 15px;

    padding-right: 10px;

}

Warum ist meine Annahme falsch !?

Bookworm · 23.08.2006, 11:53

Öhm... ja das geht so eben nicht^^
height: 100; ist eh Stuss^^ Ich mein dann ist's immer so lang wie der Bildschirm - und wenn der Inhalt kürzer ist, ist es sinnlos^^

Ne, aber dafür gibt es nen Hack names Faux Colums...
Das Problem wird ürigens auch schon im Thread von jan88 diskutiert.

$traight-$hoota · 23.08.2006, 13:01

Zitat:

Zitat von PaterNoster

Zitat:

Das sehe ich zum erstem mal

margin-left: -250px;
left: 50%;

Dann guck mal hier:

http://www.thestyleworks.de/tut-art/centerblock.shtml

dann guck mal im abschnitt "2. Horizontale und vertikale Zentrierung durch negative margins" *gg*

DasMööp · 24.08.2006, 13:51

@Bookworm

Also von mir aus nimmt man für

#DIV0 {
width:810px;
min-width:810px;
}

Somit müssten sich aber alle drei DIV in diesem DIV0 an das Maximum
anpassen. Wenn der Mittlere je nach Inhalt Variiert sollten die rechts und
links gleiche höhe haben wie der mittig.

Ausgehend davon das 100% rechts und links sich von der höhe DIV0
welche bestimmt durch die mitte wird ausdehnen müssten...

http://www.click4y.de/test/css/index.php5

Bookworm · 24.08.2006, 19:43

Ja, wie bereits gesagt, sowas geht wohl nicht. Da führt um faux columns kein Weg drumrum wenn du es unbedingt so ahben willst.

pichfl · 24.08.2006, 21:42

schau dir mal bei http://positioniseverything.net/ den link In search of the one true layout an.

vielleicht hilft das was.
evtl hat auch shauninman was für dich: http://www.shauninman.com/plete/2006...nline-absolute

25.08.2005, 11:40	Nach oben #1
Mirod Turnbeutelvergesser Registriert seit: 18.08.2005 Beiträge: 33	[CSS]DIV-Höhenproblem Tag leute! nach google und Foren-suche (hab mir auch den thread von warrenfaith durch gelesen, ist aber glaub nicht die lösung meines problems) folgendes problem: ich habe nen ziemlich simplen div-container: Code: #body { position: absolute; padding: 15px; padding-bottom: 15px; margin-left: -250px; left: 50%; width: 500px; height: 100%; border: solid 1px black; } der funzt schön und gut. erstreckt sich sauber über die ganze seite (vertikal). ich habe jedoch innrhalb des body-divs noch nen div: #inbody, der sieht so aus: Code: #inbody { position: absolute; padding: 0px; width: 100%; height: 100%; border: solid 1px black; } hier das html konstrukt: Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <title>{$titel}</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="body"> <div id="inbody"> </div> </div> </body> </html> nun ja das problem ist nun, dass der innere div das padding des äusseren nicht akzeptiert. ...und somit nen scroll balken erscheint. kennt jemand das problem? Geändert von Jann Hendrik (22.06.2007 um 08:30 Uhr). Grund: php-info.org - link entfernt.

25.08.2005, 11:49	Nach oben #2
PaterNoster Erfahrener Benutzer Registriert seit: 18.08.2005 Ort: Dortmund Beiträge: 166	[CSS]DIV-Höhenproblem Könnte es damit zusammenhängen, dass Du die ID "Body" verwendest? Ist immerhin ein HTML-Tag und evtl bringt ihn das durcheinander... __________________ wischtisch.de - jetzt auch mit Fotos. Und Senf.

22.08.2006, 23:48	Nach oben #8
DasMööp Erfahrener Benutzer Registriert seit: 14.12.2004 Beiträge: 219	Problemstellung: Man nehme einen DIV0 darin enthalten drei weitere DIV1-3 Container welche horizontal angeordnet sind. body/html & div0 je 100% höhe der mittlere DIV2 wechselt je nach Inhalt seine höhe hat selbst auch 100%höhe. Somit ändert sich ja auch die höhe des DIV0, wenn jetzt DIV1 und 2 mit 100% angegeben werden wollte ich annhemen das diese sich vertikal nach unten ausdehnen. Dies ist nicht der Fall. Hier bischen Code: PHP-Code: #DIV1, #DIV2, #DIV3 { height:100%; min-height:100%; width:155px; min-width:155px; float:left; } #DIV0 { width:810px; min-width:810px; height:100%; } #DIV1 { background-image: url(./pic/style_07.gif); background-repeat:repeat-y; } #DIV3 { background-image: url(./pic/style_09.gif); background-repeat:repeat-y; width:140px; padding-left: 20px; } #DIV2 { background-image: url(./pic/bg1.gif); background-repeat:repeat-x; width:455px; min-width:455px; height:100%; padding-left: 15px; padding-right: 10px; } Warum ist meine Annahme falsch !? __________________ Das Leben ist zwar bloß ein Adventure-Game, aber die Grafik ist verdammt gut. Ich such immer noch den Cheat für unlimited money!

23.08.2006, 11:53	Nach oben #9
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Öhm... ja das geht so eben nicht^^ height: 100; ist eh Stuss^^ Ich mein dann ist's immer so lang wie der Bildschirm - und wenn der Inhalt kürzer ist, ist es sinnlos^^ Ne, aber dafür gibt es nen Hack names Faux Colums... Das Problem wird ürigens auch schon im Thread von jan88 diskutiert. __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

24.08.2006, 13:51	Nach oben #11
DasMööp Erfahrener Benutzer Registriert seit: 14.12.2004 Beiträge: 219	@Bookworm Also von mir aus nimmt man für #DIV0 { width:810px; min-width:810px; } Somit müssten sich aber alle drei DIV in diesem DIV0 an das Maximum anpassen. Wenn der Mittlere je nach Inhalt Variiert sollten die rechts und links gleiche höhe haben wie der mittig. Ausgehend davon das 100% rechts und links sich von der höhe DIV0 welche bestimmt durch die mitte wird ausdehnen müssten... http://www.click4y.de/test/css/index.php5 __________________ Das Leben ist zwar bloß ein Adventure-Game, aber die Grafik ist verdammt gut. Ich such immer noch den Cheat für unlimited money! Geändert von DasMööp (24.08.2006 um 13:58 Uhr).

24.08.2006, 19:43	Nach oben #12
Bookworm n00b -.- Registriert seit: 10.11.2005 Beiträge: 318	Ja, wie bereits gesagt, sowas geht wohl nicht. Da führt um faux columns kein Weg drumrum wenn du es unbedingt so ahben willst. __________________ Alle wollen doch nur mein Bestes. Aber sie werden es nicht kriegen!

24.08.2006, 21:42	Nach oben #13
pichfl CSS-Spinner Registriert seit: 27.08.2005 Ort: Kissing Beiträge: 46	schau dir mal bei http://positioniseverything.net/ den link In search of the one true layout an. vielleicht hilft das was. evtl hat auch shauninman was für dich: http://www.shauninman.com/plete/2006...nline-absolute

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken