CSS "streckende" container

Illo2002 · #1 (**permalink**) 20.04.2006, 16:26

Hallo, ich habe bereits bei google.de gesucht und in einem anderen Forum gefragt, leider konnte mir niemand helfen, da dachte ich ich frage mal die Profis. Hier der Beitrag aus dem anderen Forum
____

Hi,

ich habe nun auch mal den Versuch unternommen eine Seite mit div und css zu gestalten, dabei stiess ich auf folgende Probleme:

1 Ein div-container unter einem anderen soll bis ans ende der seite reichen, bei angabe height:100% sprengt er aber das design

2 Ein (anderer) div-container hat die angabe height:100%, was auch gut funktioniert, wird der inhalt jedoch groesser, endet der cointainer auch bei den angegebenen 100%

3 Ein div-container soll an der unterseite eines anderen positioniert werden (um genauer zu sein, unten am ende des menues)

hier mal der quelltext:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Conexx Records Entertainment</title>
<style type="text/css">
<!--
html {
	height:100%;
}
body {
	height:100%;
	margin:0%;
	padding:0%;
	text-align:center;
	background:url(img/bg.jpg) scroll repeat;
}
div#com {
	margin:0px auto;
	width:900px;
	height:100%;
	text-align:left;
}
[I]Hier Problem 2[/I]
div#bl {
	float:left;
	width:50px;
	height:100%;
	background:url(img/bl.png) scroll repeat;
}
[I]Hier Problem 2[/I]
div#br {
	float:right;
	width:50px;
	height:100%;
	background:url(img/br.png) scroll repeat;
}
div#page {
	float:left;
	width:800px;
	height:100%;
	background:#FFFFFF scroll repeat;
}
div#header {
	width:800px;
	height:179px;
	background:url(img/hd1.jpg) scroll repeat;
}
div#bar {
	width:800px;
	height:30px;
	background:url(img/hd2.jpg) scroll repeat;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
}
[I]Hier Problem 1[/I]
div#menu { 
	float:left;
	width:180px;
	height:inherit;
	background:url(img/mnbg.jpg) scroll no-repeat;
	border-top:2px solid #104F74;
	margin:0px 0px 1px 0px;
}
[I]Hier Problem 1[/I]
div#cont {
	float:right;
	width:619px;
	height:500px;
	background:url(img/pbg.jpg) scroll no-repeat;
	border-top:2px solid #104F74;
	margin:0px;
}
-->
</style>
</head>

<body>
<div id="com">
<div id="bl"></div>[I]Hier Problem 2[/I]
<div id="br"></div>[I]Hier Problem 2[/I]
<div id="page">

<div id="header"></div>
<div id="bar"></div>
<div id="menu"> [I]Hier Problem 3[/I] </div> [I]Hier Problem 1[/I]
<div id="cont"></div> [I]Hier Problem 1[/I]

</div>
</div>
</body>
</html>

Hier mal das ganze zum angucken.

So soll das ganze dann aussehen.

Ich hoffe Ihr koennt mir helfen, Vielen Dank!

mazzo · #2 (**permalink**) 20.04.2006, 16:43

Zitat:

Zitat von Illo2002

1 Ein div-container unter einem anderen soll bis ans ende der seite reichen, bei angabe height:100% sprengt er aber das design

Beachte, dass sich die height zur bestehenden Höhe der anderen Elemente addiert. 100% height plus irgendein Inhalt sind immer >100%.

Zitat:

Zitat von Illo2002

2 Ein (anderer) div-container hat die angabe height:100%, was auch gut funktioniert, wird der inhalt jedoch groesser, endet der cointainer auch bei den angegebenen 100%

so ist es ja auch definiert. Lass die heigt einfach weg und der Container nimmt den nötigen Platz ein.

Zitat:

Zitat von Illo2002

3 Ein div-container soll an der unterseite eines anderen positioniert werden (um genauer zu sein, unten am ende des menues)

Da DIVs standardmäßig Blockelemente sind, sortieren die sich immer untereinander an. Ausnahme: wenn floatiert wird. Dann muss man erst wieder clearen bevor eine "neue Zeile" also der normale Textfluss weitergeht.

PS: In der Suche findest Du sicherlich gaaanz viele Beiträge zum Thema 100% Höhe.

Illo2002 · #3 (**permalink**) 20.04.2006, 17:04

Vielen Dank schonmal!

Zitat:

Zitat von mazzo

Beachte, dass sich die height zur bestehenden Höhe der anderen Elemente addiert. 100% height plus irgendein Inhalt sind immer >100%.

Ja, das ist mir klar, aber wie ändere ich das, ich kann ja nicht height:100%-200px; angeben?!

Zitat:

Zitat von mazzo

so ist es ja auch definiert. Lass die heigt einfach weg und der Container nimmt den nötigen Platz ein.

das habe ich mal gemacht:

Code:

div#bl {
	float:left;
	width:50px;
	margin:0%;
	padding:0%;
	background:url(img/bl.png) scroll repeat;
}

fuer den rechten genauso, und schon sind die div-container komplett verschwunden, sobald ich die height-angabe wieder einbaue sind sie wieder sichtbar... habe es auch mit min-height versucht, das funktioniert aber auch nicht

Zitat:

Zitat von mazzo

