[CSS] bottom:0px hat keinen Effekt

jeko · 05. Feb. 2009

Hallo zusammen,

Ich habe Probleme damit, ein Div (#footer) absolut am unteren Rand (bottom:0px

zu positionieren. Definiere ich die Eigenschaft nämlich, bleibt das Element am oberen Rand des Dokuments... Positioniere ich es mit top geht alles gut, top:400px positioniert es 400px vom oberen Rand des Elternelements (#outer_page in meinem Fall). Was ist da los?

Das Dokument ist hier zu finden (CSS).

Hier einmal der auf die Struktur gekürzte Quellcode:

HTML:

<div id="outer_page">
	<div id="inner_page">
		<div id="content">
<!-- ... -->
		</div><!-- #content -->
		<div id="box">
<!-- ... -->
		</div><!-- #box -->
	</div><!-- #inner_page -->
	<div id="header">
<!-- ... -->
	</div><!-- #header -->
	<div id="footer">
<!-- ... -->
	</div><!-- #footer -->
</div><!-- #outer_page -->

Und hier das Stylesheet (gekürzt):

Code:

/* Style definitions for alcontrol.ch */

#outer_page {
	width:786px;
	margin:0px 0px 10px -393px;
	padding:0px;
	position:absolute;
	left:50%;
}

#inner_page {
	width:100%;
	position:absolute;
	top:145px;
	left:0px;
}

#header {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:145px;
	background-color:#000;
	color:#fff;
}

#content {
	position:absolute;
	left:0px;
	width:70%;
	top:0px;
}

#box {
	position:absolute;
	left:75%;
	top:0px;
	width:25%;
}

#footer {
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	padding:0px;
	margin:20px 0px 0px 0px;
}

Grüsse
jeko

dkdenz · 05. Feb. 2009

Ich hatte neulich ein ähnliches Problem.
Finde nur leider die Source nicht.
Jedenfall war's so, das der Fx den Footer nur an den unteren Rand gesetzt hatte, nachdem ich ein

PHP:

body, html {height:100%;}

(ich weiß jetzt nicht mehr ob body oder html, weswegen ich beide genannt habe)
spendiert hatte.
Ansonsten scheint das immer noch ein Problem für die IE's zu sein...

Edit:
Wenn Du einen Wert 0 hast, kannst Du getrost die Maßeinheit weglassen.
Also z.B. padding:0; reicht aus...

Edit Edit:
Learn CSS Positioning in Ten Steps: position static relative absolute float

jeko · 05. Feb. 2009

Hallo dkdenz,

Hat natürlich funktioniert, wie zu erwarten bei dir

Das Setzen der height für body und/oder html hat bei mir nichts bewirkt, erst height:100% für #outer_page im Anschluss. Danke dir!

grüsse
jeko

PS: Klappt sogar im IE (Website overview for http://alcontrol.ch/ - Browsershots)

Sagenhaft... Nochmals vielen Dank!

jeko · 05. Feb. 2009

Hallo zusammen,

die Lösung schien so perfekt zu sein... Schade, bei Dokumenten die über den Bildschirmrand hinausgehen bleibt der #footer am Bildschirmrand stehen. Wenn gerade jemand einen spontanen Einfall hat wäre ich sehr froh

Ich schalt jetzt erstmal ab.

Grüsse
jeko

Edit: Achja, der Link!

dkdenz · 05. Feb. 2009

Als Schnellschuß würde ich erstmal dafür sorgen, das hinter/unter Deinem Inhaltsdiv das Footerdiv platziert wird.
Dann ist der Footer immer vorhanden, nur eben bei einer Höhe von unter 100% nicht am untereren Rand, sondern direkt nach dem Inhalt.
Aber damit kannst Du erstmal leben, bis die finale Lösung gefunden worden ist.

jeko · 07. Feb. 2009

Hallo dkdenz,

danke für deinen Tipp. Leider war das wirklich nicht die finale Lösung, da das #footer-Div dann nur so breit war wie das #content-Div. Aber ich hab's nun denke ich ganz gut hinbekommen: Das #header-Div wird weiterhin absolut positioniert, das #inner_page (und damit auch der #content) werden aber mit margin-top "positioniert". Darauf folgt dann ganz einfach der #footer der dank dem Umstand, dass das davorstehende Div #inner_page nicht mehr absolut positoniert ist automatisch unten angefügt wird (ohne jegliche Positionierung).

Problem gelöst, danke dir

grüsse
jeko

anna55 · 07. Feb. 2009

dkdenz schrieb:
Als Schnellschuß würde ich erstmal dafür sorgen, das hinter/unter Deinem Inhaltsdiv das Footerdiv platziert wird.
Dann ist der Footer immer vorhanden, nur eben bei einer Höhe von unter 100% nicht am untereren Rand, sondern direkt nach dem Inhalt.
Aber damit kannst Du erstmal leben, bis die finale Lösung gefunden worden ist.

Dein Footer ist immer noch nur dann unten, wenn genug Content da ist.

Ich hab mir mal Gedanken gemacht, vor allem auch deshalb, weil ich nicht wirklich zufrieden war mit Deiner Art der Zentrierung und auch nicht mit der Div-Reihenfolge. Du hast jetzt zwar schon weitergemacht und mein Beispiel entspricht dem Stand von Donnerstag, aber vielleicht willst Du mal vergleichen.

Der Footer ist jetzt auch unten bei nur einem Satz Inhalt. Ich habs getestet mit FF, IE7 und IE6.

PHP:

/* Style definitions for alcontrol.ch */

/* Style definitions for alcontrol.ch */

html, body {
	padding:0px;
	margin:0px;
	font-family:Verdana, sans-serif;
	background-color:#eee;
	height: 100%;
}

q,blockquote {
	quotes:"\00AB" "\00BB";
	font-style:italic;
}

img {
	border-width:0px;
}

a {
	text-decoration:none;
	font-weight:bold;
	color:#aaa;
}

h2 {
	margin:0;
}

#outer_page {
	width:786px;
	margin: 0 auto;
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#inner_page {
	padding:0;
}

