Schönen guten Tag,
ich arbeite grade am Design zu meiner Seite und ich habe folgendes Problem: Ich habe auf der Seite einen Header, ein Navi, einen Main-Bereich sowie einen Footer. Das ganze sieht aus wie auf dem Bild:
[Blockierte Grafik: http://img370.imageshack.us/img370/5748/designlp7.th.gif]
Header, Navi und Main sind per CSS mit position: absolute an der richtigen Position.
Probleme bereitet mir der Footer. Wenn der Main kleiner ist als die ganze Seite, soll der Footer am Ende der Seite stehen (ganz unten), wenn der Main aber größer als die ganze Seite ist, soll der Footer darunter sein, also erst beim Scrollen sichtbar sein. Mit anderen Worten: Der Footer befindet sich unterhalb vom Main, aber mindestens am untersten Rand.
Ich hoffe, ich konnte mich verständlich machen und hoffe, dass mir jemand bei dem Problem helfen kann.
Danke, pHoeniX
Fußzeile am Ende der Seite, aber unterhalb vom Content
-
[Gast]pHoeniX -
26. August 2008 um 08:17
-
-
Tja, was soll ich sagen. Position absolut ist in der Regel etwas schwierig in der Beherrschung und somit völlig anfängerungeeignet.
Probier es doch mal mit dem Aufbau von selfhtml.
-
-
Perfekt, danke dir.
Das beschreibt das Problem _exakt_ so, wie ich es habe.
Die Seite ist generell genial, deine? -
Wenn du mich meinst und den Link: Ja, das ist meine Seite.
Danke für die Blumen!
Aber irgendwie habt ihr hier alle euren Anteil an dieser Seite. Ich war nämlich irgendwann zu faul, hier im Forum immer alles wiederholt zu erklären. So reicht es, wenn ich es einmal mache und jetzt nur noch einen Link zu setzen brauche
-
Schade, aber leider klappt es nicht
Der Footer ist zwar ganz unten, aber nicht am Ende der Seite, wenn der Content zu groß wird. Ich vermute stark, dass es daran liegt, dass ich Navi und Main mit position: absolute setze. Mit realtive hab ichs auch probiert, aber ich kriegs nicht so hin, wies soll.
Ich hab mal ein rar hochgeladen und hoffe, dass jemand den Fehler findet:
footer-problem.rarVielen Dank im Voraus!
-
Dann probier es noch einmal mit dem Beispiel von selfhtml. Dort wird gänzlich auf "position" verzichtet.
-
Da ist aber die Fußzeile nicht am unteren Bildschirmrand, wenn der Main-Bereich kleiner ist, als der Bildschirm hoch.
-
Sorry, aber ich hatte Dein Eingangspost zuerst anders gelesen.
-
Das klappt schon, wenn man es richtig macht:
Innerhalb des #content musst du auf absolute Positionierungen verzichten, da sich sonst die Footer-Position darauf beziehen kann. Der Footer steht dann nicht mehr da, wo er hin soll.
Außer meinem Gerippe benötigst du ohnehin keine Positionierungen, weil man das viel besser mit float und margin machen kann.
Ändere mal das in der CSS, dann sollte es klappen, ggf. noch einige Werte anpassen:
Code
Alles anzeigen#header { width: 560px; margin: 0 auto; } #navi { float: left; margin-left: 50px; display: inline; width: 200px; font-weight: bold; } #main { margin-left: 200px; }
nach dem Schließen von #main gib noch das ein, weil die #navi gefloatet wurde:Code<div style="clear: both;"></div>
zu deinen farbigen Grafiken (grün, blau):
Wenn das so bleiben soll, und diese später nicht durch "richtige" Bilder ersetzt werden, dann wäre es besser, wenn du den entsprechenden Elementen einen Höhen- und Breitenwert zuweist und sie dann noch mit einer grünen oder blauen background-color versiehst.
Lies dir auch mal das zur absoluten Positionierung durch, damit es dem besseren Verständnis dient:
http://www.ohne-css.gehts-gar.net/0045.php
http://www.ohne-css.gehts-gar.net/0046.php -
Danke dir abermals für deine Hilfe, jetzt läufzt alles so wies soll (gut, hab IE6 noch nicht getestet, aber da mach ich mir keine Sorgen).
Zu den Bildern: Die werden natürlich ersetzt durch richtige Bilder, aber da im Header die URL steht, wollte ich nicht den echten nehmen, weil die Seite noch eine Weile braucht, bis sie ins Netz kann. Das mittlere ist dabei völlig zufällig und ich füg die Größenangaben dann per PHP ein. -
*altes-Thema-ausgrab*
Hi zusammen,
eigentlich funktioniert jetzt alles, aber...
Wenn jetzt der Main-Container zu breit wird, dann wird er automatisch unter dem Navi positioniert, was natürlich unschön ist, da in einem solchen Fall ein horizontaler Scrollbalken besser wäre (wie gesagt, Main besteht nur aus einem Bild, also ist Scrollen besser).Ich hoffe, ihr könnt mir helfen, habs mit float: right für den Main versucht, aber dann ist der ja nicht mehr direkt rechts vom Navi.
-
Problem hat sich grade von selber gelöst, hab gesehen, dass im CSS noch ne veraltete Zeile Code drinstand.