Forum › (X)HTML/XML/CSS › Topic

Een nieuwe topic in het forum (X)HTML/XML/CSS plaatsen Reageren op dit topic Forum:

[CSS] [HTML]

Ik zit met een probleem, mijn footer zit aan de onderkant van de pagina, maar niet mooi gecentreerd, zoals wel mijn bedoeling is.

HTML:
Code tonen/verbergenCodeDeze code in een nieuw vensterDeze code in een tekstveldDeze code in een zip file downloaden
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
    <head>
        <title>In ontwikkeling!</title>
        
        <meta charset="utf-8" />
        
        <link rel="stylesheet" type="text/css" href="css/basis.css" />
    </head>
    
    <body>
        <div id="menu">
            Menu
        </div>
        <div id="container">
            <div id="header">
                Header
            </div>
            <div id="sidebar-l">
                Sidebar Links
            </div>
            
            <div id="sidebar-r">
                Sidebar Rechts
            </div>
            
            <div id="content">
                Content
            </div>
        </div>
        <div id="footer">
            Footer
        </div>
    </body>
</html>



CSS:
Code tonen/verbergenCodeDeze code in een nieuw vensterDeze code in een tekstveldDeze code in een zip file downloaden
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* CSS-file behorend bij TNG */

html,body{
    margin:0;
    padding:0;
}

#menu{
    background-color:rgb(255,86,81);
    height:50px;
}

#container{
    width:1000px;
    margin:auto;
}

#header{
    background-color:rgb(224,17,80);
    height:150px;
}

#sidebar-l{
    background-color:rgb(141,171,242);
    width:280px;
    float:left;
}

#sidebar-r{
    background-color:rgb(141,171,242);
    width:220px;
    float:right;
}

#content{
    background-color:rgb(39,85,92);
    margin-left:280px;
    margin-right:220px;
}

#footer{
    background-color:rgb(84,48,64);
    width:1400px;
    height:66px;
    margin:auto;
    bottom:0;
    position:absolute;
    clear:both;
}


Stuur een prive bericht
Code tonen/verbergenCodeDeze code in een nieuw vensterDeze code in een tekstveldDeze code in een zip file downloaden
1
2
3
4
#footer {
    left: 50%;
    margin-left: -700px; /* Helft van de breedte */
}



Maar het is beter om je footer op deze manier onder aan de pagina te krijgen http://ryanfait.com/sticky-footer/ dan kun je gewoon margin: 0 auto gebruiken.
Stuur een prive bericht
@KnoopA: Heel erg bedankt! Ik krijg die links nooit werkend van dat soort sites. Het enige probleem wat ik nu nog heb is dat de footer over de content/container lapt?
Stuur een prive bericht
Quote:
WMRKameleon schreef:
@KnoopA: Heel erg bedankt! Ik krijg die links nooit werkend van dat soort sites. Het enige probleem wat ik nu nog heb is dat de footer over de content/container lapt?

Heb je de "push" div er wel in zitten? Als je een voorbeeld online zet kan ik wel eens kijken wat het probleem is.

Als je in je container float: left gebruikt kun je dit ook eens proberen.
Code tonen/verbergenCodeDeze code in een nieuw vensterDeze code in een tekstveldDeze code in een zip file downloaden
1
2
3
.footer, .push {
    clear: both;
    }


Stuur een prive bericht
Ah, nu doet hij het, heel erg bedankt! Ik noteer deze techniek en sla deze ergens veilig op, nogmaals bedankt!
Stuur een prive bericht
@KnoopA: Ik heb nog een korte vraag, nu heb ik de footer als sticky, maar hoe kan ik nu dan de columns #sidebar-l #sidebar-r en #content helemaal laten doorlopen naar de footer?
Ik heb het geprobeerd met min-height en height op 100%, maar dat haalde niets uit?
Stuur een prive bericht
Ik heb even voor je gegoogled naar: faux columns

Zie hier in het engels een articel:
Klik
En in het NL:
klik
Stuur een prive bericht