#header {

	width:100%;
	height:145px;
	background-color:#000;
	color:#fff;
}

#header img {
	position:relative;
	top:50%;
	left:0px;
	margin-top:-40px;
}

#navigation {
	list-style-type:none;
	padding:5px 0px 0px 0px;
	margin:85px 0 0;
	text-align:center;
	height:35px;
	border-top:1px solid #fff;
	width:100%;
}

#navigation li {
	display:inline;
	margin:0px 20px 0px 20px;
	padding:0px;
}

#navigation li a {
	text-decoration:none;
	text-transform:lowercase;
	padding:0px;
	margin:0px;
	color:#fff;
	font-size:1.0em;
	letter-spacing:-0.01em;
	font-weight:normal;
}

#navigation li a:after {
	content:".";
	color:#780002;
}

/*
#navigation li a:after :hover{
	content:".";
	color:#fc0100;
}*/

#content {
	position:relative;
	top:-49px;
	float:left;
	width:70%;
	margin:0 0 20px;
}

#box {
	position:relative;
	margin-left:70%;
	margin-top:25px;
	width:25%;
	border-left:1px dotted #ccc;
}

#box h3 {
	color:#555;
	background-color:#ccc;
	border-bottom:1px solid #aaa;
}

#footer {
	clear:left;
	position: absolute;
	bottom: 0;
	width:786px;
	font-family:Verdana, sans-serif;
	width: 100%;
}

#links {
	text-align:right;
	background-color:#000;
	padding:5px;
	color:#fff;
	font-size:1.0em;
}

#copy {
	font-size:0.7em;
	color:#ccc;
	text-align:center;
	margin:11px 0;
}

.entry {
	margin:0px;
	padding:5px 0;
	border-bottom:1px solid #aaa;
}

.entry h2, h3 {

}

.options {
	background-color:#ccc;
	color:#aaa;
	text-align:right;
}

PHP:

<body>
<div id="outer_page">
	<div id="inner_page">
	<div id="header">
		<a href="http://alcontrol.ch" title="alcontrol.ch"><img src="http://alcontrol.ch//website_objects/images/logo.png" alt="alcontrol.ch" /></a>
		<ul id="navigation">
			<li><a href="news.html" title="Neues von alcontrol.ch">News</a></li>
			<li><a href="ueberuns.html" title="Mehr über uns erfahren">Über uns</a></li>
			<li><a href="dienstleistung.html" title="Unser Angebot für Sie">Dienstleistung</a></li>

			<li><a href="geraet.html" title="Qualität darf sich zeigen - Unser Testgerät">Gerät</a></li>
			<li><a href="jobs.html" title="Need a Job?">Jobs</a></li>
			<li><a href="partner.html" title="Einer für alle - Unsere Partner">Partner</a></li>
		</ul>
	</div><!-- #header -->
		<div id="box">
			<h2>Agenda</h2>

		</div><!-- #box -->
		<div id="content">

			<h2>News</h2>
<p class="entry">alcontrol.ch wird am Albanifest (26.-28.06.2009) am Stand der Wagenschenke Gastrecht geniessen. (10.01.2009)</p>

		</div><!-- #content -->

	</div><!-- #inner_page -->
	<div id="footer">
		<p id="links"><a href="kontakt.html" title="Kontaktieren Sie uns!">Kontakt</a></p>

		<p id="copy">© 2008 alcontrol.ch</p>
	</div><!-- #footer -->
	</div><!-- #outer_page -->

</body>

[CSS] bottom:0px hat keinen Effekt

jeko

Lounge-Member

dkdenz

New member

jeko

Lounge-Member

jeko

Lounge-Member

dkdenz

New member

jeko

Lounge-Member

anna55

Moderator