✔ Footer will kein Footer sein

T

thigle

Mitglied
Hallo.

Werde noch wahn-sinnig von diesem Gefrikel, Nachdem ich das Stylesheet für höhere Auflösungen bearbeitet habe (%-Angabe an gewissen Stellen statt px), bleibt mir der Footer beim 'einklappen' ( siehe auf Seite das [x] ) nicht mehr ganz unten und ist somit kein 'Footer' mehr. Hier das CSS-File und hier die Seite, speziell hier. Was kann man da machen? Verzweifelt,

MV
 
Moin,

@Jan: Das [x] findet sich in diesem DIV:

HTML: 
<div id="hide"><a href="javascript:Effect.Combo('up', {duration: 0.3});" title="hide-view">[x]</a></div>
[x].jpg

... und dient zum Aus- und Einblenden des nachfolgenden DIVs #up, mit den drei enthaltenden Boxen "Kategorien", "Archiv" u. "Blogroll".

Scrollt man die Seite im Vollbildmodus / maximierten Fenster zum Seitenende herunter, und klickt auf das [x], um das Element auszublenden, ergibt sich anschließend bei mir (Monitorauflösung = 1280*1024px) im FF-Browser mit seinen aktivierten Symbolleisten (Navigation, Lesezeichen, usw.) der grün markierte Abstand zum unteren Fensterrand:

footer.jpg

... dessen Ursache eindeutig auf die height:400px-Regel für das dazwischen befindliche DIV #box zurückzuführen ist.

Deaktiviere ich die Ansicht der o.g. Symbolleisten, vergrößert sich auch dieser Abstand entsprechend. Gleiches gilt, wenn für #box die Höhenangabe verringert, oder stattdessen height:auto festgelegt wird.

Somit ist das Verhalten des Footers nur logisch, denn durch das Ausblenden des DIVs #up mittels "display:block vs. display:none" besitzt es keinen Platzhalter im Dokumentfluß, womit alle nachfolgenden Seitenbereiche / Inhalte entsprechend nach oben rücken.

Falls dir hier ein "Sticky Footer" vorschwebt, der sich bei geringem Seiteninhalt am unteren Fensterrand befindet, und vom zunehmenden Inhaltsumfang nach unten geschoben wird, hilft dir hier bei der Umsetzung mein Webmaster FAQ-Artikel CSS Wie lässt sich der Footer am unteren Fensterrand ausrichten? weiter.

mfg Maik
 
Grüss Euch,

genau, tut mir leid für meine evtl. halbgaren Angaben, aber gestern war ich nur noch frustriert und ausgepowert was dieses Blog betrifft. Ein Problem nach dem anderen tut sich auf. Ich werde heute Vormittag das Tutorial durchgehen und mich dann wieder melden.

LG
M.
 
So, ich habe mich an Lösung 1&2 versucht, leider ohne Resultat.

Im Stylesheet habe ich den #wrapper hinzugefügt -

Code: 
#wrapper {
                    position:relative;
                    min-height:100%;
                    height:auto !important;
                    height:100%;
                    margin:0 auto -80px;
}


'Der Footer sieht jetzt so aus -

Code: 
#footer  {
        clear:both;
        position:relative;
        padding:20px;
        margin:-80px 0 auto;
        text-align:center;
        background:black;
	}


<div id="wrapper"> kommt natürlich gleich nach dem <body> und wird vor </body> auch wieder geschlossen. Was hab' ich falsch gemacht bzw. was ist zu tun?

LG,
Mart
 
Bei den ersten beiden Methoden wird im HTML-Code der Footer im Anschluß von #wrapper genannt, und nicht innerhalb von ihm an dessen Ende.

Schau dir hierzu nochmal den Quellcode dieser Beispiele an:
HTML: 
<body>
     <div id="wrapper">
           <div id="header">
                ...
           </div>
           <div id="middle" class="clearfix">
                ...
           </div>
     </div>
     <div id="footer">
           ...
     </div>
</body>


mfg Maik
 
Himmel, stimmt!
Ich kann es kaum glauben, aber es funktioniert, ganz herzlichen Dank für Deine Hilfe! Nur noch eine kleine Frage - der Scrollbalken erscheint auch bei Vollbild - ein kleiner Nebeneffekt des Ganzen?

LG
Mart
 
Der kleine Nebeneffekt ergibt sich, weil du den beiden ersten Techniken entsprechend für #wrapper keinen unteren negativen Außenabstand (Methode 1), oder für #footer keinen negativen oberen Außenabstand (Methode 2) deklariert hast, um #footer über das untere Ende von #wrapper zu schieben, der die Browserfensterhöhe zu 100% ausfüllt, und im Anschluß erst der Footer folgt.

Dafür müsstest du dem Footer eine fixe Höhe zuweisen, die dann in einen der beiden möglichen Außenabstände einfließt.

mfg Maik
 
Ich glaube, ich verstehe Maik. In diesem Zusammenhang ergibt sich jedoch gerade ein gravierenderes Problem als der Scrollbalken. Und zwar unter Opera (10.50b). Hier verschiebt sich die 'Search-Box' im Footer auf der Startseite nach links. Das jedoch nur, wenn ich

Code: 
margin:-80px

nach Methode 1 oder 2 anwende. Entferne ich -80px, dann scheint alles in Ordnung. 'Scheint', denn dann ist der Abstand der 'box' zum 'footer' nicht mehr 400px, sondern grösser (im Chrome z.b., bei Opera nicht) - das sieht nicht mehr besonders gut aus. Dieses 'Ansprechen' auf -80px vs. "keine -80px" tritt wiederum nur auf, wenn ich im CSS das hier -

Code: 
*
{
        padding:0 auto;
        margin:0 auto;
	}

anwende (war auch schon im ursrpünglichen Template so enthalten). Ohne diesen Code habe ich dann zwar keine Darstellungsunterschiede zwischen Chrome & Opera mehr, auch nicht die verschobene 'Suche', jedoch wirkt das Erscheinungsbild dann nicht mehr so schön 'gestaucht. .


Kann man da noch was 'regeln'? Sorry für das 'Wischiwaschi' von mir, ich kanns auch nicht besser erklären....

LG
Mart
 
In deinem CSS fehlt für #box ein entsprechender Innenabstand nach unten.

Zitat aus meinem "Webmaster FAQ"-Artikel:
Maik hat gesagt.:
Bei allen drei vorgestellten Varianten ist darauf zu achten, für den mittleren DIV-Block #middle einen unteren Innenabstand festzulegen, der sich mindestens mit der Höhe des Footers deckt, damit sein Inhalt nicht unter bzw. hinter dem Footer verschwindet.
Zum Vergrößern anklicken....

Wenn du im Opera mal genau hinschaust, tritt genau dieses Problem auf, dass der Inhalt sich unter den Footer schieben lässt, und in diesem Moment das Formular nach links verschoben wird.

Wenn ich diese Regel für #box angebe, geschieht dies alles nicht mehr:
CSS: 
#box { padding-bottom:140px; }

Getestet hab ich es im Opera 10.10 unter WinXP.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück