Der Footer soll immer unten sein auch wenn gescrollt wurde

Cascading Style Sheets (CSS ist eine praktische Code-Sprache, die einmal erstellt für das Aussehen der ganzen Seite gilt. So können z. B. Schriftattribute wie Farbe, Schriftart und Link-Farben und Formatierung bequem eingestellt werden.) - Fragen - Antworten - Tipps dazu hier ..

Moderator: lauras

Beiträge bitte im neuen Forum

Der Footer soll immer unten sein auch wenn gescrollt wurde

Beitragvon neuling11 » Sonntag 24. Juli 2011, 12:27

Hallo,

ich habe schon den Footer immer unten, durch den "Footerhack", wenn man nicht scrollen muss.
Jetzt möchte ich aber auch, dass wenn gescrollt wird dieser immer unten ist und nicht
diese Lücke entsteht (siehe Bild).

Der Footercontainer ist in dem Inhaltscontainer, also da wo der text steht.

Wie bekomme ich das hin?

Grüße, Dome
Dateianhänge
footer.jpg
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon neuling11 » Sonntag 24. Juli 2011, 17:00

Hallo,

also irgendwie geht es nicht so richtig...
Welche Möglichkeit gibt es die Seite nach unten zu strecken, immer, sodass man auch am Ende nicht weiter nach unten scrollen kann?
Ich habe schon gegooglet, da wird aber immer nur der Footer angesprochen, der Footer muss aber gar nicht immer unten sein... so etwa wie hier:http://www.baugemeinschaft-tuebingen.de/impressum.htm

Grüße, Dome
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon Sören » Sonntag 24. Juli 2011, 19:40

Wenn du schon ein Beispiel hast, wieso schaust du dann nicht einfach dort im Quelltext (bzw. mit Firebug oder ähnlichem) nach, wie es gemacht wurde?
Dadurch kann man auch sehr gut lernen :D
Benutzeravatar
Sören
HTML-Acrobat
 
Beiträge: 851
Registriert: Samstag 5. Juni 2010, 16:00

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon neuling11 » Montag 25. Juli 2011, 07:49

Ja neeee...
das einzige was mir aufgefallen ist, ist dass überall als display block vergeben ist :?
Nur so schlauch werde ich auch nicht draus...

Aber wenn du die Lösung schon vor deinen Augen siehst, enthalte sie
den anderen durch Suchmaschinen hergeführten Lesern (und mir) bitte nicht vor.


Grüße, Dominik
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon Sören » Montag 25. Juli 2011, 11:06

Du willst, dass der Hintergrund sich mindestens über die gesamte Seite bis an den unteren Bildschirmrand erstreckt, bei mehr Inhalt aber auch länger wird und der Footer normal am Ende des Inhalts klebt?

Dafür musst du einfach nur html eine min-height von 100% geben, dann nimmt er, unabhängig vom Inhalt, immer mindestens die volle Seitenlänge ein und packt auch den Hintergrund auf die volle Länge.
Den Inhalt kannst du dann ganz normal in den body packen.
Bsp:
Code: Alles auswählen
<!DOCTYPE html>
<html>
    <head>
        <title>Hintergrund auf voller Länge</title>

        <meta charset="UTF-8">
        <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        html {
            min-height: 100%;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, black), color-stop(1, white));
            background-image: -webkit-linear-gradient(top, black, white);
            background-image: -moz-linear-gradient(top, black, white);
            background-image: -o-linear-gradient(top, black, white);
            background-image: -ms-linear-gradient(top, black, white);
            background-image: linear-gradient(top, black, white);
        }
        body {
            width: 900px;
            margin: 0 auto;
        }
        section, footer {
            display: block;
        }
        section {
            background-color: white;
        }
        footer {
            margin-top: 20px;
            text-align: center;
            background-color: white;
        }
        </style>
    </head>

    <body>
      <section>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
        Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
        porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
        Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
        tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
        Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
      </section>
      <footer>
       Footer
      </footer>
    </body>
</html>
Benutzeravatar
Sören
HTML-Acrobat
 
Beiträge: 851
Registriert: Samstag 5. Juni 2010, 16:00

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon neuling11 » Montag 25. Juli 2011, 13:50

Hallo,

