Footer unten anordnen!

onpoint · 20.01.2011

Hey

Ich stehe vor einem kleinen Problem. Undzwar geht es darum, dass ich bei meiner Seite den Footer gerne so anordnen möchte, dass er immer unten bleibt!

Hab schon einiges versucht..bei andern Seiten die ich gestaltet hab klappte das auch ohne Probleme..nur bei dieser funktioniert es einfach nicht. Liegt es eventuell daran, dass ich die Objekte als absolute Positionen zum relativen "content" div angeordnet hab?

und wenn ja, gibt es trotzdem noch möglichkeiten den footer richtig anzuordnen ohne viel am code zu ändern?

hier ist die seite:

(wie man sieht haut er den footer einfach oben ins bild)

Wäre dankbar für Hilfe!
Lg

Silvio · 20.01.2011

AW: Footer unten anordnen!

Ohne CSS Datei schwer zu sagen. Bitte posten.

dnai85 · 20.01.2011

AW: Footer unten anordnen!

meinst du sowas hier

Feststehender Footer

hier dazu ist der beitrag bzw. der code
CSS: Footer aller Art - feststehende Elemente realisieren

ich hoffe ich konnte dir helfen

fexx · 20.01.2011

AW: Footer unten anordnen!

das was du suchst heißt sticky footer: CSS Sticky Footer

onpoint · 20.01.2011

AW: Footer unten anordnen!

hier die css die ich geschrieben hab:

(wenn ich im footer die position:fixes eingebe erscheint der footer garnicht mehr..

@charset "utf-8";
/* CSS Document */

* {

margin:0; padding:0; border:0;

}

html {

background:url(../Bilder/bg.jpg) 0 0 repeat;

}

body {

font:62.5%/1.2em "Verdana", calibri, arial, sans-serif;
color:#ffffff;
background:url(../Bilder/bg-body.jpg) 0 0 repeat-x;
line-height:15px;

}

/*-----------------------------------*/

.noBorder {
border:0!important;
}

p.highlight {
background:#a4a4a4;
padding: 20px;
margin-bottom:5px;
position:absolute;
border:1px #000 solid;

}

.playerfenster {

width:221px!important;
height:26px;
background:#a4a4a4;
position:absolute;
border:1px #000 solid;
}

.newsfenster {

width:460px!important;
height:539px;
background:#a4a4a4;
position:absolute;
border:1px #000 solid;
}

.clear {
float:none;
clear:both;

}

/*--------------------------------------------------------*/

div#header {

width:960px;
height:388px;
background:url(../Bilder/bg-header.jpg) center no-repeat;
margin:0 auto;
position:relative;

}

div#header ul#navi-top {
position:absolute;
top:22px;
left:530px;
list-style:none;
font-size:10px;
color:#FFF;
text-transform:uppercase;
line-height:10px;
padding:0 10px;

}

div#header ul#navi-top li {
float:left;
padding:0 10px;
border-right:1px solid #FFF;
line-height:10px

}

div#header ul#navi-top li a {
color:#ffffff;
text-decoration:none;
}

div#header ul#navi-top li a:hover,
div#header ul#navi-top li.active a {
color:#066907;
text-decoration:none;

}

div#header ul#navi {
position:absolute;
top:225px;
left:2px;
list-style:none;
font-size:15px;
color:#FFF;
text-transform:uppercase;
line-height:10px;
padding:0 10px;

}

div#header ul#navi li {
float:left;
padding:0 10px;
border-right:1px solid #FFF;
line-height:10px

}

div#header ul#navi li a {
color:#ffffff;
text-decoration:none;
}

div#header ul#navi li a:hover,
div#header ul#navi li.active a {
color:#000000;
text-decoration:none;

}

.button {
background:url(../Bilder/button.jpg) 0 0 no-repeat;
width:139px;
height:38px;
position:absolute;
top:334px;
left:10px;
}

div#header ul#navi-haupt {
position:absolute;
top:345px;
left:2px;
list-style:none;
font-size:15px;
color:#FFF;
text-transform:uppercase;
}

div#header ul#navi-haupt li {
float:left;

}

div#header ul#navi-haupt li a {
color:#ffffff;
text-decoration:none;
}

div#header ul#navi-haupt li a:hover,
div#header ul#navi-haupt li.active a {
color:#066907;
text-decoration:none;

}

/*-------------------------------*/

div#content {
background:url(../Bilder/bg-content.jpg) 0 0;
width:960px;
color:#000;
position:relative;
margin: 0 auto;

}

