Footer Stick ... ich kriegs einfach nicht hin

[Mandos]

Liebe PSD-Tutorial CSS-versierte Forenmitglieder,

Ich schraube an meiner ersten datenbankgestützten HP rum und verzweifle schier an dem Footerstick. Irgendwie will der Inhalt nicht das div über dem Footer vernünftig "ausdehnen". Der Footer "klebt" schon am Seitenende, aber der Content will sich einfach nicht einfügen.

Ich bin für jede Anregung dankbar, denn ich seh's einfach nicht.

Meine HP ist unter Willkommen bei Clemens Richardson aka 'Mandos' (www.crichardson.de) zu finden.

Liebe Grüsse,

Clemens
aka mandos

 

[sokie]

AW: Footer Stick ... ich kriegs einfach nicht hin

nach den gesetzten selektoren sieht es aus, als hättest du Dich an Ryan Faits Sticky Footer orientiert
das ist sein CSS snippet

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

aus deiner CSS:

#wrapper {
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    border: thin solid #093D86;
    background-color: #010409;
    background-image: url(../images/bluechrome.jpg);
    padding-right: 25px;
    padding-left: 25px;
    margin-top: 5px;
    background-repeat: no-repeat;
    min-height: 100%;
    height: 100%;
    margin-bottom: -6em;
}

.push {
    clear: both;
    float: none;
}

#footer {
    background-color: #000000;
    width: 990px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
    height: 6em;
    margin-top: -6em;
    clear: both;
}

merkst du selbst,oder ?

hier stimmt ganz wesentlich was nicht:

da läuft der Inhalt über die Box.
wrapper hat eine feste height - kann nicht funktionieren, wenn die Inhalte flexibel sein müssen.du setzt im wrapper erst min-height, dann überschreibst du das mit height:100%.
lösung:alles an height aus dem wrapper css rausschmeissen - eine mindesthöhe bekommt der bereich schon durch die box #rechts.
oder den kleinen hack wie im css von Fait imt height: auto !important.

css und html etwas aufräumen,da sieht ja so kaum jemand durch in der css so sachen wie margins (top, right bottom left) aufeinander folgend und nicht über die Regel verteilt etc, dann sieht man die Fehler schneller.

 

[Mandos]

AW: Footer Stick ... ich kriegs einfach nicht hin

Hi Sokie,

Ich danke Dir, dass Du Dir die Zeit genommen hast, Dir meine Site intensiv anzugucken. Ich werd mich gleich mal ransetzen und die heights aus dem #wrapper rausnehmen. War mir nicht bewusst, dass height:100%; das min-height:100% dann wieder überschreiben würde, auch wenns logisch ist. Aber irgendwann wird man "betriebsblind".

Das html hat Dreamweavers Quellenformatierung verschuldet und mein CSS mag ich gern hierarchisch aufgebaut, Klassen von ids "sauber" getrennt und dann der(meiner) Struktur folgend. Ich sehe aber ein, dass das wahrscheinlich nicht konventionell ist und werde es beim nächsten Template beachten.

Ich melde mich nochmal obs geklappt hat!

Erstmal danke,

Liebe Grüsse,
Clemens

 

[Mandos]

AW: Footer Stick ... ich kriegs einfach nicht hin

Hey also jetzt klappts!

Nochmal vielen Dank für Deine Zeit und Mühen! Ich hab jetzt auch den Quellcode ein wenig umgestellt und das CSS hat sich iwie von selbst neu sortiert, nach der letzten Quellenformatierung unter Dreamweaver

Liebe Grüsse,

Clemens