ok Danke, das klappt jetzt gut.

Aber, wenn der Inhalt länger ist als eine Bildschirmlänge, man also scrollen muss, dann (das Hintergrundbild ist bei mir im body, also habe ich den mal min-geheightet)
bleibt da immer so eine unschöne Lücke.

Diese Lücke müsste ich noch wegbekommen.
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon Sören » Montag 25. Juli 2011, 16:21

Also bei meinem Code entsteht keine Lücke. Kannst du deinen Code mal bitte posten?
Benutzeravatar
Sören
HTML-Acrobat
 
Beiträge: 851
Registriert: Samstag 5. Juni 2010, 16:00

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon neuling11 » Dienstag 26. Juli 2011, 08:36

Mir ist übrigens aufgefallen, dass wenn ich deinen Code bei mir lokal teste,
der Footer nicht nach unten gestreckt wird.


html in etwa so
Code: Alles auswählen
......
<body>
<div header>
</divheader>
<div navigation>
</divnavigation>
<div page/inhalt>
<div footer>
</div footer>
</div page/inhalt>
</body>
......




css
Code: Alles auswählen
/* RESET STYLESHEET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0} /*Reset Ende*/


html {
    background: /* url(../bgverlauf.png) repeat-x */ #f8fffc/* a4aeab */;
/*     height: 100%;   */
    height: 100%;


   
}

body {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
/*     margin-top: 20px; */
/*     border: 1px solid #728e85 ; */
    background-color: #ffffff;
     background-image: url(../backgroundbody.png);
    background-repeat: repeat-y;
/*     height: 100%; */
    font-family: Arial;
    color: #273437;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.07em;
    min-height: 100%;
    height: auto !important;
    height: 100%;





   
   
/*     -moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: px;
-moz-border-radius-bottomleft: px;
-webkit-border-radius: 15px 15px px px;
border-radius: 15px 15px px px; */
}

#footer {
/*     background-color: #728e85; */
    height: 26px;
    width: 900px;
    margin-right: 5px;

/*     background-image: url(../footer.png); */
    margin: 30px;
    border-top: dotted 1px  #bfbfbf;
    background-repeat: no-repeat;
    display: block;


   


}
#footer p {
    text-align: center;
/*     padding-left: 200px; */
    font-size: 12px;
/*    color: white; */
    padding-top: 3px;
}
#footer a {

    text-decoration: none;
}
#header {
/*     background: url(../header.png) no-repeat  #F3F9F0; */
    float: left;
    width:960px;
    height: 120px;

   
}
#header p {
    font-family: Arial;
    font-size: 25px;
    margin-left: 5px;
}
#page {
    width: 725px;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 220px;

    min-height: 400px;
    display: block;
    min-height: 100%;
    margin-bottom: -15px;

/*     background-color: #800000; */
}

/* Navigationselemente */
#navigation {
    float: left;
    width: 200px;
    background-color: #dddddd;
    margin-left: 21px;
    font-size: 17px;
    letter-spacing: 2px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;
   
}
#navigation ul {
    width: 170px;
    background-color: #ececec;
    margin-left: 15px;

}

#navigation ul li {
/*     height: 25px;

    border-bottom: 1px solid #dddddd;
    display: block;
    padding-top: 3px; */
   
}
/* der Rahmen unten hat die Gleiche Farbe wie der Hintergrund, damit kein wei�er Streifen entsteht */
#navigation a.hier {
    background-color: #769980;
    color: white;
    border-bottom: 1px solid #769980;
    border-top: 1px solid #769980;
}
#navigation a.hier:hover {
    background-color: #769980;
}
#navigation li a {
    text-decoration: none;
    display: block;
    color: #4f615b;
    height: 25px;
    display:block;
    padding-top: 3px;
    border-bottom: 1px solid #dddddd;
    padding-left: 10px;
   
 
}
#navigation ul a:hover {
    background-color:#91aa98;
    color: white; 

}
/* Bei Fertigstellung IF IE or CHROME oder so dann das, ansosten BORDER-IMAGE-LEFT auf der Linken Seite, sieht eleganter aus */
/* �berschriften */
h1 {
    font-variant: small-caps;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.09em;
    border-bottom: 1px solid #769980;
    border-left: 5px solid  #769980;
    width: 95%;
    padding-left: 5px;
   
}
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon Sören » Dienstag 26. Juli 2011, 09:31

