Je comprend pas pourquoi il y a une différence d'affichage entre IE 6 et Firefox. Pouvez vous m'aider à la réduire? Premièrement la grosseur de la police est différente, dans Firefox il y a une ligne en plus en haut du texte et dans IE pour certaine page, la première ligne semble un peu coupée.
Fichier Basic.css
Fichier HTML
NB: Les images de fond du menu sont bleues, j'ai donc changer un peu le code pour que vous puissiez voir le tout sans problème.
Modifié par bob_514450 (23 Jun 2006 - 05:47)
Fichier Basic.css
body { color: black; background-color: transparent; }
a { }
.on { font-size: 8pt; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; background-color: transparent; text-decoration: none; color: #ff0;}
.adresse { line-height: 8pt; text-align: center; }
.off { font-size: 8pt; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; background-color: transparent; text-decoration: none; color: white;}
#menu { background-color: transparent; text-align: center; position: absolute; top: 140px; left: 0; width: 160px; z-index: 3; margin: 0; padding: 0; display: inline; }
#propos,#tapis,#fauteuils,#ceramiques,#location { line-height: 8pt; background-color: transparent; width: 160px; margin: 0; padding-top: 12px; padding-bottom: 12px; border-top: thin groove #ccc; display: block; }
#rejoindre { line-height: 8pt; background-color: transparent; width: 160px; margin: 0; padding-top: 12px; padding-bottom: 12px; border-top: thin groove #ccc; border-bottom: thin groove #ccc; display: block; }
#fauteuils2,#tapis2 { line-height: 8pt; background-color: #009; padding-top: 12px; width: 160px; margin: 0; padding-bottom: 10px; border-top: thin groove #ccc; display: block; }
#cuir,#tissus { line-height: 8pt; background-color: #009; text-align: left; width: 90px; margin: 0; padding-bottom: 10px; padding-left: 70px; display: block; }
#residentiel,#commercial,#atelier { line-height: 8pt; background-color: #009; text-align: left; width: 90px; margin: 0; padding-bottom: 10px; padding-left: 70px; display: block; }
#texte { background-color: transparent; text-align: justify; position: absolute; top: 120px; left: 200px; width: 770px; z-index: 2; display: block; }
#fond1 { background-color: #0000cc; position: absolute; top: 0; left: 0; width: 160px; height: 560px; z-index: 1; display: block; }
#fond2 { background-color: #0000cc; position: absolute; top: 0; left: 160px; width: 840px; height: 80px; z-index: 1; display: block; }
#fond3 { background-color: #0000cc; position: absolute; top: 80px; left: 160px; width: 80px; height: 80px; z-index: 1; margin: 0; padding: 0; display: block; }
p { font-size: 12pt; font-family: Arial, Verdana, Helvetica, sans-serif; }
h3 { font-size: 14pt; font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; text-decoration: none; }
Fichier HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="generator" content="Adobe GoLive" />
<title>A-Plus Nettoyage</title>
<link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
function adresse()
{
a= ".qc";
b= "in";
c= "aplus";
d= "mai";
e= ".ca";
f= "ge";
g= "fo";
h= "nettoya";
i= "lto:";
j= "@";
total= d+i+b+g+j+c+h+f+a+e;
parent.location= total;
}
</script>
</head>
<body>
<div id="fond1">
<img alt="" src="images/fond_1024_1.gif" width="160" height="560" />
</div>
<div id="fond2">
<img alt="A-Plus Nettoyage" src="images/fond_1024_2.gif" width="840" height="80" />
</div>
<div id="fond3">
<img alt="" src="images/fond_1024_3.gif" width="80" height="80" />
</div>
<div id="menu">
<div id="propos">
<a href="index_1024.html" class="off" onmouseover="this.className='on';" onmouseout="this.className='off';">À propos de nous</a>
</div>
<div id="tapis">
<a href="tapis_1024.html" class="off" onmouseover="this.className='on';" onmouseout="this.className='off';">Nettoyage de tapis</a>
</div>
<div id="fauteuils">
<a href="fauteuils_1024.html" class="off" onmouseover="this.className='on';" onmouseout="this.className='off';">Nettoyage de fauteuils</a>
</div>
<div id="ceramiques">
<a href="ceramiques_1024.html" class="off" onmouseover="this.className='on';" onmouseout="this.className='off';">Nettoyage de céramiques</a>
</div>
<div id="location">
<a href="location_1024.html" class="off" onmouseover="this.className='on';" onmouseout="this.className='off';">Location de tapis</a>
</div>
<div id="rejoindre">
<a href="rejoindre_1024.html" class="on">Pour nous rejoindre</a>
</div>
</div>
<div id="texte">
<h3 class="adresse">Pour nous rejoindre</h3>
<p class="adresse">A-Plus nettoyage</p>
<p class="adresse">*************</p>
<p class="adresse">Montréal (Québec) *** ***</p>
<p class="adresse">Téléphone : (514) ***-****</p>
<p class="adresse">Télécopieur : (514) ***-****</p>
<p class="adresse">Courriel : <a href="#" onclick="javascript:adresse()">Cliquez ici</a></p>
</div>
</body>
</html>
NB: Les images de fond du menu sont bleues, j'ai donc changer un peu le code pour que vous puissiez voir le tout sans problème.
Modifié par bob_514450 (23 Jun 2006 - 05:47)
