Layoutproblem

M3Y3R

Well-known member
ID: 336361
L
8 Mai 2006
1.608
60
Mag evtl. eine allgemeine HTML-Frage sein, aber da ich mich mit Zend beschäftige poste ich es hier mal...

Mit Hilfe von Zend erstelle ich grad ein Layout... Nun hab ich folgendes in der main.phtml
HTML:
<body>
	<div id="header">eSearcher - Next Generation</div>
	<?php echo $this->navigation(); ?>
	<?php echo $this->layout()->content; ?>
	<div id="footer">© 2011</div>
</body>

Den Header habe ich in der Stylesheet wie folgt definiert:
HTML:
#header {
	border:				1px solid black;
	background-color:		#1C006E;
	background-image: 		url(../images/glossy.png);
	background-repeat:		repeat-x;
	font-size: 				20px;
	font-weight:			bold;
	text-align: 			        center;
	color:					white;
	padding:				5px;
}

und den Footer wie folgt:
HTML:
#footer {
	background-color: 		#1C006E;
	color:					white;
	border:				1px solid black;
	padding:				5px;
	background-image: 		url(../images/glossy2.png);
	background-position:	        bottom;
	background-repeat:		repeat-x;
	font-weight:			bold;
	text-align: 			        right;
	font-size: 				10px;
	clear:					none;
	position:				fixed;
	bottom:				0px;
}

Wenn ich mir das nun anzeigen lasse, geht der Header über die gesamte Breite und der Footer steht am unteren Bildschirmrand, was ich ja auch möchte, aber der Footer ist nur so groß wie der Inhalt...
Wenn ich dem Footer eine Breite von 100% mitgebe, bekomme ich einen Scrollbalken was nicht gewünscht ist...

Wie bekomme ich es hin, dass der Footer über die gesamte Fensterbreite geht, ohne das der Scrollbalken erscheint oder der Footer aus dem Fenster heraus läuft....

Danke für eure Hilfe !


MFG
Papenburger
 
Durch position:fixed; musst du eine Breite angeben. In deinem Falle also width:100%;. Da du aber noch ein padding vergeben hast, wird diese Breite des padding der Gesamtbreite hinzugefügt. Also padding entfernen. Wenn du einen Abstand zu einem innen liegenden Element haben möchtest, musst du dieses in ein weiteres Element packen, dass dann die padding/margin Werte aufweist.