CSS Footer

**Thijs Penny** · 12-04-2009, 06:28

Hi all!

Ik was net ff bezig in CSS en ik zat met een probleempje. Ik wil namelijk een footer toevoegen aan mijn website. Deze moet zo werken:

Indien de pagina minder ruimte in beslag neemt als het venster (er zijn dus geen scrollbars), komt de footer helemaal onderaan de pagina.

Neemt de pagina meer ruimte in, zijn er dus wel scrollbars, dan wordt de footer automatisch onderaan de pagina toegevoegd.

Kan iemand me hiermee helpen?

Dit is mijn CSS:

Code:

body {
    background: url('images/bg.png') repeat-x #fff;
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-size: 10px;
}


#margin {
    width: 775px;
    margin: 0 auto;
}

#logondata {
    width: 775px;
    padding-top: 10px;
}

ul {
    margin-top: 37px;
    margin-left: -40px;
    list-style: none;
    color: #aaaaaa;
    width: 775px;
    height: 30px;
    display: block;
    float: left;
}

li a {
    color: #aaaaaa;
    text-decoration: none;
    text-transform: uppercase;
    float: left;
    margin-right: 25px;
    display: inline;
}

.active {
    font-weight: bold;
}

.logo {
    float: left;
    width: 281px;
}

.data {
    float: right;
    color: #fff;
    width: 494px;
    text-align: right;
}

.data input {
    background: url('images/input_bg.png');
    width: 188px;
    height: 13px;
    padding: 6px;
    margin-top: 5px;
    color: #EDE5E5;
    border: 0;
    font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-size: 10px;
}

.data .button {
    background: url('images/submit_bg.png');
    width: 200px;
    height: 25px;
    color: #aaaaaa;
    font-weight: bold;
    padding-top: 5px;
    text-transform: uppercase;
}

#content {
    margin-top: 218px;
    position: relative;
}

#box {
    margin: auto;
    background-color: #E6E6E6;
    width: 773px;
    border: 1px #D3D3D3 solid;
    padding: 1px;
    margin-bottom: 20px;
}

#box .title {
    background-color: #D3D3D3;
    color: #fff;
    height: 10px;
    text-transform: uppercase;
    padding: 10px;
    padding-bottom: 12px;
}

#box .inhoud {
    padding: 9px;
    color: #aaaaaa;
}

#box .line {
    margin-top: 7px;
    border-bottom: 1px #D3D3D3 solid;
    margin-bottom: 7px;
}

En de HTML:

Code:

<!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="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Thijs" />

    <title>index</title>
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->

    
</head>

<body>

    <div id="margin">
    
        <ul>
        
            <li><a href="#" class="active">Index</a></li>
            <li><a href="#">Controlepaneel</a></li>
            <li><a href="#">Ledenlijst</a></li>
            <li><a href="#">Kalender</a></li>
            <li><a href="#">Nieuwe posts</a></li>
            <li><a href="#">Zoeken</a></li>
            <li><a href="#">Faq</a></li>
            <li><a href="#">Log uit</a></li>
        
        </ul>
        
        <div id="logondata">
            
            <div class="logo">
                <img src="images/logo.png" alt="" />
            </div>
            
            <div class="data">
                GEBRUIKERSNAAM: <input type="text" value="Thijs" /><br />
                WACHTWOORD: <input type="password" value="xxxxxx" /><br />
                <input type="submit" class="button" value="Log in" />
            </div>
            
        </div>
        
        <div id="content">
                content
        </div>

    </div>

</body>
</html>

Kan iemand me aub helpen?

PS: in de css zullen wel heel wat dingen staan die er niet hoeven te staan. Heb hier geen verstand van dus als iemand zo vriendelijk zou willen zijn om dat ff te controleren en overbodige dingen eruit te halen, zou ik zeer erg appreciëren. Maar dat kan wachten, de footer komt op #1.

Alvast bedankt!

**gast7972** · 12-04-2009, 07:49

Hier heb je wat resultaten waar je zeker wat aan hebt ;)!
http://lmgtfy.com/?q=sticky+footer

En hier heb ik je CSS klein beetje aangepast, er zouden nog wel wat dingen worden aangepast maar had weinig tijd ;)!

Code:

body {
    background: url('images/bg.png') repeat-x #fff;
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-size: 10px;
}


#margin {
    width: 775px;
    margin: 0 auto;
}

#logondata {
    width: 775px;
    padding-top: 10px;
}

ul {
    margin:37px 0 0 -40px;
    list-style: none;
    color: #aaa;
    width: 775px;
    height: 30px;
    display: block;
    float: left;
}

li a {
    color: #aaa;
    text-decoration: none;
    text-transform: uppercase;
    float: left;
    margin-right: 25px;
    display: inline;
}

.active {
    font-weight: bold;
}

.logo {
    float: left;
    width: 281px;
}

.data {
    float: right;
    color: #fff;
    width: 494px;
    text-align: right;
}

.data input {
    background: url('images/input_bg.png');
    width: 188px;
    height: 13px;
    padding: 6px;
    margin-top: 5px;
    color: #EDE5E5;
    border: 0;
    font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-size: 10px;
}

.data .button {
    background: url('images/submit_bg.png');
    width: 200px;
    height: 25px;
    color: #aaa;
    font-weight: bold;
    padding-top: 5px;
    text-transform: uppercase;
}

#content {
    margin-top: 218px;
    position: relative;
}

