✔ Footer will kein Footer sein

[thigle]

Nochmal der Link zum Stylesheet. Die Angabe in der 'box' zeigt in Opera leider keinerlei Wirkung. Nur, wenn ich an

margin:-80px

im 'footer' rumschraube, tut sich was. Ändere ich -80 auf z.b. -10, ist alles in Butter. Dann jedoch wird in Chrome & Firefox der Abstand zwischen Text & 'footer' zu gross, sieht also auch nicht gut aus, Irgenwo ist da noch der hund drinn, hab bitte Geduld mit mir

Was mir noch aufgefallen ist - ich muss Lösung 2 anwenden, denn setze ich gemäß Lösung 1 'margin-80px' in den 'wrapper', schiebt es mir das Menü (Home, Links, Media usw.) zu weit nach oben.

LG
Mart

 

[Maik]

Ich seh die Ursache für das Footer-Problem ganz woanders liegen.

Mein Vorschlag hat nämlich vorhin im Opera die gewünschte Wirkung gezeigt, denn da besaß #box noch die ehemals feste Höhenangabe, die du zwischenzeitlich entfernt hast.

Und nun richte doch mal spaßeshalber für #box eine Hintergrundfarbe (z.B. #eee) ein, und schau, bis wohin sich diese in den standardkonformen Browsern erstreckt.

Ich höre dann wieder von dir

mfg Maik

 

[thigle]

*g* Gut, da bin ich wieder. Grün ist der 'wrapper', gelb die 'box', blau der 'content'. So wie das Stylesheet jetzt aussieht, funktioniert die Sache mit dem 'footer' vorzüglich. Aber - ich musste mit dem Wert '-80px' im 'wrapper' auf 0px runterfahren, ansonsten hätte es mir das Menü viel zu weit nach oben verschoben, direkt neben dem Bild. Scheinbar funktioniert die Sache mit dem 'footer' auch bei 0px-Angabe im 'wrapper' - kann dabei was schief laufen? Firefox, Opera, Chrome & MIE scheinen damit kein Problem zu haben. Aber .... wenn man jetzt die Seite mit Opera und Firefox / Chrome vergleicht, fällt da ein unschöner Effekt auf. Der 'content' ist nämlich nicht wie bei Opera die 'box' fast ausfüllend, sondern viel zu 'weit oben', meine damit, der Abstand zwischen dem Textende und dem 'footer' ist in den anderen Browsern viel zu gross. Wie kann ich es regeln. dass es so aussieht, wie auf meiner Testseite ?

Edit: Und da fällt mir auf, dass 'padding-bottom:140px' für den aktuellen Firefox etwas zu gross geraten ist.. Das hat zur Folge, dass der 'Suche-Button' etwas 'flippt', wenn man ein/ausklappt. Himmel, was hab' ich da nur für ein 'Theme' erwischt.....

LG
Mart

 

[Maik]

Dass das mit der gelben Hintergrundfarbe funktioniert, liegt doch nur an deiner wieder hinzugefügten height:400px-Deklaration für #box

Hier darfst du das Resultat ohne absolute Höhenangabe betrachten:



Da du somit nicht gemerkt hast, worauf ich eigentlich hinaus will, stups' ich dich halt direkt auf einen weiteren meiner "Webmaster FAQ"-Artikel

• CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Wenn du dieses Problem auf die vorgestellte Weise aus der Welt räumst, löst sich das Footer-Problem in Luft auf, und der padding-bottom-Wert dürfte browserübergreifend einen Tick geringer und gleichmäßiger ausfallen.

mfg Maik

 

[Maik]

ich musste mit dem Wert '-80px' im 'wrapper' auf 0px runterfahren, ansonsten hätte es mir das Menü viel zu weit nach oben verschoben, direkt neben dem Bild.

Wenn es mit dem negativen margin-Wert für #wrapper Probleme gibt, hast du immer noch zwei technische Varianten zur Auswahl, die sich nicht negativ auf die Position des oberen Menüs auswirken.

Ansonsten mußt du halt mit dem kleinen Nebeneffekt von heute Mittag leben, dass bei geringem Seiteninhalt der Footer nicht am unteren Fensterrand sitzt, und die Browser ihren vertikalen Scrollbalken zur Verfügung stellen, damit er sich ins rechte Bild rücken lässt ;-)

mfg Maik

 

[thigle]

