CSS DIV - Positionierung

raven16 · 11. Februar 2009

Hi,
schaut euch mal dieses Div-Beispiel an

Hier noch der Quelltext dazu:

Code:

/*#########################################
##########Gesamtstruktur#################*/
div.topbox{
	width:100%;
	height:30px;
	background-color:#222222;
}

div.gesamtbox{
	width:1000px;
	height:768px;
	margin-left:auto;
	margin-right:auto;
	background-color:#123456;
}

div.bottombox{
	width:100%;
	height:60px;
	bottom:0px;
	background-color:#111111;
	border-top-color:#555555;
	border-top-width:1px;
	border-left-width:0px;
	border-right-width:0px;
        border-style:dashed;
	background-color:#444444;
}

und hier die html-datei, wo die 3 Boxen aufgerufen werden:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">



<html>
	<head>
		<title>
			<?php include("include/info/title.inc.php"); ?>
		</title>
		<?php include("include/css.inc.php"); ?>
	</head>
	<body>
		<div class="topbox">
		
		</div>
		<div class="gesamtbox">
			
		</div>
		<div class="bottombox">
		
		</div>
	</body>
</html>

So...
Nun wollte ich fragen, wie ich erreichen kann, dass unten die bottombox immer unten bleibt? mit bottom:0px; funktioniert dies irgendwie nicht :-/

Dann möchte ich noch, dass die blaue gesamtbox nicht nur 768px hoch ist, sondern immer bis unten zur bottombox geht...
hab es mit height:100%; versucht, aber dann geht die gesamtbox in FF nicht bis zur bottombox, was dazu führt, wenn ich in der gesamtbox eine background-image einbinde, der die auch nicht in voller Größe anzeigt komischerweise...
Auf dieser Seite wird beschrieben, dass height:100%; für den das gesamte angezeigte Browserfenster gilt.
Das heißt ich hätte nicht 100%, sondern dann 100% + 90px; . Aber wie kann ich das dann so einstellen, dass ich immer volle Höhe hab?
Versteh das nicht so ganz

hatte jemand von euch auch schon diese Probleme und kann mir dazu einen Tipp geben?

DerEineDa · 11. Februar 2009

Na, das Thema hatten wir doch gestern erst hier im Forum

Guck dir das mal an: http://themaninblue.com/writing/perspective/2005/08/29/

raven16 · 11. Februar 2009

Ja... das ich dann auch bei html und body 100% höhe festlegen muss kann ich ja nachvollziehen...
aber wie ist das dann zum beispiel mit der topbox, die 30px hoch ist?
und der bottombox mit 60px?

Passt sich so der Body auf die Gesamthöhe der darin liegenen divs an?
----------------------------------------------------------------------------------------------------------------------------------------

EDIT: NEU
Ich bekomms einfach nicht hin -.-
Das ist echt knifflig...
Haber versucht, diesen height-hack mit 100% hin zu bekommen
Aber das klappt nicht ganz so wie ich es will

Habe bestimmt schon 3 Stunden jetzt rumgesucht um ne Vernünftige einfach zu verstehende Erklärung dafür zu finden...

Meine Konfiguration ist jetzt:

Code:

div.gesamtbox{
	width:1000px;
	height:auto !important;
	height:100%; 
	min-height:100%;
	margin-left:auto;
	margin-right:auto;
	padding-top:320px;
	background-image:url(images/banner/banner.jpg); 
	background-repeat:no-repeat;
}

Die Seite könnt ihr euch hier anschauen ...

In IE ist die bottombox jetzt unten, aber von der mittleren divbox wird nun die runde unterkante abgeschnitten bzw. verschwindet unter der bottombox...

In FF ist die bottmbox irgendwo in der Mitte gerutscht hinter die gesamtbox, weil der in FF die gesamtbox nicht an die inhalte der mittleren box anpasst

Zur Info: Die mittelbox mit dem Inhalt liegt in der gesamtbox und deswegen sollte die gesamtbox auch so groß immer werden wie die mittelbox ist...

und die runden boxen, die in der mittelbox sind, sollten sich auch immer auf ihren Inhalt anpassen....
je mehr divs ich da reinlege, desto größer sollten die 3 boxen werden und desto größer auch die gesamtbox...

Das ist doch zum Mäusemelken xD

raven16 · 12. Februar 2009

Alle ratlos? ^^

raven16 · 14. Februar 2009

Hallo fgh,

es kann sein, dass ich was überlesen habe, aber eine Problemlösung wäre:

height: auto
min-height: 100%

Funktioniert in allen Browsern. Allerdings gibt es Leute, die den IE6 auch für nen Browser halten... da ham ma dann n Problem, gell? Der IE6 kennt min-height nöscht.

Jetzt können wir jetzt nen bösen Hack benutzen, damit es mit dem IE 6 klappt:

Hier haben ja einige schon bemerkt, dass im IE
height:100%
zum gewünschten Ergebnis führt. Das lustige: Das is n Bug : Zunge raus

Aber diesen Bug kann man ausnutzen indem wir einfach sagen
wenn IE dann height:100%, wenn ein Browser, dann min-height:100% und height:auto

dafür gibt es mehrere Möglichkeiten.

_height:100% //Erkennt nur der IE6 als height an, alle anderen Browser ignorieren es
min-height:100% // Für alle richtigen Browser. height wird nicht gesetzt, deshalb ist es
// standartmäßig :auto

Benutze ich am häufigsten. allerdings meckern da schonmal die CSS-Validatoren

besser:
* html #div // für den IE
{
height: 100%;
}

für die anderen
#div
{
min-height:100%
}

Und die 3. Alternative:

#div
{
height:100%
} // das schnallen jetzt alle, auch der IE

html>body #div
{
height:auto;
min-height:100%;
}// das raffen alle, außer der IE.

Alle 3 Alternativen sind allerdings Browser-Hacks. Da der IE7 min-height unterstützt, der IE6 aber definitiv nicht die Child-Selektoren drauf hat, find ich es im Falle der Alternative 3 nicht problematisch. Und da der neue IE mit _height genauso wenig anfangen kann, wie der Rest der Browsergemeinde ist es auch nicht tragisch (wenn man mit dem Meckern der CSS-Validatoren leben kann).

Ich hoffe, das hilft.

Gute Nacht,
Andree

--------------------------------------------------------

Also ich hab diese Lösung mal durch Googeln gefunden....
Werd das mal soo ausprobieren ;-)

Und dann mal bescheid geben , ob dies geklappt hat oder nicht

Suche

CSS DIV - Positionierung

raven16

Lieutenant

DerEineDa

Lieutenant

raven16

Lieutenant

raven16

Lieutenant

raven16

Lieutenant

Ähnliche Themen