Probleem met footer
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 (html)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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">© TeamCrafted Company 2014. All rights reserved.</p>
</div>
</body>
</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">© TeamCrafted Company 2014. All rights reserved.</p>
</div>
</body>
</html>
De CSS code:
Code (css)
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
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
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;
}
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;
}
Christophe
Graag volgende keren zelf je codes tussen de code-tags zetten aub.
[/modedit]
Gewijzigd op 14/06/2014 12:21:25 door John De Zon
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.
Je kan het vanaf nu via http://www.teamcrafted.tk zien.
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.