kleines Problem mit Footer

LiebHabSchafi · 10. Januar 2007

Guten Morgen,

habe jetzt angefangen mich von meinen Tabellen Layouts zu entfernen und das ganze mit DIVs zumachen, ansich eine schöne Sachen nur bisschen Kompliziert meiner Meinung

So nun zu meinem Anliegen, ich habe ein Design gebastelt zum testen mit CSS. Dieses Design hat ein Header, Content Bereich und einen Footer. In dem Contentbereich gibt es nochmal ContentLinks und ContentRechts, soweit sogut. nun wird mir aber der Footer immer direkt über den DIVs angezeigt und nicht am ende der Seite

Dazu habe ich mir auch eine Javascript Funktion gebastelt die die höhe des Contents ermittelt und den Footer darunter setzt nur ist das problen das das bei "position:absolute;" ja nicht funktioniert sondern nur bei "position:relative;" verwende ich aber dieses werden mir die DIVs untereinander angezeigt

so sollte es am ende aussehen wenn alles gut geht:
http://www.zanzaro.de/Bilder/soll.JPG

so sieht es derzeit aus:
http://www.zanzaro.de/Bilder/ist.JPG

und so sieht das ganze aus wenn ich bei ContentRechts "Position:relative;" verwende
http://www.zanzaro.de/Bilder/rela.JPG

HTML Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!-- "http://www.w3.org/TR/html4/strict.dtd"//-->
<html>
	<head>
    	<link rel="stylesheet" type="text/css" href="style.css">
		<meta http-equiv="content-type" content="text/html; charset=windows-1250">
	    <title>Community v.2</title>
  	</head>
	<body scroll="Auto">
		<div id="Container">

			<div id="Header"></div>
			<div id="Content">
				<div class="ContentStart"></div>
				<div id="ContentLinks">
					<div id="box">
						<div class="inhalt"></div>
					</div>
				</div>
				<div id="ContentRechts">

					<div id="box1">
						<div class="inhalt">box 1</div>
					</div>

					<div id="box2">
						<div class="inhalt">box 2</div>
					</div>

					<div id="box3">
						<div class="inhalt">box 3</div>
					</div>
				</div>
				<div class="ContentEnde"></div>
			</div>
			<div id="Footer">
				menu
				| menu
				| menu
				| menu
				| menu
				| menu
			</div>

		</div>
		<div id="BorderRightFill"></div>
    	<div id="BorderRight"></div>
    </body>
</html>
<script type="text/javascript">
	var hc = document.all.Content.offsetHeight;
	var hh = document.all.Header.offsetHeight;

	gesamt_h = hh + hc;
	document.all.Footer.style.top = gesamt_h;
</script>

CSS-Code:

Code:

