HILFE! Footer bleibt nicht unten kleben!

Hey ho Leutz… es ist schon 0.15 Uhr und ich kaempfe immer noch mit meiner Webseite.

Ich will nen Footer in der Seite haben.
Den hab ich in den Content-Box gepackt, und der Content-Box ist WEISS.

So…wenn ich nun fuer meinen Footer “bottom: 0px;” festlege, dann springt der ploetzlich aus dem weißen Bereich des Contents.

Manchmal bleibt der auch im weißen Bereich nur ist der nicht mehr unten, sondern hängt wie ne Überschrift über die Webseite… -.-

Achja, meine Webseite ist zentriert positioniert, also soll der Footer auch in die Mitte.

Und der soll unten bleiben. TT_______TT
Und im weißen Bereich sein.

Wie muss ich es dem Browser nun in CSS oder vllt auch HTML (whatever…) sagen, damit der Footer dort steht wo er auch stehen soll?

Leutz…Helft mir bitteeee… TT______TT

Kannst uns mal ein link bzw auch Quellcode nenen?

Moin,

das Ganze kannst du mit CSS realisieren:

#footer { position:absolute;
              bottom:0px;
           }

position:absolute; bewirkt dass das Element mitscrollt, aber über allen anderen Elementen liegt und durch diese nicht behindert wird. Daher sollte es an der unteren Seite der Webseite “kleben” bleiben.

andere mögliche Angaben für position sind: relative, fixed, static

Eventuell musst du auch eine von denen nehmen, um deine Idee zu verwirklichen. (kenne deine Webseite nicht, daher kann ich nichts empfehlen)

MfG
myPages

Hey danktsch fuer eure Tipps…

kann euch den Code leider nicht zeigen, weil…

nunja, ich war ja verzweifelt dass ich den Footer gleich geloescht habe… :ps:

Ne Frage…

also meine Seite ist ja zentriert.
Ich moechte nun auch, dass mein Footer auch zentriert positioniert wird.
Weil im IE liegt der footer naemlich irgendwo ganz rechts.

Wie macht man das nun mit CSS?

Moin,

ein klassisches Beispiel:

body { margin:0px; 
          padding:0px;
          text-align:center;
        }
#box { margin:0px auto; 
          text-align:left;
        }

