✔ Hilfe, mein Footer spielt verrückt :)

F

FreeWeb

Grünschnabel
Hallo,

dies ist mein erster Beitrag hier und ich hoffe hier sind ein paar hilfsbereite CSS'ler die mir bei meinem Problem helfen können :) Ich habe folgendes CSS:

Code: 
html {
	height: 100%;
}

body {
	overflow-x: hidden;
	background-color: #ffffff;
	height: 100%;
}

#backgroundposition01 {
 	min-height: 100%;
}

#backgroundposition02 {
 	position: relative;
	left: 50%;
 	width: 2600px;
 	margin-left: -1300px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#footerposition01 {

}

und in meinem Body habe ich folgendes:

Code: 
 <DIV ID="backgroundposition01">
 <DIV ID="backgroundposition02">

<!-- hier ist mein Website inhalt drinne -->

 </DIV>
 </DIV>

 <DIV ID="footerposition01">

<!-- hier ist mein Footer drinne -->

 </DIV>

Jetzt kommen wir zu meinem Problem :) Ich möchte gerne das der Footer immer ganz unten ist auch wenn der inhalt meiner seite nicht bis nach ganz unten reicht. Das funktioniert auch, allerdings kann man auch wenn der Webseiteninhalt nicht bis nach ganz unten hin reicht scrollen, also die Scrollleiste wird eingeblendet. Ich vermute das man genau die höhe des Footers scrollen kann, und der Footer ist 120 Pixel hoch. Ich möchte natürlich das die Scrolleiste verschwindet wenn der Webseiteninhalt nicht bis nach ganz unten geht so wie es eigentlich auch sein sollte und der Footer ganz unten ist :) Ich hoffe Ihr versteht was ich meine :)

Wenn der Webseiteninhalt größer ist als die Browserhöhe möchte ich natürlich gerne das der Scrollbalken erscheint :)

Ich wäre euch wirklich sehr dankbar wenn Ihr mir helfen könntet Ich habe auch schon den ganzen tag nach einer lösung bei Google geschaut aber weiter als das hier bin ich nicht gekommen und ich habe auch keine Lösung gefunden die Funktioniert.

Vielen Dank für eure Mühe
 
Zuletzt bearbeitet:
Hi,

da hat wohl jemand nicht zuvor einen Blick in meinen Sticky-Thread geworfen:
Maik hat gesagt.:
da im abgelaufenen Jahr '09 in mehr oder weniger regelmäßigen Abständen (aktuell erst vor wenigen Tagen wieder) Anfragen zum Thema "Sticky Footer"* im CSS-Forum aufgetaucht sind, hab' ich mich mal den vergangenen Abend mit drei technischen Lösungsansätzen näher beschäftigt, denen ich im Webmaster FAQ-Bereich einen Beitrag gegönnt habe, um zukünftig auf ihn verweisen zu können :)

* Footer haftet bei geringem Seiteninhalt am unteren Rand des Browserfensters, und rückt bei zunehmenden Inhaltsumfang nach unten.


  1. Wie lässt sich der Footer am unteren Fensterrand ausrichten? - Neu -
Zum Vergrößern anklicken....

Die ersten beiden vorgestellten Methoden helfen dir hier weiter, das Problem mit dem Scrollbalken aus der Welt zu räumen, und den Footer bei geringem Seiteninhalt in den Anzeigebereich des Browserfensters zu rücken, denn derzeit erscheint er unterhalb des DIV-Blocks #backgroundposition01, der das Fenster in der Senkrechten vollständig ausfüllt.

mfg Maik
 
Hallo,

doch deinen beitrag habe ich auch schon beim Googlen gefunden. Allerdings habe ich es nicht geschaft es ans laufen zu bekommen weil es das reinste durcheinander ist, und auch für einen anfänger schwer zu verstehen ist. Ich habe heute bestimmt 2 Stunden an deiner methode gessesen und es hat nicht funktioniert :)