/* CSS Document */
html 						{ height:100%; }
body        					{ font-family:Verdana; font-size:12px; background-image:url(image/background.jpg); background-color:#FFFFFF; background-repeat:repeat-x; margin:0px; padding:0px; height:100%;}
#Container					{ background-color:#FFFFFF; width:780px; height:100%; display:block; margin:0px; padding:0px; }
#BorderRight    					{ position:absolute; top:0px; left:780px; width:5px; height:100%; background-image:url(image/border_right.jpg); background-repeat:no-repeat; z-index:1;}
#BorderRightFill					{ position:absolute; top:0px; left:780px; width:5px; height:100%; background-image:url(image/border_right_fill.jpg); background-repeat:repeat-y; z-index:0;}

#Header						{ background-color:#FFFFFF; width:780px; height:98px; border-bottom:2px solid #a8143c; }
#Content						{ background-color:#FFFFFF; position:absolute; top:100px; width:780px; min-height:500px; margin:0; padding:0; }
#ContentLinks					{ position:relative; left:0px; top:0px; background-color:#FFFFFF; width:162px; margin:0; padding:0;}
#ContentRechts					{ position:absolute; left:164px; top:0px; background-color:#FFFFFF; width:611px; margin:0; padding:0;}
.ContentStart 					{ height:500px; float:right; width:1px; }
.ContentEnde 					{ clear:both; height:1px; overflow:hidden; }

#Footer						{ clear:both; position:absolute; top:-100px; background-color:#FFFFFF; width:780px; line-height:25px; font-size:9px; text-align:center; border-top:2px solid #a8143c; background-image:url(image/footer_top.jpg); background-repeat:repeat-x; }

#box						{ position: relative; width:154px; color:#ffffff; background:#a8143c; margin:4 0 0 2; float:left; }
#box .inhalt					{ padding: 5px 5px 5px 10px; }

#box1						{ position:relative; width:215px; color:#ffffff; background:#b5ce2a; margin:4 2 2 0; float:left;}
#box1 .inhalt					{ padding: 5px 5px 5px 10px; height:246px;}

#box2						{ position:relative; width:390px; color:#ffffff; background:#73c6ee; margin:4 0 2 2 ; float:left;}
#box2 .inhalt					{ padding: 5px 5px 5px 10px; height:246px;}

#box3						{ position:relative; width:609px; color:#ffffff; background:#b4cedd; margin:2 0 0 0; float:left;}
#box3 .inhalt					{ padding: 5px 5px 5px 10px; height:400px;}

schonmal besten Dank im vorraus.

hela · 10. Januar 2007

Hallo LiebHabSchafi,

die drei Verweise zu den JPG-Bildern funktionieren nicht.

LiebHabSchafi · 10. Januar 2007

danke für den Hinweis, habe die Links korrigiert

Maik · 10. Januar 2007

Hi,

in diesem Lösungsvorschlag habe ich mal weitestgehend die absoluten Positionsangaben "aufgehoben" - abgesehen von den IDs #BorderRight und #BorderRightFill - und stattdessen das DIV #Content mit margin-top:100px ausgerichtet, sowie die DIVs #ContentLeft und #ContentRight mit Hilfe der float-Eigenschaft nebeneinander angeordnet:

Code:

html,body {
height:100%;
margin:0px;
padding:0px;
}

body {
font-family:Verdana;
font-size:12px;
background-image:url(image/background.jpg);
background-color:#FFFFFF;
background-repeat:repeat-x;
}

#Container  {
background-color:#FFFFFF;
width:780px;
height:100%;
display:block;
margin:0px;
padding:0px;
position:relative;
}

#BorderRight {
position:absolute;
top:0px;
left:780px;
width:5px;
height:100%;
background-image:url(image/border_right.jpg);
background-repeat:no-repeat;
z-index:1;
}

#BorderRightFill {
position:absolute;
top:0px;
left:780px;
width:5px;
height:100%;
background-image:url(image/border_right_fill.jpg);
background-repeat:repeat-y;
z-index:0;
}

#Header {
background-color:#FFFFFF;
width:780px;
height:98px;
border-bottom:2px solid #a8143c;
}

#Content {
background-color:#FFFFFF;
margin-top:100px;
width:780px;
min-height:500px;
height: auto !important;
height: 500px;
margin:0;
padding:0;
}

#ContentLinks {
background-color:#FFFFFF;
width:162px;
margin:0;
padding:0;
float:left;
}

#ContentRechts {
float:right;
background-color:#FFFFFF;
width:611px;
margin:0; 
padding:0;
}

.ContentStart {
height:500px;
float:right;
width:1px;
}

.ContentEnde {
clear:both;
height:1px;
overflow:hidden;
}

#Footer {
clear:both;
margin-top: 5px;
background-color:#FFFFFF;
width:780px;
line-height:25px;
font-size:9px;
text-align:center;
border-top:2px solid #a8143c;
background-image:url(image/footer_top.jpg);
background-repeat:repeat-x;
}

#box {
position: relative;
width:154px;
color:#ffffff;
background:#a8143c;
margin:4px 0 0 2px;
float:left;
}

#box .inhalt {
padding: 5px 5px 5px 10px;
}

#box1 {
position:relative;
width:215px;
color:#ffffff;
background:#b5ce2a;
margin:4px 2px 2px 0;
float:left;
}

#box1 .inhalt {
padding: 5px 5px 5px 10px;
height:246px;
}

#box2 {
position:relative;
width:390px;
color:#ffffff;
background:#73c6ee;
margin:4px 0 2px 2px;
float:left;
}

#box2 .inhalt {
padding: 5px 5px 5px 10px;
height:246px;
}

#box3 {
position:relative;
width:609px;
color:#ffffff;
background:#b4cedd;
margin:2px 0 0 0;
float:left;
}

#box3 .inhalt {
padding: 5px 5px 5px 10px;
height:400px;
}

Vielleicht hilft dir das weiter?

kleines Problem mit Footer

LiebHabSchafi

Mitglied

hela

LiebHabSchafi

Mitglied

Maik

Neue Beiträge