Footer und das andocken...

[emptynick]

...mal wieder...Tschuldigung

Hallo,

ich habe leider ein Problem mit dem Layout der Seite eines Freundes.
http://www.it-highschool.de/daniel/index.html
Darum geht es.
Also, da ich leider nicht so die Ahnung von CSS habe, suche ich nun Hilfe, bei dem Footer.
Er wird zwar unten angezeigt, aber sobald sich der Content erweitert, bleibt der Footer genau da stehen und "überblendet" den Content.

Ich habe schon viel hier im Forum rumgeguckt, aber leider nciht das richtige gefunden.
Vielleicht brauche ich auch einfach nur einen Denkanstoß.

CSS Datei befindet sich hier:
http://www.it-highschool.de/daniel/styles.css
Betreffender Div-Container ist #footer.

Kann mir da jemand helfen?

Vielen Dank im Vorraus!

emptynick

 

[Maik]

Hi,

die Ursache liegt ganz einfach in den absoluten Positionsangaben aller Seitenbereiche, wodurch sie aus dem normalen Textfluss genommen werden, und sich das Layout in der Vertikalen nun nicht mehr dynamisch verhält.

Als Alternative zu diesem unpraktikablen Konzept, empfehle ich dir mein CSS-Tutorial CSS-Layout mit 100%-Höhe, das im Anhang drei Varianten mit einem Footer bereithält, der zunächst am unteren Elementrand positioniert ist, und bei zunehmenden Inhalt nach unten verschoben wird.

mfg Maik

 

[emptynick]

Hi,

danke, aber das Verändern der Position bringt leider nur das zersprengen.
Wie gesagt, ich bin nicht der größte Profi, was würdest du denn direkt ändern?

LG

Edit: Deinen zweiten Post hab ich grade erst gesehen, ich werd mir das nochmal durchlesen!

 

[Maik]

Abgesehen vom Footer, alle übrigen absoluten Positionierungen vollständig auflösen, denn die sind die Wurzeln des Übels

mfg Maik

 

[Maik]

Interessanterweise kann ich den Footer in der Seite überhaupt nicht entdecken, obwohl ich jetzt den vollständigen Text aus der Seite entfernt, und "footer" in den Footer reingeschrieben habe. :suspekt:

Erst wenn ich diese CSS-Regeln auf die Seite anwende, kommt er zum Vorschein:

html,body {
height:100%;
}

.main{
        position:relative;
        width:1000px;
        min-height:100%;
        height:auto !important;
        height:100%;
}

Na, eine bessere Überleitung zu meinem Tutorial kann es da ja nicht geben, denn genau das sind die relevanten Rezeptzutaten

mfg Maik

 

[emptynick]

Also ich kann ihn momentan sehen, da ich am rumbasteln bin.
Also den Footer krieg ich ja jetzt schon in etwa da hin, wo er hin soll.
Nur jetzt liegt der Footer ganz unten, und schneidet den Text im Content einfach am unterem Ende ab.
Liegt wohl wieder an der Position
Ausserdem liegt der Footer zu weit links...

Edit: Dass der Footer zu weit links lag, lag an der Grafik, Cache leeren und aktualisieren

 

[Maik]

Also ich kann ihn momentan sehen, da ich am rumbasteln bin.

Aber auch nur, weil du meine CSS-Regeln übernommen hast

Meines Erachtens sitzt der Footer in der Horizontalen an seinem richtigen Platz, nur stimmt da scheinbar mit den Grafiken selber etwas nicht, dass sie nicht in einer Flucht zueinander stehen.

mfg Maik

 

[kuddeldaddeldu]

Hör auf den Maik.

Ein absolut positionierter Flickenteppich ist völlig ungeeignet, um sich einer variablen Contentlänge anzupassen.
So schlimm sind gefloatete Divs nicht. Nur Mut!

LG

 

[Maik]

Ach ist das herrlich, sich hier mal zurückzulehnen, und den Leuten live bei der Nachtarbeit zuzuschauen

Mit position:fixed anstelle von position:absolute wirst du ebenso keinen Erfolg erzielen, und die neu hinzugefügte clearfix-Klasse ergibt nur einen Sinn, wenn du im DIV #wrapper (ehemals .main) eine Floatumgebung einrichtest.

Will hier sonst noch jemand einen Kaffee?

mfg Maik

 

[kuddeldaddeldu]

Du solltest dem Content-Div noch ein overflow:auto verpassen.

LG