Footer will kein Footer sein @ tutorials.de: Tutorials, Forum & Hilfe

thigle · 12.02.10 16:33

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

**Jan-Frederik Stieler** · 12.02.10 21:50

Hi,
sorry aber entweder ich bin blind oder es gibt kein X welches der Footer sein soll?

Gruß

Maik · 13.02.10 02:42

Moin,

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

HTML-Code:

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

... 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:

... 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

thigle · 13.02.10 10:21

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.

thigle · 13.02.10 11:45

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

Maik · 13.02.10 11:50

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-Code:

<body>
     <div id="wrapper">
           <div id="header">
                ...
           </div>
           <div id="middle" class="clearfix">
                ...
           </div>
     </div>
     <div id="footer">
           ...
     </div>
</body>

mfg Maik

thigle · 13.02.10 12:21

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

Maik · 13.02.10 13:21

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

thigle · 13.02.10 14:02

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 :

1	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

Maik · 13.02.10 14:24

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

Zitat aus meinem "Webmaster FAQ"-Artikel:

Zitat von Maik

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.

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:

Code css:

1	#box { padding-bottom:140px; }

Getestet hab ich es im Opera 10.10 unter WinXP.

mfg Maik

thigle · 13.02.10 16:45

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

Code :

1	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 · 13.02.10 17:15

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 · 13.02.10 18:35

*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 · 13.02.10 18:45

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:

Footer will kein Footer sein-firebug.jpg

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 · 13.02.10 19:26

Zitat von thigle

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

footer soll durchgehend sein?

CSS Probleme mit Footer - kein korrekter Abschluss

Footer soll immer unter main sein

"Framedesign" mit CSS: Header und Footer sollen sticky sein

Footer mit CSS

Stichworte

E-Mail:

Abonnieren Abbestellen