Das soll er ja auch nicht. Der Footer ist immer am Ende des Inhalts, so wie du es wolltest (http://www.baugemeinschaft-tuebingen.de/impressum.htm).

Du solltest deinen CSS-Code nochmal in Ruhe durchgehen.
Z.B. was du damit erreichen willst:
Code: Alles auswählen
    min-height: 100%;
    height: auto !important;
    height: 100%;
Benutzeravatar
Sören
HTML-Acrobat
 
Beiträge: 851
Registriert: Samstag 5. Juni 2010, 16:00

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon neuling11 » Dienstag 26. Juli 2011, 11:00

Hallo,

ok,ok, entweder ich habe dich falsch verstanden oder du mich...
Ja jetzt wo ich es sehe, klappt es bei dir, bei mir nicht :? .
Also ich habe bei mir jetzt alle min-height, height Angaben entfernt, die
100% haben, auch height auto,
nur html habe ich eine min-height gegeben.

Der Hintergrund, also bei dir weiß, soll aber auch immer unten sein,
deshalb habe ich bei mir noch diese Angaben gemacht.
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon Sören » Dienstag 26. Juli 2011, 15:11

Kannst du bitte deinen jetzigen Code posten und am besten nochmal genau, was du eigentlich haben willst, kann nämlich gut sein, dass ich dich falsch verstanden habe.
Benutzeravatar
Sören
HTML-Acrobat
 
Beiträge: 851
Registriert: Samstag 5. Juni 2010, 16:00

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon neuling11 » Dienstag 26. Juli 2011, 17:32

Hallo,

also ich möchte, dass der Footer, welcher bei mir im Div-Container Page sitzt sich so verhält dass:
-wenn der Inhalt in Page nur ein paar Zeilen lang ist, der Footer auch gleich folgt, also nicht unten ist,
aber dennoch das Hintergrundbild vom body, welcher 950px (oder so) breit ist bis nach ganz unten zum Seitenende geht.

-wenn Page nicht mehr für eine Bildschirmseitenlänge ausreicht, also nach unten gescrollt werden muss, soll das Hintergrundbild vom Body
bis ganz zum Seitenende gehen und nicht diese Lücke entstehen wie beim Bild im 1.Post . Der Footer soll dann ganz am Ende sein, aber immernoch im container Page.

Ich hoffe ich habe mich jetzt verständlicher ausgedrückt :D

css
Code: Alles auswählen
/* RESET STYLESHEET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}q:before,q:after{content:''}abbr,acronym,fieldset,img{border:0} /*Reset Ende*/


html {
    background: /* url(../bgverlauf.png) repeat-x */ #f8fffc/* a4aeab */;
/*     height: 100%;   */
min-height: 100%;



}

body {
    width: 960px;
margin: 0 auto;
/*     margin-top: 20px; */
/*     border: 1px solid #728e85 ; */
    background-color: #ffffff;
     background-image: url(../backgroundbody.png);
    background-repeat: repeat-y;
/*     height: 100%; */
    font-family: Arial;
    color: #273437;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.07em;
/*     min-height: 100%; */







/*     -moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: px;
-moz-border-radius-bottomleft: px;
-webkit-border-radius: 15px 15px px px;
border-radius: 15px 15px px px; */
}

#footer {
/*     background-color: #728e85; */
    height: 26px;

    width: 900px;
    margin-right: 5px;

/*     background-image: url(../footer.png); */
    margin: 30px;
    border-top: dotted 1px  #bfbfbf;
    background-repeat: no-repeat;
    display: block;






}
#footer p {
    text-align: center;
/*     padding-left: 200px; */
    font-size: 12px;
/*    color: white; */
    padding-top: 3px;
}
#footer a {

    text-decoration: none;
}
#header {
/*     background: url(../header.png) no-repeat  #F3F9F0; */
    float: left;
    width:960px;
    height: 120px;


}
#header p {
    font-family: Arial;
    font-size: 25px;
    margin-left: 5px;
}
#page {
    width: 725px;
    padding-left: 10px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 220px;

    min-height: 400px;
    display: block;
