Beste,

Ik probeer een footer aan te maken maar ik bots op een probleem.
Mijn footer laat 1 cm open ik kan dit niet goed uitleggen.
Daarom kan je hier kijken naar het probleem. http://www.teamcrafted.tk/
Hier staan alvast mijn codes.

HTML Code:
[code lang=html]<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TeamCrafted: Kies je netwerk!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/welcome.css"/>
</head>
<body>
<div class="logo">
<a href="index.php"><img src="images/PTM_Logo.png"></a>
</div>
<div>Welkom op het TeamCrafted netwerk!</div>
<div class="footer">
<p class="left">&copy; TeamCrafted Company 2014. All rights reserved.</p>
</div>
</body>
</html>
[/code]

De CSS code:
[code lang=css]body {
background-image: url("http://planetteamcrafted.tk/images/background.jpg");
font-family: helvetica;
font-size: 15pt;
text-align: center;
color: #00ccff;
font-weight: bold;
}
.logo {
text-align: center;
}
.footer {
background-color: #ffffff;
text-align: center;
color: #999999;
width: 100%;
height: 60px;
border-top: solid #d4d4d4 1px;
position: absolute;
bottom: 0px;
font-size: 12px;
margin: auto;
}
.left {
float: left;
padding-left: 20px;
}
[/code]

Christophe

Ik zie een compleet andere CSS op je website dan je hier in het topic plaatst? Beetje vaag...

Maar goed, die bottom die je gebruikt heeft alleen effect als je position:absolute; of position:fixed; gebruikt. En als je blieft, doe dat niet voor layout element (header, footer, main, nav, etc.)

Op je site gebruik je dan ook nog margin-top: 35%;. Waar is die 35% op gebaseerd? Want nu zweeft die footer ergens halverwege.

Waar je naar opzoek bent is een sticky footer.
Voeg margin: 0; aan je body { } in je css.
Ok dank je de Bugg met mijn footer is opgelost

Toevoeging op 14/06/2014 13:28:35:

Nu alleen nog afwachten op de email om te zien of het werkt


Toevoeging op 14/06/2014 13:31:12:

Ok, footer werkt nu nog afwachten op de email.

Reageren