Da DIVs standardmäßig Blockelemente sind, sortieren die sich immer untereinander an. Ausnahme: wenn floatiert wird. Dann muss man erst wieder clearen bevor eine "neue Zeile" also der normale Textfluss weitergeht.

Ja, das ist mir klar, aber die höhe des menue containers ist ja variabel, d.h. der div container muss irgendwie eingestellt werden, dass er sich immer am unteren ende platziert. funktioniert das evtl mit vertical-align:bottom; ?

Zitat:

Zitat von mazzo

PS: In der Suche findest Du sicherlich gaaanz viele Beiträge zum Thema 100% Höhe.

jo, danke, ich les mir das gerade durch...

mazzo · #4 (**permalink**) 20.04.2006, 17:12

Wenn die DVs "weg" sind: Steht da ein Inhalt drin? Ohne Inhalt hat ein DIV keinen Sinn und daher sollte man zum Testen immer irgendwas reinschreiben.
Das Problem einer Höhenangabe erübrigt sich meistens wenn überall Inhalte sind.

Wenn Du Deine Seite generell auf nur 100% Höhe trimmen möchtest ohne jemals nen Scrollbalken zu bekommen musst Du dem Body 100% Höhe geben und dazu ein overflow: hidden. Damit werden aber überstehende Inhalte nicht mehr dargestellt!
Alternativ kannst Du innerhalb eines Containers mit fixer Höhe scrollen lassen wie in einem Frame. Ist aber auch nicht immer gewünscht.

EDIT: Vertikal align geht nur auf Elemente mit display: table-cell. Wenn ein Element nach einem anderen folgen soll muss es einfach nur danach im Markup stehen. Es stellt sich automatiosch darunter dar.
Solltest Du alle Elemente absolut positioniert haben ist das ganze Layout aber viel zu umständlich.

EDIT2: Es kann auchs ein, dass Du falsch oder gar nicht clearst. Guck mal in meine Sig.

Illo2002 · #5 (**permalink**) 20.04.2006, 19:01

Zitat:

Zitat von mazzo

Wenn die DVs "weg" sind: Steht da ein Inhalt drin? Ohne Inhalt hat ein DIV keinen Sinn und daher sollte man zum Testen immer irgendwas reinschreiben.
Das Problem einer Höhenangabe erübrigt sich meistens wenn überall Inhalte sind.

In den Divs ist kein Inhalt, hab aber mal "" reingeschrieben, dann zeigt er aber nur die eine Zeile an, und keinen gestreckten Kasten

Zitat:

Zitat von mazzo

Wenn Du Deine Seite generell auf nur 100% Höhe trimmen möchtest ohne jemals nen Scrollbalken zu bekommen musst Du dem Body 100% Höhe geben und dazu ein overflow: hidden. Damit werden aber überstehende Inhalte nicht mehr dargestellt!
Alternativ kannst Du innerhalb eines Containers mit fixer Höhe scrollen lassen wie in einem Frame. Ist aber auch nicht immer gewünscht.

Body height is auf 100%, das mit overflow:hidden ist nicht erwuentsch, son Div mit overflow:auto is auch nicht erwuenscht ^^

Zitat:

Zitat von mazzo

EDIT: Vertikal align geht nur auf Elemente mit display: table-cell. Wenn ein Element nach einem anderen folgen soll muss es einfach nur danach im Markup stehen. Es stellt sich automatiosch darunter dar.
Solltest Du alle Elemente absolut positioniert haben ist das ganze Layout aber viel zu umständlich.

Ne is nicht absolut, das mit table-cell probier ich mal danke!

Zitat:

Zitat von mazzo

EDIT2: Es kann auchs ein, dass Du falsch oder gar nicht clearst. Guck mal in meine Sig.

Ich hoffe ich cleare richtig ^^

Ich hab ne andere Idee gerade, ich probier das mal auf die Art...

Nochmals Danke, falls jmd doch die Loesung weiss, bitte sagen!

mazzo · #6 (**permalink**) 21.04.2006, 08:56

Zitat:

Zitat von Illo2002

Zitat:

Zitat von mazzo

Wenn die DVs "weg" sind: Steht da ein Inhalt drin? Ohne Inhalt hat ein DIV keinen Sinn und daher sollte man zum Testen immer irgendwas reinschreiben.
Das Problem einer Höhenangabe erübrigt sich meistens wenn überall Inhalte sind.

In den Divs ist kein Inhalt, hab aber mal "" reingeschrieben, dann zeigt er aber nur die eine Zeile an, und keinen gestreckten Kasten

Wozu brauchst Du leere DIVs? Ist doch klar, dass leere Elemente "keinen Grund haben" sich aufzuspannen. Entweder Du testest mit Inhalten, die vom Volumen her spätere, "echte" Inhalte simulieren oder Du benutzt leer-DIVs mit fixen Höhen, die aber eben eine echte Webseite, wo die Inhalte die Höhe bestimmen, nicht simulieren können.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09
IE 6 erkennt seine CSS Datei nicht	Perelina	(X)HTML	4	07.08.2009 18:56
Positionierung von Container horizontal	mayhemtl	CSS	9	11.08.2007 15:25
CSS Div Container positionieren	rusht	CSS	4	16.02.2006 08:00