Was für ein zufall das du dich auch hier rumtribst :)

Trotzdem vielen Dank

Aber ich werde es gerne nochmal probieren wenn du darauf bestehst und mir versprichst das deine Lösung auch irgendwie funktioniert :)

Hallo,

ich habe es jetzt auch nochmal versucht. Mein CSS sieht jetzt so aus:

Code: 
html {
	height: 100%;
}

body {
	overflow-x: hidden;
	background-color: #ffffff;
	height: 100%;
}

#backgroundposition01 {
 	position:relative;
              
              min-height:100%;
              height:auto !important;
              height:100%;
              margin:0 auto -120px;
}

#backgroundposition02 {
 	position: relative;
	left: 50%;
 	width: 2600px;
 	margin-left: -1300px;
}

#footerposition01 {
position:relative;
              
              height:120px;
              margin:0 auto;
}

Allerdings ist es jetzt so wie es eben auch war, der Footer ist nämlich jetzt über dem Webseiteninhalt. Es wäre supper wenn du mir sagen könntest wie das kommt

Vielen Dank
 
Zwei Stunden hast du über diesen fünf Zeilen CSS-Regeln gebrütet?

Aber anscheinend in dieser langen Zeit nicht einmal meinen Beitrag in vollen Zügen und bis zum Ende durchgelesen.

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

Der Footer wird hier mit dem deklarierten negativen unteren Außenabstand über den Block #backgroundposition01 geschoben, womit dessen Inhalt beim Erreichen des unteren Boxenrandes vom Footer überdeckt wird.

Und dies lässt sich mit einem unteren Innenabstand vermeiden, den du für das Element definierst, das den Inhalt unmittelbar umschließt.

mfg Maik
 
Hallo,

manchmal sehe ich den Wald vor lauter Bäumen nicht ;) Ich bin auch ein anfänger was das betrifft und ich bin dir für deine Hilfe und dein Tutorial sehr dankbar

Es hat jetzt funktioniert und ich bin dank dir endlich glücklich :)

Viele Grüße
 
Hallo,

ich habe es jetzt nochmal getestet mit folgendem und es funktioniert leider doch noch nicht ganz richtig:

Code: 
html {
	height: 100%;
}

body {
	overflow-x: hidden;
	background-color: #ffffff;
	height: 100%;
}

#backgroundposition01 {
 	position: relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -26px;
}

#backgroundposition02 {
 	position: relative;
	left: 50%;
 	width: 2600px;
 	margin-left: -1300px;
}

#footerposition01 {
	position: relative;
        height: 26px;
        margin: 0 auto;
}

Aber wenn der inhalt nicht die volle Browserhöhe ausfüllt kann man trotzdem Scrollen.

Wie kommt das den ?

vielen Dank

Hallo,

der footer geht jetzt wieder über den Inhalt. Irgendwie klappt das nicht mit deinem Script ;)
 
Mein CSS funktioniert einwandfrei, wenn man dafür Sorge trägt, dass auch die voreingestellten Polsterungseigenschaften im Dokumentkörper auf null gesetzt werden, was man von deinem Stylesheet nicht behaupten kann.

Oder glaubst du ernsthaft, dass ich mit meiner langjährigen Erfahrung den Benutzern hier "Schrott" andrehe? :mad:

Hast du dir überhaupt meine Beispiele live im Browser angeschaut?

Scheinbar auch das nicht, denn sonst würdest du hier nicht so eine gewagte Behauptung von dir geben.

mfg Maik
 
Nein ich denke nicht das du das willst :) Was verstehst du den uunter den Polster eigenschaften ? Und ist die 80 im 1 Beispiel für die Footerhöhe

Ich benutze übrigens deine Erste Methode :)

Vielen Dank schonmal für alles :)
 