div.column {
width:960px;
float:left;
margin: 0 0 0 0;
font-size:9px;
left:0;

}

div#facebook {
background:url(../Bilder/likemefb.jpg) 0 0 no-repeat;
width:226px;
height:153px;
position:absolute;
left:485px;
top:560px;
}

/*--------------------------*/

div#footer {
background:url(../Bilder/footer.jpg) 0 0 repeat-x;
height:118px;

}

Aber normalerweise müsste der Footer doch automatisch nach unten verlagert werden oder nicht?
Hat er bei dieser Seite von mir automatisch gemacht: Daniele De Rosa ... dort bleibt der footer unten, hab nach dem "content" einfach alles gecleart und so hats hingehauen. komisch warum es bei der neuen nicht klappt..

fexx · 20.01.2011

AW: Footer unten anordnen!

ach jetzt raff ich dein problem ;-)

dein fehler ist, dass du alle (!!) content elemente absolute positionierst ... damit verliert auch der parent div seine höhe und der footer wird somit richtig angezeigt ... schau dir bitte mal das box model an^^

da haste noch nen fehler:

Code:

<li><a href="">Links</li></a>

;-)

onpoint · 20.01.2011

AW: Footer unten anordnen!

ups. hab den fehler beim Link garnicht gemerkt

haha. Danke!

Wegen dem andern Problem...ja. das war auch meine vermutung, dass ich wegen den absoluten positionierungen den footer natürlich nicht richtig angezeigt bekomme, da der content die höhe ja nicht mehr hat.

aber wie kann man das trotz den absoluten positionierungen lösen?

lg

fexx · 20.01.2011

AW: Footer unten anordnen!

gib dem content divs entsprechende höhen ... ich würde es an deiner stelle trotzdem richtig machen ... sonst hast du nur probleme^^

onpoint · 20.01.2011

AW: Footer unten anordnen!

Nur besteht das problem, dass wenn ich das tue, der Content vertikal nicht mehr mit dem Inhalt mitgeht. Deshalb hab ich ihm lediglich eine Breite gegeben. Die Höhe soll sich an den Inhalt anpassen.

Was könnte es denn für Probleme geben, wenn ich alles mit absoluten Positionen angebe?

Lg

fexx · 20.01.2011

AW: Footer unten anordnen!

bboydaniele schrieb:
Die Höhe soll sich an den Inhalt anpassen.

das wiederspricht sich aber mit deinem position: absolute;

position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
"[...]absolut positionierte Elemente sind außerhalb des normalen Textfluß, sie liegen über den anderen Elementen und beeinflussen somit nicht ihr Layout.[...]"

und das ist dann auch das problem^^

onpoint · 20.01.2011

AW: Footer unten anordnen!

stimmt. du hast recht

hab mich grad aber auch selbst überstolpert. eigentlich war nur der Videobereich dafür gedacht, dass der Content mitläuft. Und dort sind keine absoluten Positionen enthalten. lediglich youtube verlinkungen und evtl. Listen.

Den Rest könnte ich also eigentlich auch so lassen. Dann bräuchte ich theoretisch nur dem content eine Höhe von so und soviel pixel zu geben und er dürfte den Footer nach unten schmeißen?

aber bleibt er dann je nach Auflösung auch unten? Ich denke eher dass er bei höheren Auflösung wieder nach oben wandert^^

fexx · 20.01.2011

AW: Footer unten anordnen!

wieso sollte er das tuen, wenn du eine feste höhe vergeben hast?

aber wie gesagt das ist mehr als quick`n`dirty ... dein content ist völlig unstruckturiert etc. etc. ... ich würde es neu machen^^

onpoint · 20.01.2011

AW: Footer unten anordnen!

Ich verstehe was du mir sagen willst, jedoch verstehe ich nicht warum das so ist

Was genau macht eine Seite unstruktueriert, wenn Objekten absolute Positionen zugewiesen wird? Im Grunde sag ich den Objekten so ja nur wo genau sie stehn sollen..

Lg

-edit- hab jetzt mal die höhe des content divs angegeben und er setzt mir den footer nach ganz unten...bei euch euch?

Link ist im ersten Beitrag

onpoint · 22.01.2011

AW: Footer unten anordnen!

Sorry für den Doppelpost, aber auf deinen Tipp habe ich alles wieder umgeschrieben. Jetzt dürfte es sauber sein!

(abgesehn davon dass mir die "alt"-tags bei den img codes noch fehlen. das mach ich heute abend

Seite:

findet ihr irgendwo darstellungsfehler jeglicher art?