Die Bestimmungen für den body-Tag sind recht simpel. margin und padding kann man setzen, muss man aber nicht. Wichtig hierbei ist vorallem das text-align:center; wodurch alle Elemente erstmal zentriert ausgerichtet werden (bei der Betrachtung im IE) - für die anderen Browser müssen wir bei unseren Box (#box) margin:0px auto; angeben, um diese zu zentrieren. Da aber noch text-align:center; vom body-Tag gilt, müssen wir nun auch noch text-align:left; benutzen, um den Befehl zu “überschreiben” und den Text nicht zentriert anzeigen zu lassen (wir wollen ja, dass Elemente in der Box links ausgerichtet sind) . Wer den Unterschied jetzt nicht verstanden hat, sollte einfach mal text-align:left; weglassen und den Text innerhalb der Box im Firefox ansehen - man sieht den Unterschied eigentlich sofort.

MfG
myPages

Sie dir die CSS-Footer von selfHTML an…
aktuell.de.selfhtml.org/artikel/css/footer/

Also irgendwie klappt das einfach nicht.

Ich glaub das Schicksal will einfach nicht, dass mein Footer zentriert positioniert wird.

Ich hab nun text-align: center fuer den Body tag bestimmt.

Der Content ist zentriert…und joah, so ziemlich ALLES ist zentriert…

AUSSER dem FOOTER :motz:

Was stimmt da denn nur nicht? :susp:

EDIT: Hab beim Footer nun width: 800px festgelegt und ES KLAPPT!

Nun hab ich beim IE (7) allerdings immer noch das gleiche Problem wie vorher!

Der Footer springt da aus dem Elternelement (!) und ist im lilanen Bereich irgendwo gaaaanz rechts.

Wie kann ich dieses Problem beheben?

so:

<div id="page">
   <div id="content">
   </div>

   <div id="footer">
   </div>
</div>

div “page” hat die mindesthöhe 100% content muss sich anpassen und footer ist absolute bottom:0px

das müsste klappen…

…ähm… :whata: …wie macht man das mit content anpassen?

und das mit Mindesthöhe ist mir auch noch unbekannt…

das macht er sowiso… :wink:

sonst “heigth: auto;”

Moin,

is zwar noch früh aber was solls.

alsooooo

position:absolute;

wird an dieser Stelle nix, wenn dann relative, weil er sonst als Elternelement das Browserfenster nimmt und nicht den weißen Page Div. Relative bedeutet in dem Zusammenhang, relativ zu seiner Normalposition und diese sollte ja innerhalb des Divs liegen. Das funktioniert aber auch nicht, da seine “normal Position” je nach Größe des Content Divs variieren kann. Beide Wege funktionieren also nur SeitenDesigns mit fixer Größe, sprich Head, Content und Foot müssen eine feste Höhe bzw Breite haben. (und nein, eine % Angabe ist kein fester Wert)

das Nächste ist, der Content Div passt sich nur seinem Inhalt an, wird der größer, dann wird auch der Div Größer, wird aber mit height:auto; nie seine 100% einnehmen.

ich hab mich jetzt mal hingesetzt und dir fix ne Alternative gebastelt:

<html>
<head>
	<title></title>
</head>
<body style="margin:0px; padding:0px; width:100%, height:100%; text-align:center">
<div id="page" style="margin:0px auto; width:800px; height:100%; border:thin solid #000000; text-align:center">
	<div id="head" style="width:100%; height:10%; border:thin solid #000000">
	</div>
	<div id="content" style="width:100%; height:79%; border:thin solid #000000">
		<div id="Inhalt" style="width:100%; height:100%; border:thin solid red; overflow:auto">
			Hier der Inhalt
		</div>
	</div>
	<div id ="foot" style="width:100%; height:10%; border:thin solid blue">
	</div>
</div>
</body>
</html>

die Border sind nur zur veranschaulichung gedacht. In den Div mit ID=Inhalt würde dein Site Content kommen. Durch die Overflow:auto Eigenschaft sorgt er dafür das zu lange Text nicht deine Seite verlängert sondern innerhalb des Divs gescrollt wird. Nebenbei hat die Version auch noch den Vorteil nahezu sizeable zu sein. Sind aber nur Leere Divs, wie sich das ganze mit Head und Foot Inhalten verhällt hab ich jetzt nicht getestet.

Ansonsten bleibt dir nur noch ein festes Design, also mit einer festen Höhe von x Pixeln und im Inneren dann einen Div indem der Inhalt Scrollt.

Greez

@Phil: Also ich hab alles genauso durchgeführt wie du beschrieben hast und nix…im IE 7 ist der footer immer noch ganz rechts, man hat da auch noch so nen schönen scrollbalken damit man nach rechts scrollen und den footer sehen kann :astonished:

und mit height: auto ist alles ziemlich…durcheinander. der footer ist irgendwo im header bereich, page ist nicht mehr weiß sondern hat die Farbe lila vom Hintergrund…

Ich hocke nun schon seit 2 Tagen da und ärgere mich mitm footer rum und langsam ists etwas frustrierend. :stress:

Habt ihr denn noch ne Idee? :hail:

EDIT: Also mir ist aufgefallen, dass der Footer bei Internet Explorer 7 wohl relativ zum rechten Außenrand vom Elternelement positioniert wird…

Wie kriegt man das Problem behoben… ?

sende uns mal den Link deine Page :wink:, dann können wir dir bestimmt besser weiterhelfen. Sich alles so einfach vorzustellen ist relativ schwierig…

greez,
mmemichi

Okay, hier: sugary-life.bplaced.net

Bitte mit IE 7 angucken, sonst sieht man den Fehler net.

@the-white-lily

Also erstmal ich habe leider keinen IE daher kann ich dir damit nicht wirklich helfen da ich im Moment leider auch keine Zeit habe mir deine CSS anzusehen. Ich habe allerdingsvnoch ein kleines Validierungsfehlerchen entdeckt:

validator.w3.org/check?verbose=1 … ced.net%2F

Das wird aber deinen Fehler leider nicht beheben.

Ansonsten muss ich sagen finde ich das Design nicht schlecht :stuck_out_tongue: weiter so.

Lieben Gruss Six

[quote=„sixpack“]
Ansonsten muss ich sagen finde ich das Design nicht schlecht :stuck_out_tongue: weiter so.
Lieben Gruss Six[/quote]

Danktsch: :smiley:

Kann mir denn keiner helfen? :hail:

EDIT: Leutz, ich hab echt keine Ahnung ob nun der Internet Explorer spinnt oder ich, aber jetzt klappt alles plötzlich… :whata:

Hoffentlich für immer :smiley:

Nabend,

also zum 1. isses natürlich schön das es wieder bzw überhaupt erstmal geht.
zum zweiten möchte ich mal anmerken das es generell besser ist seinen Quelltext zu posten und mit dem hier zu arbeiten, also die schnipsel von hier irgendwie bei sich ein zu bauen, vor allem wenn man ein konkretes Problem hat. Das erschwert die Fehlersuche um einiges :slight_smile:

In deinem Stylesheet sind ja durchaus auch noch paar andere Sachen relevant die da von Interesse gewesen wären, aber wird wohl nur der Cache gewesen sein. Der Vollständigkeithalber würd ich trotzdem darum bitten das du nun deinen grundlegenden Aufbau für alle mit dem selben Problem nochmal postest :slight_smile:

Greez

Ich hatte auch solche Probleme mit einem Footer, bis ich mir den Quelltext von selfHTML geklaut habe…

Jetzt würde ich sagen, dass es mit diesem CSS gehen müsste:

body { }
content { }
footer { position: absolute; bottom: 0px; left: 0px; width: 100%}
<body>

<div>
  <div id="content">
     Content
  </div>
  <div id="footer">
     Footer
  </div>
</div>

</body>

Aber wie gesagt: CSS macht Probleme, und zwar immer, wenn man es nicht erwartet…

denselben CSS Code wie von michi7x7 hatt ich auch…

…ich glaub es ging, als ich irgendwann so verzweifelt war, dass ich erstmal alles, was mit position: absolute zu tun hatte, einfach gelöscht habe :smiley:

Irgendwie war der Footer wieder im Elternelement bzw. im weißen Mainbox und nicht mehr außerhalb :ps:

Natürlich hing der Footer über den eigentlichen Inhalt und „klebte“ nicht mehr „am Boden“ :smiley:

Ich fand das natürlich SOO amazing dass der Footer wieder im weißen Bereich ist, und da hab ich dann einfach nochma position: absolute; bottom: 0px; left: 0px; eingefügt und es KLAPPT :smiley:

Das liegt daran, dass “position: absolute” immer auf das nächstgrößere Element hinweist… Das kann Body sein oder ein div…