Div nach div mit variabler Höhe?

gombi · 16.01.2010, 17:11

Hallo,

Ne kurze Verständnisfrage:

Ich habe zb ne Mnüleiste absolut auf der Seite zentriert, diese hat ne vorgegebene Höhe. Dann kommt das div "inhalt" welches gleich wie der Menübalken absolut zentriert ist, aber keine feste Höhe hat, da diese sich ändert.

Dann kommt der footer, der sollte natürlich immer direkt nach dem div inhalt angezeigt werden. Tut er aber nicht. Er befindet sich etwa in der Mitte des dev inhalt.

Mein css schaut etwa so aus:

Code:

#menubalken {
	background: url(images/menu_repeader.png) repeat-x top;
        width: 800px;
	position: absolute;
        z-index: 2;
        left: 50%;
        margin-left: -400px;
	top: 191px;
	height: 34px;
        padding: 0px 0px 0px 10px;
}

#inhalt {
	background: url(images/bg.png) repeat;
        line-height: 18px;
        padding: 10px 0px 0px 10px;
        width: 796px;
	position: absolute;
        left: 50%;
        top: 225px;
        z-index: 1;
        margin-left: -400px;
	border-left: solid;
	border-right: solid;
	border-width: 2px;
	border-color: #ffff00;
}

#footer{
	background: url(images/footer.jpg) repeat-x;
        line-height: 18px;
        position: absolute;
        left: 50%;
        z-index: 3;
        margin-left: -400px;
        width: 796px;
	height: 45px;
        padding: 0px 0px 0px 10px;
	border-left: solid;
	border-right: solid;
	border-width: 2px;
	border-color: #ffff00;
}

Wie bekomme ich den footer dort hin wo er sein sollte?

LG und schönen Tag,
Michi

nikosch · 16.01.2010, 17:18

Indem DU den Footer nicht absolut positionierst.

gombi · 16.01.2010, 21:04

Das hab ich auch versucht, aber so wird der footer links oben positioniert.

Hier das ganze als vereinfachtes Beispiel:

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>

<style type="text/css">
	
	#menubalken {
	background-color: green;

	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -400px;

	width: 800px;
	z-index: 2;
	height: 80px;
	}
	
	#container { 
	width: 800px; 
	position: absolute;
	top: 80px;
	left: 50%;
        z-index: 1;
       margin-left: -400px;
       background-color: #ddf;
	}
	
	
	
	#footer{
	background-color: red;
	

	/*position: absolute;
        left: 50%;
       margin-left: -400px;*/
   

	width: 800px;
	height: 45px;
	}

	
	
</style>


 	
 	</head>

<body>

	<div id="menubalken">
	</div>
	
	<div id="container">
	<p> Zuerst müssen html und body auf eine Höhe von 100% gebracht werden. Dies ist nötig, damit sich nachfolgende Prozent-Angaben an dieser Basis orientieren. Mittels Seite overflow:hidden verhindert man, dass der Browser Scrollbalken darstellt, welche nicht benötigt werden - so würde z.B. der Internet Explorer ausgegraute Scrollbalken darstellen. Sowohl margin als auch padding wurden auf 0 gesetzt, um Innen- und Außenabstände zu entfernen.

Für den content_container definiert man beispielsweise eine Höhe von 95% und weist ihm die CSS-Deklaration overflow:auto zu. Theoretisch könnte man auch overflow:scroll einsetzen, dann bieten aber die meisten Browser auch einen (unerwünschten) horizontalen Scrollbalken an.

Dem Footer muss nun lediglich noch die verbliebene Höhe zugewiesen werden, in diesem Beispiel sind es 5%.

</p>
	</div>
	
	<div id="footer">
	</div>
	

</body>
</html>

Bin für jede Hilfe dankbar!

LG
Michael

PsychoEagle · 19.01.2010, 17:10

Hi,

warum positionierst du es mit absolute? Warum nicht mit float?

Also bei deinem Beispiel einfach "float:left;" bei deinem #footer hinzufügen. Alternativ kannst du es aber komplett mit float machen:

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>
  
    <style type="text/css">
      body {
        text-align:        center;
      }
      #site {
        margin:            auto;
        width:             800px;
        text-align:        left;
      }
      #menubalken {
        float:             left;
        width:             800px; 
        height:            80px;
        background-color:  green;
        z-index:           2;
      }
      #container {
        float:             left; 
        width:             800px;
        background-color:  #ddf;
        z-index:           1;
      }
      #footer{
        float:             left;
        width:             800px;
        height:            45px;
        background-color:  red;
      }
    </style>
    
  </head>
  <body>
  
    <div id="site">
      <div id="menubalken"></div>
      <div id="container">
        <p>
          Text
        </p>
        <div id="footer"></div>
      </div>
    </div>

  </body>
</html>

Grüße
Das Psy

gombi · 19.01.2010, 19:50

Danke das hört sich gut an. Werd ich gleich mal versuchen!

LG

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Saubere Lösung gesucht: DIVs auf gleicher Höhe	WasserDragoon	HTML, Usability und Barrierefreiheit	5	11.09.2009 16:57
Div-Elemente gleichmäßig über Höhe anordnen	rocco	HTML, Usability und Barrierefreiheit	1	29.07.2009 23:53
Höhe an absolutem DIV anpassen?!	webproger	HTML, Usability und Barrierefreiheit	6	02.04.2009 14:49
[Erledigt] DIvs passen sich nicht automatisch der höhe an im Firefox und Opera	litterauspirna	HTML, Usability und Barrierefreiheit	4	09.10.2008 13:08
[CSS] Table ändert ungewollt seine Höhe, was tun?	I-Spy	HTML, Usability und Barrierefreiheit	1	13.05.2006 13:57
Höhe div-Element	MasterMind	HTML, Usability und Barrierefreiheit	1	04.05.2006 09:54
Thumbnail proportional mit Max. Breite u. Höhe	.fox	PHP Tipps 2006	3	25.03.2006 07:03
3 divs nebeneinander mit dynamisch gleicher Höhe		HTML, Usability und Barrierefreiheit	19	18.01.2006 22:05
Höhe eines lokalen Bildes auslesen!		HTML, Usability und Barrierefreiheit	5	08.11.2005 12:42
Text im DIV von der Höhe her mittag plazieren?		HTML, Usability und Barrierefreiheit	2	20.10.2005 10:47
neue Seite mit X breite und min höhe + druckbefehl		HTML, Usability und Barrierefreiheit	15	11.05.2005 13:34
[Erledigt] IFrame Höhe dynamisch an Seiteninhalt anpassen?		HTML, Usability und Barrierefreiheit	2	23.04.2005 18:44
[Erledigt] Bild-Breite und -Höhe anders holen		PHP Tipps 2005	2	15.03.2005 13:43
css Kasten soll automatisch seine Höhe (hight) ändern...	18inch	HTML, Usability und Barrierefreiheit	4	09.07.2004 22:12
Tabellen Höhe mit CSS		HTML, Usability und Barrierefreiheit	5	05.06.2004 14:04


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

16.01.2010, 17:18
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Indem DU den Footer nicht absolut positionierst. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

19.01.2010, 19:50
gombi Benutzer Registriert seit: 13.01.2010 Beiträge: 47 PHP-Kenntnisse: Anfänger	Danke das hört sich gut an. Werd ich gleich mal versuchen! LG