"Polsterungseigenschaften" ist ein Sammelbegriff für die beiden CSS-Eigenschaften margin und padding.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
      <head>
            <title>Sticky Footer - Version I</title>
            <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
            <meta name="author" content="Maik" />
            <meta name="date" content="2010-01-16" />
            <style type="text/css">
            * {
                    margin:0; /* Außenabstand zurücksetzen */
                    padding:0; /* Innenabstand zurücksetzen */
            }
            html,body {
                    height:100%;
            }
            body {
                    font:normal 1em verdana, sans-serif;
            }
            #wrapper {
                    position:relative;
                    width:900px;
                    min-height:100%;
                    height:auto !important;
                    height:100%;
                    margin:0 auto -80px;
                    background:#f8f8f8;
            }
            #header {
                    height:100px;
                    background:#e8e8e8;
                    padding:10px;
                    text-align:center;
            }
            #middle {
                    padding:10px 10px 80px 10px;
            }
            #middle p {
                    margin:5px 0;
            }
            #footer {
                    position:relative;
                    width:900px;
                    height:80px;
                    line-height:80px;
                    margin:0 auto;
                    background:#e8e8e8;
                    text-align:center;
            }
            .clearfix:after {
                    content:".";
                    display:block;
                    height:0;
                    font-size:0;
                    clear:both;
                    visibility:hidden;
            }
            .clearfix {
                    display:inline-block;
            }
            /* Bereich nicht für IE-mac Anfang \*/
            * html .clearfix {
                    height:1%;
            }
            .clearfix {
                    display:block;
            }
            /* Bereich nicht für IE-mac Ende */
            </style>
      </head>
      <body>
            <div id="wrapper">
                 <div id="header">
                      <h1>Sticky Footer - Version I</h1>
                 </div>
                 <div id="middle" class="clearfix">
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <!-- Ab hier ist der weitere Inhalt zunächst auskommentiert, um die Ausgangsposition des Footers zu demonstrieren -->
                      <!--<p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>
                      <p>Content</p>-->
                      <p>- End of Content -</p>
                 </div>
            </div>
            <div id="footer">
                 <p>&copy; 2010 Maik@tutorials.de</p>
            </div>
      </body>
</html>


Da dieser Regelblock in deinem CSS fehlt, sitzt #backgroundposition01 somit nicht unmittelbar am oberen Fensterrand, sondern ein Stück darunter, womit er um genau dieses Maß über den unteren Fensterrand hinausreicht, denn seine 100%-Mindesthöhe bezieht sich auf das komplette Browserfenster.

mfg Maik
 
So :) Jetzt hat es aber wirklich funktioniert :)

So geht es jetzt:

Code: 
html {
	height: 100%;
}

body {
	overflow-x: hidden;
	background-color: #ffffff;
	height: 100%;
}

#backgroundposition01 {
 	position: relative;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -120px;
}

#backgroundposition02 {
 	position: relative;
	left: 50%;
 	width: 2600px;
 	margin-left: -1300px;
	padding:0px 0px 120px 0px;
}

#footerposition01 {
	position: relative;
        height: 120px;
	line-height: 120px;
        margin: 0 auto;
}

Ich habe diesen Teil hier nicht eingefügt:

Code: 
padding:0px 0px 120px 0px;

Deshalb ist der footer immer über den Content drüber :)

Wenn ich dir noch einen kleinen Tip geben darf für dein Tutorial, du solltest es bei allen drei verschiedenen Beispielen direkt ins CSS rein schreiben da man sonnst nicht immer darauf achtet das unten im Tutorial noch ein wichtiger Teil steht ;)

Ich dachte nämlich jetzt das wenn ich alles aus dem ersten Beispiel verwende es auch funktioniert und habe nicht mehr auf den Teil ganz unten geachtet und somit diesen Teil:

Code: 
padding:0px 0px 120px 0px;

nicht beachtet weshalb es auch nciht funktioniert hat.

P.S. DAs mit dem Padding hatte ich schon im Body Tag direkt in der html Datei ;)

Aber sonnst ist dein tutorial klasse :)

Vielen Dank und viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück