Bonjour!
Je suis débutant en conception de site, et alsacréation fut d'une grande aide pour guider mes premiers pas dans ce monde !!!
Mon probléme est que l'image sous mon menu se décale vers le bas de la page au chargement de celle-ci, une fois que l'on survole le menu avec le curseur elle revient a sa place " normale"!!
Ce problème n'apparait que sous IE, avec firefox elle reste à sa place.
Si vous aviez une idée pour résoudre cela, vous me seriez d'une grande aide!!
En vous remerciant d'avance, et félicitation pour ce site
Vous pouvez voir cette erreur là : http://www.iecs.fr
le code htm :
et le CSS:
Je suis débutant en conception de site, et alsacréation fut d'une grande aide pour guider mes premiers pas dans ce monde !!!
Mon probléme est que l'image sous mon menu se décale vers le bas de la page au chargement de celle-ci, une fois que l'on survole le menu avec le curseur elle revient a sa place " normale"!!
Ce problème n'apparait que sous IE, avec firefox elle reste à sa place.
Si vous aviez une idée pour résoudre cela, vous me seriez d'une grande aide!!
En vous remerciant d'avance, et félicitation pour ce site
Vous pouvez voir cette erreur là : http://www.iecs.fr
le code htm :
<body>
<div id="entete">
<img src="Entete_logo.jpg" width="760" height="150"alt="logo">
<h1>Installation et Exploitation de Carrières et de Sablières.</h1>
</div>
<div id="page">
<div id="pagetitre">
<h2>Présentation</h2>
</div>
<div id="gauche">
<ul class="menugauche">
<li><dl>
<dt><a href="index.htm" title="Accueil">Accueil</a></dt>
</dl></li>
<li><dl>
<dt><a href="activites.htm" title="Activites">Activités</a></dt>
</dl></li>
<li><dl>
<dt><a href="realisation.htm" title="Réalisations">Nos Réalisations:</a></dt>
<dd><ul>
<li><a href="installation.htm">Installations</a></li>
<li><a href="real2d.htm">Réalisations 2D</a></li>
<li><a href="real3d.htm">Réalisations 3D</a>
</li></ul></dd>
</dl></li>
<li><dl>
<dt><a href="part.htm" title="Partenaires">Nos Partenaires</a></dt>
</dl></li>
<li><dl>
<dt ><a href="clients.htm" title="Clients">Nos Clients</a></dt>
</dl></li>
<li><dl>
<dt><a href="Materielo.htm" title="Matériel d'Occasion">Matériel d'Occasion:</a></dt>
<dd><ul><li>
<a href="alimentateurs.htm">Alimentateurs</a></li>
<li><a href="broyeurs.htm">Broyeurs</a></li>
<li><a href="concasseurs.htm">Concasseurs</a></li>
<li><a href="cribles.htm">Cribles</a></li>
<li><a href="malaxeurs.htm">Malaxeurs</a></li>
<li><a href="tremies.htm">Trémies</a></li>
<li><a href="matdiv.htm">Matériels Divers</a>
</li></ul></dd>
</dl></li>
<li><dl>
<dt><a href="contact.htm" title="contact">Nous Contacter</a></dt>
</dl> </li>
</ul>
<div id="logo">
<a href="contact.htm"><img src="logoiecs.jpg" alt="Contact IECS" width="150" height="140"> </a>
<div class="compteur" align="center"><img src="http://pages.perso.wanadoo.fr/client/php/compteur.php?url=iecs&df=compteur1&dd=C&frgb=black&ft=0&tr=y&pad=y&comma=n">
</div>
</div>
</div>
<div id="contenu">
<div class="paradroite">
<img src="photo11.jpg" alt="" width="280" height="200">
<p>
<br>
<br>
La SARL <strong>I.E.C.S.</strong> s'est implantée à Faverney, Haute-Saône (70) en mars 1985.<br>
Elle compte aujourd'hui une équipe de 15 personnes, toutes qualifiées et disponibles pour les longs déplacements et un bureau d'études pour la conception de projets 2D et 3D.</p>
<br>
<br>
</div>
<div class="para">
<p>
La société est principalement impliquée dans la fabrication, le montage et la maintenance des matériels de carrière et sablières.
</p>
<br>
<p> Ses activités, étendues à toute la France, sont les suivantes: </p>
<br>
</div>
<div class="paragauche">
<div align="left"><img src="photo12.jpg" alt="" width="280" height="200">
<br>
<p align="left">· Fabrication de matériel: convoyeurs, châssis, ... <br>
· Montage et démontage d'installations,<br>
· Remise en état et fabrication de pièces,<br>
· Dépannage,<br>
· Modifications.</p>
<br>
<br> <br>
<br> <br>
<br>
</div>
</div>
</div>
<div id="pied">
<a href="mailto:matthieu.iecs@wanadoo.fr">Contact MG</a> | © SARL IECS 2005 -- MG
</div>
</div>
</body>et le CSS:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
padding: 0px;
position: absolute;
width: 760px;
left: 380px;
margin-left: -380px;
margin-top: 3px;
background: url("Arr_plan.jpg") fixed;
}
#entete {
height: 190px;
width: 760px;
background: #336698;
color: #336699;
border-right:3px solid #336699;
border-left:3px solid #336699;
border-top: 5px solid #336699;
}
#page {
position: absolute;
width: 760px;
left: 380px;
margin-left: -380px;
background:#ffffff;
color:#000000;
border:3px solid #336699;
}
#contenu {
margin-left: 150px;
border-left:2px solid #ccd2d2;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 25px;
padding: 10px 0px 0px 20px;
border-top: 2px solid #cccccc;
}
#compteur{
float: right;
}
#pied p{
float: right;
padding-right:15px;
font: small Verdana,sans-serif;
}
p {margin: 0px 10px 10px 10px;
}
h1{
text-align: center;
font: bold 200% Arial,sans-serif;
color: #fffffc;
background:#336699;
margin: 0px;
padding: 5px;
}
#pagetitre h2{
border-bottom:2px solid #ccd2d2;
font: bold 190% Arial,sans-serif;
color: #336699;
margin: 0px;
padding: 5px 30px 5px 5px;
background:#ffffff;
text-align: right;
}
h3{
font: bold 150% Arial,sans-serif;
color: #666699;
background:#ffffff;
text-indent: 1em;
text-decoration: none;
padding:0;
}
.menugauche dl, dt, dd, ul, li {
display: block;
padding:0;
list-style-type: none;
margin: 0px;
font: small Verdana,sans-serif;
background: #ffffff;
color: #336699;
text-decoration: none;
}
.menugauche {
margin: 0px 0 5px 0;
width: 150px;
}
.menugauche dt {
line-height: 18px;
text-indent: 3px;
font-weight: bold;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
text-decoration: none;
}
.menugauche li {
text-indent: 10px;
line-height: 18px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
text-decoration: none;
}
.menugauche li a{
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
padding: 0px;
margin: 0px;
color: #000066;
background:#000063;
background: url("Arr_menu.jpg");
text-decoration: none;
}
.menugauche li a:hover,.menugauche dt a:hover {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background: url("a_menu.gif");
font-weight: bold;
text-decoration: none;
margin: 0px;
padding: 0px;
}
.menugauche dt a {
display: block;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font-weight: bold;
padding: 0px;
margin: 0px;
background: url("Arr_menu.jpg");
text-decoration: none;
}
.paradroite p{
padding: 0px 10px 0px 0px;
line-height: 20px;
font-size: 100%;
margin-left: 10px;
}
.paradroite {
padding: 10px 10px 0px 0px;
min-height: 240px;
height: 240px;
}
.paradroite img{
float: left;
padding: 0px 15px 0px 10px;
}
.paracentre {
padding: 10px 0px 10px 25px;
font-size: 100%;
}
.paracentre p{
padding: 0px 0px 10px 10px;
font-size: 100%;
}
.paracentre img{
vertical-align: middle;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.paragauche {
min-height: 250px;
height: 250px;
}
.paragauche p {
margin-top: 0px;
padding: 0px 0px 0px 15px;
font-size: 100%;
line-height: 20px;
}
.paragauche img{
float: right;
padding: 0px 10px 10px 0px;
}
a:link, a:visited{
color: #000066;
text-decoration: none;
}
a:hover{
color: #CC0066;
text-decoration: none;
background:#ffffff;
}
a img {
border: none;
}
.para {
padding: 10px 10px 10px 10px;
min-height: 60px;
height: 60px;
line-height: 20px;
font-size: 100%;
}
.logo {
position: absolute;
}
.para2 {
padding: 0px 10px 0px 10px;
min-height: 480px;
height: 480px;
}
div#galerie,div#galerie2,div#galerie3,div#galerie4 {
width: 575px ;
background: #ffffff ;
color: #666699;
border: 1px solid #dcb ;
padding: 10px ;
margin: 10px 5px ;
height: 220px;
min-height: 220px;
}
ul#galerie_mini,ul#galerie_mini2,ul#galerie_mini3,ul#galerie_mini4 {
margin: 0px;
padding: 0px;
list-style-type: none ;
}
ul#galerie_mini li,ul#galerie_mini2 li,ul#galerie_mini3 li,ul#galerie_mini4 li {
float: left ;
}
ul#galerie_mini li a img,ul#galerie_mini2 li a img,ul#galerie_mini3 li a img,ul#galerie_mini4 li a img {
margin: 2px 1px;
padding: 0px 0px 0px 0px;
border: 1px solid #dcb ;
height: 60px;
width: 60px ;
}
dl#photo,dl#photo2,dl#photo3,dl#photo4 {
margin: 0px 0px 0px 0px ;
width: 280px ;
}
dl#photo dt,dl#photo2 dt,dl#photo3 dt,dl#photo4 dt {
text-align: left ;
color: #dcb ;
background: #ffffff ;
}
dl#photo dd,dl#photo2 dd,dl#photo3 dd,dl#photo4 dd {
margin: 0px ;
}
dl#photo img,dl#photo2 img,dl#photo3 img,dl#photo4 img {
border: 1px solid #dcb ;
height: 220px;
width: 280px ;
}
div#gtitre,div#gtitre2,div#gtitre3,div#gtitre4 {
float: left ;
width: 260px ;
}
div#gphoto,div#gphoto2,div#gphoto3,div#gphoto4 {
float: right ;
width: 260px ;
}