#box {
    margin: auto;
    background-color: #E6E6E6;
    width: 773px;
    border: 1px #D3D3D3 solid;
    padding: 1px;
    margin-bottom: 20px;
}

#box .title {
    background-color: #D3D3D3;
    color: #fff;
    height: 10px;
    text-transform: uppercase;
    padding: 10px 10px 12px 10px;
}

#box .inhoud {
    padding: 9px;
    color: #aaa;
}

#box .line {
    margin:7px 0;
    border-bottom: 1px #D3D3D3 solid;
}

**Thijs Penny** · 12-04-2009, 15:01

Origineel gepost door S. Zanders

Hier heb je wat resultaten waar je zeker wat aan hebt ;)!
http://lmgtfy.com/?q=sticky+footer

En hier heb ik je CSS klein beetje aangepast, er zouden nog wel wat dingen worden aangepast maar had weinig tijd ;)!

Code:

blaat

Bedankt! Ja, met die sticky footer ging ik al aan de slag. Maar het wou echt niet lukken, snap helemaal niet waarom... dusja, daarom dit topic. Had er van 4u deze nacht naar gezorgd en 7u gaf ik het toch echt op.

**J Zwaan** · 12-04-2009, 15:03

http://www.cssstickyfooter.com/

30 gezocht, even geprobeerd en werkt perfect.

**Thijs Penny** · 12-04-2009, 15:21

Origineel gepost door Joël Zwaan

http://www.cssstickyfooter.com/

30 gezocht, even geprobeerd en werkt perfect.

HTML:

Code:

<!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="en" lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Thijs" />

    <title>OldskooLz template</title>
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->

    
</head>

<body>

<div id="wrap">

    <div id="margin">
    
        <ul>
        
            <li><a href="#" class="active">Index</a></li>
            <li><a href="#">Controlepaneel</a></li>
            <li><a href="#">Ledenlijst</a></li>
            <li><a href="#">Kalender</a></li>
            <li><a href="#">Nieuwe posts</a></li>
            <li><a href="#">Zoeken</a></li>
            <li><a href="#">Faq</a></li>
            <li><a href="#">Log uit</a></li>
        
        </ul>
        
        <div id="logondata">
            
            <div class="logo">
                <img src="images/logo.png" alt="" />
            </div>
            
            <div class="data">
                <strong>GEBRUIKERSNAAM:</strong> <input type="text" value="Thijs" /><br />
                <strong>WACHTWOORD:</strong> <input type="password" value="xxxxxx" /><br />
                <input type="submit" class="button" value="Log in" />
            </div>
            
        </div>
        
        <div id="content">
        
                content
        
        </div>

    <div id="main" class="clearfix">

    </div>

    </div>

    <div id="footer">
        test
    </div>
</div>

</body>
</html>

CSS:

Code:

body {
    background: url('images/bg.png') repeat-x #fff;
    margin: 0 auto;
    font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-size: 10px;
}


#margin {
    width: 775px;
    margin: 0 auto;
}

#logondata {
    width: 775px;
    padding-top: 10px;
}

ul {
    margin-top: 37px;
    margin-left: -40px;
    list-style: none;
    color: #aaaaaa;
    width: 775px;
    height: 30px;
    display: block;
    float: left;
}

li a {
    color: #aaaaaa;
    text-decoration: none;
    text-transform: uppercase;
    float: left;
    width: auto;
    margin-right: 25px;
    display: inline;
}

.active {
    font-weight: bold;
}

.logo {
    float: left;
    width: 281px;
}

.data {
    float: right;
    width: 494px;
    text-align: right;
    color: #FAFAFA;
}

.data input {
    background: url('images/input_bg.png');
    width: 188px;
    height: 13px;
    padding: 6px;
    margin-top: 5px;
    color: #EDE5E5;
    border: 0;
    font-family: Verdana, Arial, Helvetica, Sans-serif;
    font-size: 10px;
}

.data .button {
    background: url('images/submit_bg.png');
    width: 200px;
    height: 25px;
    color: #aaaaaa;
    font-weight: bold;
    padding-top: 5px;
    text-transform: uppercase;
}

#content {
    clear: both;
    padding-top: 60px;
    position: relative;
}

.box {
    margin: auto;
    background-color: #E6E6E6;
    width: 773px;
    border: 1px #D3D3D3 solid;
    padding: 1px;
    margin-bottom: 20px;
}

.title {
    background-color: #D3D3D3;
    color: #fff;
    height: 10px;
    text-transform: uppercase;
    padding: 10px;
    padding-top: 4px;
    padding-bottom: 12px;
}

.inhoud {
    padding: 9px;
    color: #aaaaaa;
}

.line {
    margin-top: 7px;
    border-bottom: 1px #D3D3D3 solid;
    margin-bottom: 7px;
}

body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    background-color: blue;
    clear:both;}

Resultaat:

http://www.imgdumper.nl/uploads/49e1...3c8-output.png

Wat doe ik fout dan??

Bedankt in ieder geval voor de hulp en moeite :).

**J Zwaan** · 12-04-2009, 15:50

Lees dit even door en volg de stappen. Je kunt niet zomaar alle div's die ze daar gebruiken aan het eind van je code zetten en dan verwachten dat het werkt. Je hebt o.a. de content buiten de "main" div gezet.

http://www.cssstickyfooter.com/using...oter-code.html

**Lorenzo de Kamps** · 12-04-2009, 17:13

Ik heb de heer Thijs.V. geholpen via Messenger-contact en het werkt nu uitstekend.

CSS Footer

CSS Footer

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

CSS Footer

CSS Footer

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen