Zum Inhalt springen

Menü und Footer fixiert

Erstellt am 19. Dezember 2005 · 23 Antworten · letzte Antwort am 12. Januar 2006 · Seite 2 von 2

Tags: HTML & CSS, Frage

nordic ·

tut mir leid, dass ich damit immer weiter mache, aber ich brings einfach nicht hin #evil# Hab jetzt ne Zeit lang für IE expressions benutzt, allerdings ist da nur der footer stehen geblieben und es funktioniert nur mit ActiveX ... von daher finde ich das keine besonders gute Lösung!

Kann mir hier nicht irgendjemand erklären wie das auf meade.de bewerktstelligt wurde? Da funktioniert das irgendwie perfekt....

Wäre euch unendlich dankbar!!!!!

nordic

schwaiger ·

nur so ne idee.... sollte aber gehen... nicht ausführlich getestet...

deine html:

<!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>
		<link rel="stylesheet" type="text/css" href="template.css" />
	</head>
	<body>
		<div id="main">
			<div id="header">
				###HEAD###
			</div>
			<div id="navi">
				###MENU###
			</div>
			<div id="content">
				laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
			</div>
			<div id="footer">
				###FOOTER###
			</div>
		</div>
	</body>
</html>

und hier deine css:

body
{
	margin: 0;
	background-image: url('template/layout/bg.gif');
}

#main
{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	width: 920px;
	height: 100%;
	background-color: #CCC;
}

#header
{
	width: 920px;
	height: 150px;
	background-color: #FFF;
}

#navi
{
	width: 920px;
	height: 30px;
	background-color: #F60;
}

#content
{
	width: 920px;
	height: 80%;
}

#footer
{
	width: 920px;
	height: 150px;
	background-color: #FFF;
	position: fixed;
	bottom: 0px;
	*position: absolute;
	*top: 100%;
	*margin-top: -150px;
}

lg flo