PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

[CSS] Footer niet op goede positie

Door Thomas van Broekhoven op 24-05-2008 18:10
1.953 views
Beste lezers,

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:

.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;
}


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">
<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">
            &copy; Schoonheidssalon Purity <i>by Silverr Webdesign</i>
        	</div>
        </div>
</div>
</body>
</html>


Het gaat in de HTML vooral om het laatste divje.
Alvast bedankt
Thomas van Broekhoven
24-05-2008 18:33
Oplossing gevonden -.-

Kmoest footer een float left meegeven.
?
Onbekende gebruiker
24-05-2008 19:43
Waarom zo'n hooge footer en knoppen? En waarom zo'n stuk wit naast het logo?
?
Onbekende gebruiker
24-05-2008 19:59
Thomas schreef op 24.05.2008 19:51
Omdat dat de eisen van de klant zijn?

Oke, klant is koning. Maar toch....
?
Onbekende gebruiker
24-05-2008 20:14
Daarom mag je een klant nog wel adviseren ;) Bijvoorbeeld dat het scrollen wat iedereen nu moet doen erg gebruikersonvriendelijk is en dat er flink wat loze ruimte is die ongebruikt is ;p Witte ruimte naast het logo is niet zo storend, maar die gigantische knoppen kunnen zeker wel wat kleiner (net als de footer).

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.
Thomas van Broekhoven
24-05-2008 20:32
@ René

Mee eens, ik bespreek het nog met de klant en zal het er is over hebben ;)
Jesper Diovo
24-05-2008 21:52
Het ziet er simpel uit, maar het heeft wel iets.
T
Thijs X
24-05-2008 22:19
Tip:
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 ;)
M
Mitchell
25-05-2008 02:33
Ik snap het concept van de layout wel, maar het is verkeerd aangepakt.

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. ;]

Reageren

Inloggen om te reageren