/*     min-height: 100%; */


/*     background-color: #800000; */
}

/* Navigationselemente */
#navigation {
    float: left;
    width: 200px;
    background-color: #dddddd;
    margin-left: 21px;
    font-size: 17px;
    letter-spacing: 2px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #808080;
    border-right: 1px solid #808080;

}
#navigation ul {
    width: 170px;
    background-color: #ececec;
    margin-left: 15px;

}

#navigation ul li {
/*     height: 25px;

    border-bottom: 1px solid #dddddd;
    display: block;
    padding-top: 3px; */

}
/* der Rahmen unten hat die Gleiche Farbe wie der Hintergrund, damit kein weißer Streifen entsteht */
#navigation a.hier {
    background-color: #769980;
    color: white;
    border-bottom: 1px solid #769980;
    border-top: 1px solid #769980;
}
#navigation a.hier:hover {
    background-color: #769980;
}
#navigation li a {
    text-decoration: none;
    display: block;
    color: #4f615b;
    height: 25px;
    display:block;
    padding-top: 3px;
    border-bottom: 1px solid #dddddd;
    padding-left: 10px;


}
#navigation ul a:hover {
    background-color:#91aa98;
    color: white;

}
/* Bei Fertigstellung IF IE or CHROME oder so dann das, ansosten BORDER-IMAGE-LEFT auf der Linken Seite, sieht eleganter aus */
/* überschriften */
h1 {
    font-variant: small-caps;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.09em;
    border-bottom: 1px solid #769980;
    border-left: 5px solid  #769980;
    width: 95%;
    padding-left: 5px;

}


html ganz
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">



<head>
    <title>Projekt | Startseite</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="lalala" />
    <meta name="author" content="ich" />
    <meta name="designer" content="ich"/>
    <meta name="publisher" content="lalalal"/>
    <meta name="revisit-After" content="7 days"/>
    <meta name="keywords" content="lalalala" />

    <link href="design/style.css" type="text/css" rel="stylesheet" />
    <link href="bilder/favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>

<body>

<div id="wrap">
<div id="header">
<p><a href="/index.php">Projekt</a></p>
</div>
<div id="navigation">
    <ul>
        <li><a class="hier" href="#">Startseite</a></li>
        <li><a href="#">hier kommt inhalt</a></li>
        <li><a href="#">lalalala</a></li>
        <li><a href="#">inhalt</a></li>
        <li><a href="#">und noch mehr inhalt</a></li>
        <li><a href="#">und eine navigation natürlich</a></li>
    </ul>
</div>
<div id="page">



adflajfklajajasd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />asd<br />

</div>
<div id="footer">
<p>&copy;&nbsp;2011&nbsp;-&nbsp;<a href="#">Impressum/Disclaimer</a></p>
</div>
</div>





</body>
</html>
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon Sören » Dienstag 26. Juli 2011, 20:41

Ich denke, das passt jetzt:
Die allgemeine Struktur ist dann:
Code: Alles auswählen
html {
    /* Hintergrund für die gesamte Seite */
    height: 100%;
}
body {
    margin: 0 auto;
    height: 100%;
    width: /* Seitenbreite */
}
#wrapper {
    /* Hintergrund für den Content */
    min-height: 100%;
    width: /* Seitenbreite */
}

HTML:
Code: Alles auswählen
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div id="wrapper">
            <header></header>
            <navigation></navigation>
            <section></section>
            <footer></footer>
        </div>
    </body>
</html>

Wichtig ist hierbei, dass das letzte Element im Wrapper keinen margin-bottom hat, da sonst eine Lücke entsteht.
Benutzeravatar
Sören
HTML-Acrobat
 
Beiträge: 851
Registriert: Samstag 5. Juni 2010, 16:00

Re: Der Footer soll immer unten sein auch wenn gescrollt wur

Beitragvon neuling11 » Mittwoch 27. Juli 2011, 09:27

Hallo,

danke, klappt perfekt!
neuling11
HTML-Freund
 
Beiträge: 128
Registriert: Freitag 17. Dezember 2010, 19:08
Wohnort: Deutschland


Beiträge bitte im neuen Forum

Zurück zu CSS

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

cron