✔ Footer richtig positionieren, aber wie ?

[raul25]

Hallo zusammen,

ich bin neu hier, und hoffe Ihr könnt mir helfen. Ich bin leider noch ziemlicher Anfänger in Sachen HTML und CSS.

Ich habe den Code für einen Footer erstellt:

/* Footer*/
#footer {
   width: 500px;
   padding: 10px 10px 10px 10px;
   background-color: #202020;
   font-size:0.9em;
   text-align:center;
}
#footer {
   \width: 510px;
   w\idth: 500px;
   position: absolute;
   left: 240px;
}
#footer a {
   text-decoration: none;
   font-weight : bold;
   color: <cc:print value="&usercolor.alt.medium">;
}
#footer a:hover {
   text-decoration: underline;
   color: <cc:print value="&usercolor.bright">;
}

Dieser funktioniert auch einwandfrei.

Wie kriege ich diesen aber automatisch am Ende einer Seite positioniert, alle anderen Boxen meines Layouts sind absolut positioniert.

So habe ich Ihn eingefügt: <div id="footer"> ..... </div>


Hier meine gesamte Style.css:

#content {
        width: 530px;
	margin: 0px;
	position: absolute;
        padding: 0px;
	top: 150px;
	left: 260px;
	z-index: 0;
}

#sidebar {
	position: absolute;
	top: 150px;
	left: 830px;
	width: 160px;
	padding: 0px;
	
}

#logo {
	width: 700px;
	height: 40px;
	padding: 0px;
	margin: 0px;
	position: absolute;
	top: 20px;
	left: 260px;
	font-size: 280%;
	font-variant : small-caps;
	color: <cc:print value="&usercolor.dark">;
}

#plaintext {
	position: relative;
	top: 55px;
	left: 820px;
}

#plaintext a {
	color: #888888;
	text-decoration: none;
}


#eyecatcher {
	top: 20px;
	left: 20px;
	width: 200px;
	height: 500px;
	padding: 1px;
	border : 1px solid #000000;
	background-color: #888888;
	position: absolute;
	z-index: 5;
}

#common {
	top: 540px;
	left: 20px;
	width: 204px;
	position: relative;
	padding-bottom: 20px;
	
}

#common a {
	color: <cc:print value="&usercolor.bright">;
	display: block;
	text-decoration: none;
	padding: 4px 0px 4px 15px;
	background : url(../images/<cc:print value="&pic.bullet.filename">) no-repeat 0px 3px;
	font-weight: bold;
	font-style: italic;
}

#common a:hover {
	color: #ffffff;
}


/* Menü */

#menuBar {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 101px;
	left: 260px;
	z-index: 20;
	height: 27px;
	overflow: hidden;
}

a.menuButton, a.menuButtonActive  {
	display: block;
	float: left;
	height: 17px;
	color: <cc:print value="&usercolor.alt.medium">;
	text-decoration: none;
	padding: 5px 6px 5px 6px;
	border-right: 1px solid #000000;
}

.menu {
	background: #0B0C0B url(../images/<cc:print value="&pic.menu.filename">) repeat-x top left;
	border: 1px solid #000000;
	padding: 0px;
	position: absolute;
	text-align: left;
	visibility: hidden;
	left:0px;
	top:0px;
	z-index: 10;
}

a.menuItem, a.menuItemActive {
	color: <cc:print value="&usercolor.alt.medium">;
	background-color: transparent;
	display: block;
	padding: 6px 16px 6px 16px;
	text-decoration: none;
	white-space: nowrap;
}

a.menuButtonActive, a.menuButton:hover {
  background-color: #000000;
  color: <cc:print value="&usercolor.bright">;
}

a.menuItem:hover, a.menuItemActive {
  background-color: #000000;
  color: <cc:print value="&usercolor.bright">;
}

form.search {
	padding: 0px;
	position: absolute;
	top: 30px;
	left: 820px;
}

form.search input {
	margin: 0px;
	vertical-align : middle;
}

input.search {
	border: #888888 1px solid;
	background : #ffffff url(../images/<cc:print value="&pic.fade.filename">) repeat-x;
	width: 160px;
	padding: 2px;
	margin: 0;
}

Ich hoffe Ihr könnt mir helfen.

Grüße Raul

 

[Maik]

Wie kriege ich diesen aber automatisch am Ende einer Seite positioniert, alle anderen Boxen meines Layouts sind absolut positioniert.

Hi,

dann mach es für den Footer genauso, blos anstelle von top mit bottom, um seine Startposition von unten festzulegen.

mfg Maik

 

[raul25]

Habe ich gemacht. Der Footer steht aber nicht ganz unten.

Hier mein Code:

/* Footer*/
#footer {
   width: 500px;
   padding: 10px 10px 10px 10px;
   background-color: #202020;
   font-size:0.9em;
   text-align:center;
}
#footer {
   \width: 510px;
   w\idth: 500px;
   position: absolute;
   bottom: 0px;
   left: 240px;
}
#footer a {
   text-decoration: none;
   font-weight : bold;
   color: <cc:print value="&usercolor.alt.medium">;
}
#footer a:hover {
   text-decoration: underline;
   color: <cc:print value="&usercolor.bright">;
}

Das Ergebnis hier.

 

[Maik]

Dann binde den Footer an dieser Stelle des Quellcodes ein, und vergiß wieder seine absolute Positionierung:

<p>© raul-blog.de 2008 - Letztes Update: 08.12.2008</p><br />
<br />
<!-- Footer-Bereich -->
</div>

mfg Maik

 

[raul25]

Danke für deine Hilfe, es hat endlich geklappt.

Grüße Raul