Problem mit meiner fusszeile

[murgel]

Guten Abend,
hoffentlich kann mir hier jemand einen Tipp geben, ich hab schon stundenlang versucht meine fusszeile nach unten zu bekommen.
Ich hab folgenden Aufbau (Auszug):

Code: Alles auswählen

* {
margin:         0;
padding:      0;
html { height: 101%; }

body {
   height: 101%; color: #fff;
      
}
#wrapper {
   margin: 0 auto;
   min-height: 100%;
   height:auto !important;
   height:100%;
   width:1000px;
}#content {
      padding:20px 170px 0 170px;
      min-height:340px;
      height:370px;}
#fusszeile {
      clear: both;
      margin-top:30px;
      padding:0;
      width:1000px;
      height:90px;
      text-align:center;
      }
      

Was fehlt denn da? Über einen Tipp würde ich mich sehr freuen.
Bea

[Basti]

Mit dem CSS Teil alleine ist es schwierig festzustellen.

Wie sieht denn dein HTML Teil aus und was genau funktioniert nicht? Ragt die Fußzeile noch irgendwo hinein oder ist sie nur nicht ganz am Ende der Seite?

Noch besser wäre natürlich ein Screenshot oder Link zu der Seite.

Momentan sehe ich nur eine fehlende schließende Klammer für die *-Angabe. Dann ist die Fußzeile aber auch unten bei mir.

[murgel]

Hallo,
sorry, vor lauter Stress hab ich nur die Hälfte gepostet.
Hier kann man schauen:
http://www.formathochzwei.de/htm/appart1.htm
Ich vermute ja irgendwie, das es etwas mit der contenthöhe zu tun hat, aber wenn ich sie rausnehme gehts auch nicht besser.

[veNom]

Versuchs mal so...

Code: Alles auswählen

#fusszeile {
      position: absolute;
      bottom: 0;
      width: 1000px;
      height:90px;
      padding: 0px;
      text-align:center;
      }

[murgel]

Guten Morgen,
vielen Dank schon mal für den Tipp veNom. Aber leider geht es so gar nicht.Wahrscheinlich ist das mit dem absolut nicht so gut, denn wenn der Text länger ist, sieht das ganze so aus: Kann mir bitte jemand noch einen tipp geben?

[Ingo]

Hi.
Und wenn du nun noch im #content die height-Angabe (derzeit 370px) wegläßt? Dann könnte sollte es doch
eigentlich klappen. Zumindes wenn die Seite grundsätzlich lang genug ist (ich denke da an den IE6, der
min-height nicht versteht - meine ich).

Gruß, Ingo

[murgel]

Hallo Ingo,
ne das klappt leider nicht. Gibt es noch einen anderen Tipp?

[derFred]

Ich behaupte mal, es muss heissen:

Code: Alles auswählen

bottom: 0px;

[Ingo]

Hm, seltsam.
Das Problem scheint aber (online) behoben, die height-Angabe ist entfernt, der Footer sitzt, wie
er soll. - Hast du vllt. beim Probieren vergessen, zwischendurch den Browser-Cache zu leeren/F5?

Gruß, Ingo

