[div-layout] 100% hoehe - element am unteren rand ausrichten

theo · 10.04.2005, 11:46

tach puristen,

ich hab mal wieder ein problem mit einem tabellenlosen design.
ich moechte gern, dass der "container" 100% hoehe hat (hat er), der kopf 80px hoch ist (is er auch) und das main-div den restlichen platz bis zum unteren browserrand einnimmt (tut es nicht). dazu soll der "slogan1" ca. 10px ueber dem unteren browserrand sitzen und immer am linken rand des "container" ausgerichtet sein (was er auch nicht macht).

wie der name "slogan1" bereits vermuten laesst kommen noch zwei weitere positionen in frage. in den anderen templates soll der slogan 1x links neben dem "main" und 1x rechts davon sitzen.

hat jemand ein paar tips fuer mich, wie ich dazu umgesetzt bekomme?

gruss
hardy

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
  <head>
	<title>Test</title>
	<style type="text/css">
	html { height:100% }
	*html #container { height:99.5%; }
	
	body {
	  height:100%;
	  background:#F8F8F8;
	  margin:0px;
	  padding:0px;
	  font-family:verdana,arial,helvetica,sans-serif;
	  font-size:12px;
	  color:#999999;
	}	
	
	#container {
	  background:#ffffff;
	  min-height:100%;
	  width:760px;
	  margin:0px auto;
	  border-left:1px dashed #5BA225;
	  border-right:1px dashed #5BA225;
	}
	
	#head {
	  width:760px;
	  background:#99CC66;
	  height:80px;
	  border-bottom:1px solid #5BA225;
	}
	
	#logo {
	  width:120px;
	  height:65px;
	  background:#ac0003;
	  position:relative;
	  top:40px;
	  left:560px;
	  color:#98CB60;
	  border:1px solid #5BA225;
	}
	
	#main {
	  background:#ffffff;
	  padding:20px 10px 20px 15px;
	  max-height:100%;
	  width:730px;
	}
	
	#slogan1 {
	  background:#ffffff;
	  border:1px dashed #ac0003;
	  height:20px;
	  width:200px;
	  top:-40px;
	  vertical-align:bottom;
	}
	</style>
  </head>
  <body>
  	<div id="container">
	  <div id="head">
	  	<div id="logo">logo</div>
	  </div>
	  <div id="main">main</div>
	</div>
	  <div id="slogan1">slogan</div>
  </body>
</html>

Boris · 10.04.2005, 17:51

Schau mal hier: http://www.stunicholls.myby.co.uk/layouts/bodyfix.html

theo · 10.04.2005, 20:00

hi boris,

nach dem ich den halben tag verzweifelt weiter am code gestrickt und dabei auf eine antwort gewartet habe hab ich nun eine andere loesung gefunden.
ich hab mir einfach noch eine neue id zugelegt:

HTML-Code:

*html #html {
	  	height:100%;
		width:760px;
		margin:0px auto;
	  }

an der hab ich dann das objekt fuer unten festgenagelt. aber diesmal als klasse.

HTML-Code:

.slogan {
	  	width:400px;
		height:25px;
		background:transparent;
		position:absolute;
		bottom:10px;
		margin-left:20px;
		font-size:18px;
		color:#ffffff;
	  }

und die ebene sieht dann einfach so aus:

HTML-Code:

<div id="head">
	  	<span class="navi">start | referenzen | kontakt</span>
	  	<div id="logo"><img src="images/logo01.png" border="0" alt=""></div>
	  </div>

ich werd mir die seite trotzdem noch mal in ruhe anschauen. und vielen dank fuer den link!

hardy

ps: dabei hab ich aber gleich ein neues problem

die navi soll am bottom vom head ausgerichtet sein. und da bekomm ich sie schon die ganze zeit nicht hin.

hero-master · 11.04.2005, 13:23

Moin theo

Zitat:

Zitat von theo

ps: dabei hab ich aber gleich ein neues problem

die navi soll am bottom vom head ausgerichtet sein. und da bekomm ich sie schon die ganze zeit nicht hin.

Ich würde bei Menus generell mit Ul-Listen arbeiten.
Wenn du das Menu unten positionieren willst, müsstest du dann entweder mit padding oder mit margin arbeiten