Danke, danke, jetzt passt sich die 'box' an! Nun keine Probleme mit -80px Angabe (Menü bleibt an seinem Platz) und 'padding-bottom' wird scheinbar auch nicht mehr benötigt. Aber (hoffentlich nerv' ich dich nicht zuuu sehr), das 'Textende' ist in Chrome & Firefox immer noch zu weit vom 'footer' entfernt - das war vor den getätigten Änderungen noch nicht der Fall und es sah aus wie auf meiner Testseite. Was muss ich da noch im Stylesheet ändern? Das sieht in Gegensatz zur Testseite etwas zu gestaucht und nach Platzverschwendung aus.

Falls Du die Änderungen auf der normalen Seite (Square7) noch nicht gesehen hast, öfter mal F5 klicken, Cache leeren, denn das Caching-Plugin für Wordpress arbeitet recht effektiv.

LG
Mart

 

[Maik]

Es ist aber nicht damit getan, die einzelnen Regelmengen der Klasse .clearfix im Stylesheet aufzunehmen, ohne sie im HTML-Code in dem DIV-Block #box aufzurufen, der die beiden floatenden Blöcke #last und #content umschliesst :suspekt:



Der gelbe Hintergrund von #box sollte sich hier doch eigentlich genauso bis zum Footer erstrecken, wie der blaue seines Kindelements #content.

mfg Maik

 

[thigle]

Maik, das ist schon erledigt, Du hast wohl aufgrund des 'Cachings' noch ne alte Version der Seite vor Augen. Ich deaktiviere mal das Caching-Verhalten des Blog für ne gewisse Zeit. Bitte mehrmals F5 und evtl. Cache des Browsers leeren.

LG
Mart

 

[Maik]

Bitte evtl. Cache des Browsers leeren.

Davon darfst du ausgehen, dass ich dies vorher gemacht habe, wo mir doch bekannt ist, dass du relativ zeitgleich im Hintergrund am Werkeln bist.

Nur sonderbar, dass ich auch in den Browsern meiner virtuellen PCs dieselbe Version zu Gesicht bekommen habe, obwohl deren Caches "jungfräulich" waren, was deinen URL angeht.

Dass sich der Footer beim Ausblenden von #up vom Inhalt weiter entfernt, als zuvor, liegt schlichtweg an deiner falschen margin-Deklaration für selbigen, die du offensichtlich, der von dir zunächst gewählten Methode entsprechend, dem DIV #wrapper entzogen und ihm übergeben hast.

Du darfst auch ruhig mal zwischendurch zur Gegenkontrolle deine Arbeitsschritte mit meinen funktionstüchtigen Quellcodes vergleichen.

• Wie lässt sich der Footer am unteren Fensterrand ausrichten?

mfg Maik

 

[thigle]

Nur sonderbar, dass ich auch in den Browsern meiner virtuellen PCs dieselbe Version zu Gesicht bekommen habe, obwohl deren Caches "jungfräulich" waren, was deinen URL angeht.

Das liegt am 'W3 Total Cache' Plugin für Wordpress. Die gecachten und gzip-komprimierten Files liegen für gewisse Zeit am Server oder so ähnlich, ist etwas kompliziert (für mich), dieses Verfahren, aber notwendig, da 3 JS-Frameworks mitgeladen werden (das wird im nächsten Schritt dann mal geändert) und sich das negativ auf die Ladezeit auswirkt. Der schwachbrünstige Anbieter tut hier sein übriges. Jedenfalls umschliesst die 'box' den 'content' vollständig. Habe den Cache im WP-Admin gelöscht (funktioniert nicht immer zuverlässig) und das Plugin deaktiviert, evtl. siehst du ja jetzt die aktuelle Seite.

Dass sich der Footer beim Ausblenden von #up vom Inhalt weiter entfernt, als zuvor, liegt schlichtweg an deiner falschen margin-Deklaration für selbigen, die du offensichtlich, der von dir zunächst gewählten Methode entsprechend, dem DIV #wrapper entzogen und ihm übergeben hast.

Im 'footer' habe ich, so wie in Deinem Beispiel, ' margin:-80px 0 auto;' angegeben, ganz wie bei 'Methode 2'. Und nein, es geht nicht darum, dass sich der Inhalt vom Footer 'beim Ausblenden' weiter entfernt, sondern dass der Inhalt auch im 'ausgeklappten' Zustand zu weit vom Footer entfernt ist. Der Abstand zwischen box/content & Footer ist einfach zu gross. Nicht in Opera, aber in Chrome & Firefox. Das war vorher nicht der Fall, da sah es aus wie auf der angegebenen Testseite.

LG & Danke für Deine Ausdauer mit mir,
M.