PS: Zu der 'bottom'-Lösung (wie veNom): ich denke, das sollte auch gehen, aber: das übergeordnete
Element (#wrapper) muss dazu position:relative sein (jedenfalls nicht static), damit es als Bezug für
absolut positionierte Divs dienen kann. Und: in diesem Fall dürfte die margin-Angabe der #fusszeile
nichts bewirken, man muss also dann innerhalb des #wrapper z.B. mit padding-bottom Platz für die
#fusszeile freihalten - meine ich

[murgel]

Oje, ich es geht einfach nicht. Ich hab den Cache noch mal gelöscht, aber sowohl im firefox als auch im ie 7 zeigt er mir folgendes Bild:

Hilfe das kann doch nicht sein, oder?? Ich hab auch den Tipp von "derfred" versucht, aber auch das führt zu keinem Ergebnis. Habt ihr noch eine Idee?
http://www.formathochzwei.de/htm/apparta.htm
Das wäre echt toll.
Herzlichen Gruß Bea

[Ingo]

N'Abend, Bea.

Ich bin's nochmal; ich vermute, dass du inzwischen eine ganze Reihe von Versuchen gemacht hast,
der Code ändert sich quasi stündlich, das CSS sieht inzwischen etwas unkonventionell aus.

Ich habe eben eine Kopie deiner Seite gemacht und im style.css 3 Stellen auskommentiert, siehe
die /* == hier == */-Marken. Der Einfachheit halber hänge ich einfach die gesamte Kopie als zip an,
damit ich mich nicht auf Code beziehe, der inzwischen wieder Schnee von letzter Stunde ist.

Auf meinen Browsern (IE6, FF, OP, 1024x768) sieht es eigentlich normal aus: die #fusszeile schließt
die Seite ab, langer Text verschiebt die #fusszeile nach unten, kein Abstand der #fusszeile zum
unteren client-Rand mehr (wozu waren eigentlich die padding-bottom:30px in der #fusszeile?).

Wenn du magst, sieh dir das Ergebnis an und melde zurück, was noch nicht so sitzt wie's soll. -

Bin gespannt - Gruß, Ingo

[Scooby]

Sieht irgendwie so aus, als ob die Fusszeile "im" Content wär.
Ich meine so:
div-content
div-fusszeile
div-fusszeile/ende
div-content/ende

Aber bin mir jetzt auch nicht so sicher, hab schon einiges getrunken

[murgel]

Hallo,
vielen Dank für Eure Mühe. Nun kann ich das Problem zumindest weiter eingrenzen.Vielen Dank Ingo!
Bei der Auflösung 1024x768 sitzt alles korrekt, aber bei einer höheren Auflösung z.B. 1280x1024, rutscht die Fusszeile leider nicht mehr an den unteren Bildschirmrand, sondern sitzt in der Luft ( wie im hochgeladenen Foto gezeigt). Nun hab ich das css von dir Ingo hochgeladen und nichts mehr verändert (ausser das ich den Kommentar "Ende container" in "Ende wrapper" verändert habe), damit deutlich wird, das die Fusszeile im wrapper sitzt. Hallo Scooby.
Gibt es dazu vielleicht noch einen Tipp?
Ich ändere jetzt erst mal nichts mehr, damit ich nicht noch mehr Verwirrung stifte
Herzlichen Gruß

[Ingo]

Hi.
Ich denke, ich habe eine Lösung gefunden (alistapart, besonders expample 2); folgende Änderungen:

Code: Alles auswählen

CSS:

  html, body { height: 100.1%; padding:0px; margin:0px; }
  #wrapper   { min-height:100%; position:relative; }
  #content   { padding-bottom:90px; }
  #fusszeile { position:absolute; bottom:0px; }


Diese Dinge bitte soweit nötig hinzufügen bzw. entkommentieren bzw. ändern, siehe auch den Anhang.

html, body 100% (oder mehr um Scrollbalken zu erzwingen) sorgt dafür, dass der body bis an den
unteren Viewport-Rand reicht. position:absolute erzwingt eine vom Rest des Layouts unabhängige
Position, hier am unteren Rand; Bezug hierfür soll der #wrapper sein, deswegen erhält er position:
relative. Mit padding-bottom reserviert man sich im #content Platz für die #fusszeile, hält also
Abstand zwischen Inhalt und #fusszeile. - Bin gespannt

Gruß, Ingo

[murgel]

jipieh juhu
Ingo, das ist super. Es geht (glaube ich) Sieht zumindestens so aus. Ich kann es noch gar nicht fassen. Toll.
Ich danke dir ganz doll für Deine Hilfe.
Herzlichst Bea