[CSS] Footer niet op goede positie
Ik ben bezig met een site voor een schoonheidssalon. Nu stuit ik op een klein probleempje. In IE werkt alles prima, in FF en Safari werkt alles grotendeels ook goed behalve dan dat de footer niet op de goede plek zit. Weet iemand wat ik fout gedaan heb?
De site:
http://www.purity.silverr.nl/
De css:
Code (php)
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.content{
width: 870px;
margin-top: 0px;
}
.logo{
width: 190px;
height: 115px;
float: left;
}
.adres{
text-align: left;
float: left;
height: 115px;
width: 680px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #400040;
}
.menu_item1{
float: left;
width: 140px;
height: 140px;
}
.menu_item2{
float: left; margin-left: 7px;
width: 140px;
height: 140px;
}
.menu_item3{
float: left; margin-left: 7px;
width: 135px;
height: 140px;
}
.menu{
height: 140px;
width: 870px;
}
.left{
float: left;
width: 140px;
height: 434px;
}
.right{
margin-top: 7px;
float: left; margin-left: 7px;
width: 723px;
height: 434px;
overflow: auto;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #400040;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#400040;
scrollbar-darkshadow-color:#400040;
scrollbar-shadow-color:#FFFFFF;
scrollbar-arrow-color:#400040;
scrollbar-track-color:#FFFFFF;
}
.left_2{
margin-top: 7px;
height: 140px;
width: 140px;
}
.footer{
margin-top: 7px;
height: 140px;
width: 870px;
background-image: url(images/footer.png);
}
.copyright{
margin-left: 7px;
margin-top: 120px;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
height: 15px;
}
.letters{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #400040;
}
width: 870px;
margin-top: 0px;
}
.logo{
width: 190px;
height: 115px;
float: left;
}
.adres{
text-align: left;
float: left;
height: 115px;
width: 680px;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #400040;
}
.menu_item1{
float: left;
width: 140px;
height: 140px;
}
.menu_item2{
float: left; margin-left: 7px;
width: 140px;
height: 140px;
}
.menu_item3{
float: left; margin-left: 7px;
width: 135px;
height: 140px;
}
.menu{
height: 140px;
width: 870px;
}
.left{
float: left;
width: 140px;
height: 434px;
}
.right{
margin-top: 7px;
float: left; margin-left: 7px;
width: 723px;
height: 434px;
overflow: auto;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #400040;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#400040;
scrollbar-darkshadow-color:#400040;
scrollbar-shadow-color:#FFFFFF;
scrollbar-arrow-color:#400040;
scrollbar-track-color:#FFFFFF;
}
.left_2{
margin-top: 7px;
height: 140px;
width: 140px;
}
.footer{
margin-top: 7px;
height: 140px;
width: 870px;
background-image: url(images/footer.png);
}
.copyright{
margin-left: 7px;
margin-top: 120px;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
height: 15px;
}
.letters{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #400040;
}
De HTML code:
Code (php)
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Schoonheidssalon Purity - Welkom</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/purity2.png')">
<div align="center">
<div class="content">
<div class="logo">
<img src="images/logo_top.png" alt="Purity" />
</div>
<div class="adres"><br /><br />
Dwarswal 5<br />Veldhoven<br />5509 KH<br />040-2351626<br />Contact ons
</div>
<div class="menu">
<div class="menu_item1">
<a href="home.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/purity2.png',1)"><img src="images/purity.png" name="home" width="140" height="140" border="0" id="home" alt="" /></a> </div>
<div class="menu_item2">
<a href="behandelingen.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('behandelingen','','images/behandelingen2.png',1)"><img src="images/behandelingen.png" name="behandelingen" width="140" height="140" border="0" id="behandelingen" alt="" /></a>
</div>
<div class="menu_item2">
<a href="massages.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('massages','','images/massages2.png',1)"><img src="images/massages.png" name="massages" width="140" height="140" border="0" id="massages" alt="" /></a>
</div>
<div class="menu_item2">
<a href="aanbiedingen.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aanbiedingen','','images/aanbiedingen2.png',1)"><img src="images/aanbiedingen.png" name="aanbiedingen" width="140" height="140" border="0" id="aanbiedingen" alt="" /></a>
</div>
<div class="menu_item2">
<a href="over_ons.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('over_ons','','images/over_ons2.png',1)"><img src="images/over_ons.png" name="over_ons" width="140" height="140" border="0" id="over_ons" alt="" /></a>
</div>
<div class="menu_item3">
<img src="images/menu_rechts.png" alt="" />
</div>
</div>
<div class="left">
<div class="left_2">
<a href="hotstones.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hotstones','','images/left_hs2.png',1)"><img src="images/left_hs.png" name="hotstones" width="140" height="140" border="0" id="hotstones" alt="" /></a>
</div>
<div class="left_2">
<a href="sabaaydi.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sabaaydi','','images/sabaaydi2.png',1)"><img src="images/sabaaydi.png" name="sabaaydi" width="140" height="140" border="0" id="sabaaydi" alt="" /></a>
</div>
<div class="left_2">
<a href="bruiloftmakeup.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('make-up','','images/left_make-up2.png',1)"><img src="images/left_make-up.png" name="make-up" width="140" height="140" border="0" id="make-up" alt="" /></a>
</div>
</div>
<div class="right">
<b>Welkom op Purity</b>
<br /><br />
Purity Schoonheidssalon is specialist op het gebied van huidverzorging en huidverbetering.
Met diverse specialisaties, voor zowel dames als heren, en een grote diversiteit en exclusieve
behandelingen.
<br /><br />
We zijn een Stivas gediplomeerde schoonheidssalon, en volgen nog steeds de nieuwste trends
in ons vakgebied. Die steeds verbeterende kennis en ervaring wenden we aan in onze veelzijdige
salon. Een moderne en sfeervol ingerichte ruimte vaan waaruit ook kwaliteitsverzorgingsprodukten
verkocht worden.
<br /><br />
We voeren onder meer het schoonheidsmerk Gatineau voor huidverbetering, Vagheggi en de make-up
produkten van T-leclerc en LooKx. Het zijn zonder meer plantaardige topmerken die niet op dieren
getest zijn. Alle produkten zijn aangepast aan ieders persoonlijke verzorging en budget.
</div>
</div>
<div class="footer">
<div class="copyright">
© Schoonheidssalon Purity <i>by Silverr Webdesign</i>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Schoonheidssalon Purity - Welkom</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('images/purity2.png')">
<div align="center">
<div class="content">
<div class="logo">
<img src="images/logo_top.png" alt="Purity" />
</div>
<div class="adres"><br /><br />
Dwarswal 5<br />Veldhoven<br />5509 KH<br />040-2351626<br />Contact ons
</div>
<div class="menu">
<div class="menu_item1">
<a href="home.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/purity2.png',1)"><img src="images/purity.png" name="home" width="140" height="140" border="0" id="home" alt="" /></a> </div>
<div class="menu_item2">
<a href="behandelingen.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('behandelingen','','images/behandelingen2.png',1)"><img src="images/behandelingen.png" name="behandelingen" width="140" height="140" border="0" id="behandelingen" alt="" /></a>
</div>
<div class="menu_item2">
<a href="massages.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('massages','','images/massages2.png',1)"><img src="images/massages.png" name="massages" width="140" height="140" border="0" id="massages" alt="" /></a>
</div>
<div class="menu_item2">
<a href="aanbiedingen.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aanbiedingen','','images/aanbiedingen2.png',1)"><img src="images/aanbiedingen.png" name="aanbiedingen" width="140" height="140" border="0" id="aanbiedingen" alt="" /></a>
</div>
<div class="menu_item2">
<a href="over_ons.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('over_ons','','images/over_ons2.png',1)"><img src="images/over_ons.png" name="over_ons" width="140" height="140" border="0" id="over_ons" alt="" /></a>
</div>
<div class="menu_item3">
<img src="images/menu_rechts.png" alt="" />
</div>
</div>
<div class="left">
<div class="left_2">
<a href="hotstones.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hotstones','','images/left_hs2.png',1)"><img src="images/left_hs.png" name="hotstones" width="140" height="140" border="0" id="hotstones" alt="" /></a>
</div>
<div class="left_2">
<a href="sabaaydi.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sabaaydi','','images/sabaaydi2.png',1)"><img src="images/sabaaydi.png" name="sabaaydi" width="140" height="140" border="0" id="sabaaydi" alt="" /></a>
</div>
<div class="left_2">
<a href="bruiloftmakeup.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('make-up','','images/left_make-up2.png',1)"><img src="images/left_make-up.png" name="make-up" width="140" height="140" border="0" id="make-up" alt="" /></a>
</div>
</div>
<div class="right">
<b>Welkom op Purity</b>
<br /><br />
Purity Schoonheidssalon is specialist op het gebied van huidverzorging en huidverbetering.
Met diverse specialisaties, voor zowel dames als heren, en een grote diversiteit en exclusieve
behandelingen.
<br /><br />
We zijn een Stivas gediplomeerde schoonheidssalon, en volgen nog steeds de nieuwste trends
in ons vakgebied. Die steeds verbeterende kennis en ervaring wenden we aan in onze veelzijdige
salon. Een moderne en sfeervol ingerichte ruimte vaan waaruit ook kwaliteitsverzorgingsprodukten
verkocht worden.
<br /><br />
We voeren onder meer het schoonheidsmerk Gatineau voor huidverbetering, Vagheggi en de make-up
produkten van T-leclerc en LooKx. Het zijn zonder meer plantaardige topmerken die niet op dieren
getest zijn. Alle produkten zijn aangepast aan ieders persoonlijke verzorging en budget.
</div>
</div>
<div class="footer">
<div class="copyright">
© Schoonheidssalon Purity <i>by Silverr Webdesign</i>
</div>
</div>
</div>
</body>
</html>
Het gaat in de HTML vooral om het laatste divje.
Alvast bedankt
Kmoest footer een float left meegeven.
Thomas schreef op 24.05.2008 19:51:
Omdat dat de eisen van de klant zijn?
Oke, klant is koning. Maar toch....
Een klant schakelt een andere partij in, omdat ze het zelf niet kunnen/weten. Ze hebben wel een visie, maar die kan jij als 'expert' wel een beetje sturen.
Mee eens, ik bespreek het nog met de klant en zal het er is over hebben ;)
Als een plaatje 1 kleur heeft, of horizontaal of verticaal eigenlijk hetzelfde is verklein het plaatje dan tot 1px in de breedte of hoogte en laat hem repeaten dmv CSS.
Dit scheelt weer laadtijd ;)
Ten eerste net als iedereen al zij, die vakken zijn ietsje te groot, houd er rekening mee dat er nog steeds wat kleinere resolutie's worden gebruikt.
Ten tweede, als je een gradient gaat gebruiken aan een kant, zorg ervoor dat hij helemaal gaat naar de achtergrond kleur en niet ergens halverwege stopt in licht paars, ook kan je met gebruik van css 2.0 en png een lichte gradient aanbrengen op de content, wat mij best cool lijkt. De tekst "flowt" nu namelijk niet echt mee met de rest van de layout.
Ten derde, dat witte vlak daarboven zou je eventueel nog een zoekbalk bij kunnen aanbrengen.
Ten vierde, zoals ik al zij "flowt" de content niet echt mee met de layout d.m.v. de gradient ook moet je dat box effect weer op een manier verwerken in de layout.
Hopelijk heb je er wat aan. ;]