Sujet Précédent Sujet Suivant

PB CSS/HTML fonction onmouseover/onmouseout

Fermé
cocomel - 4 janv. 2010 à 13:15
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 - 5 janv. 2010 à 12:44
Bonjour,
je débute dans la création de site web et je me retrouve face à un petit problème de décalage d'image lors de l'ajout de fonction onmouveover/onmouveout.
un petit trait apparait entre mes boutons de sous-menus (utilisés en .jpg),créant un décalage, alors que je n'ai aucun padding, ni bordure.
je pense qu'il s'agit d'un problème de pré-formatage htlm ou css.
quelqu'un pour m'aider?

je vous joint les codes :
---------------------------------------------------------------------------------------------------------------------------
[b]HTML[/b]

<!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=iso-8859-1" />
<title>index</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style3
{
font-family: "Times New Roman", Times, serif;
font-size: 13px;
}

-->
</style>
</head>

<body>

<div id="bannière">
<div class="version">
<div align="right" class="Style3"> <u>Version française</u> / <u>English version</u></div>
</div>
</div>


<div id="menu_top">

<script type="text/javascript">
function afficheimage (adr_img,url_img,larg,haut)
{
document.images [adr_img].src = url_img;
document.images [adr_img].width = larg;
document.images [adr_img].height = haut;
}
</script>


<a href=""
onmouseover="afficheimage('0','images/intro/bt_accueil_neg.jpg','228','28')"
onmouseout="afficheimage('0','images/intro/bt_accueil.jpg','228','28')"/>
<img src="images/intro/bt_accueil.jpg" alt="indisponible" width="228" height="28" border="0"/>
</a>
<a href=""
onmouseover="afficheimage('1','images/intro/bt_intro_neg.jpg','125','28')"
onmouseout="afficheimage('1','images/intro/bt_intro.jpg','125','28')"/>
<img src="images/intro/bt_intro.jpg" alt="indisponible" width="125" height="28" border="0"/>
</a>
<a href=""
onmouseover="afficheimage('2','images/intro/bt_projets_neg.jpg','124','28')"
onmouseout="afficheimage('2','images/intro/bt_projets.jpg','124','28')"/>
<img src="images/intro/bt_projets.jpg" alt="indisponible" width="124" height="28" border="0"/>
</a>
<a href=""
onmouseover="afficheimage('3','images/intro/bt_portfolio_neg.jpg','123','28')"
onmouseout="afficheimage('3','images/intro/bt_portfolio.jpg','123','28')"/>
<img src="images/intro/bt_portfolio.jpg" alt="indisponible" width="123" height="28" border="0"/>
</a>
<a href=""
onmouseover="afficheimage('4','images/intro/bt_contact_neg.jpg','177','28')"
onmouseout="afficheimage('4','images/intro/bt_contact.jpg','177','28')"/>
<img src="images/intro/bt_contact.jpg" alt="indisponible" width="177" height="28" border="0"/>
</a></div>



<div id="corps">
<div class="texte">
<div align="left"></div>
</div>
</div>


<div id="bas">
<div class="droits">
<div align="right" class="Style3">
<div align="center">Tous Droits Réservés - Reproduction Inderdite - 2009 - Copyright ***.fr</div>
</div>
</div>
</div>
</body>

</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------
[b]CSS[/b]

body{
margin-top:0px;
margin-bottom:0px;
}

#bannière
{
background:url(images/banniere.jpg);
width:800px;
height:164px;
background-position:top;
background-position:center;
background-repeat:no-repeat;
margin:auto;
}
.version
{
padding-right:40px;
padding-top:5px;

}

#menu_top
{
width:810px;
height:28px;
margin:auto;
padding:0px;
}

#corps
{
background:url(images/fond.jpg);
width:608px;
height:353px;
background-position:center;
background-repeat:no-repeat;
background-attachment:scroll;
background-attachment:fixed;
margin:auto;
margin-top:25px;
}
.texte
{
width:558px;
height:353px;
padding-top:15px;
padding-bottom:15px;
padding-right:35px;
padding-left:20px;
text-align:justify;
}


.barre
{
width:30px;
height:353px;
overflow:scroll;
}


#bas
{
background:url(images/bas.jpg);
width:800px;
height:34px;
background-position:bottom;
background-position:center;
background-attachment:fixed;
margin:auto;
margin-top:25px;
}
.droits
{
padding-top:10px;
}
----------------------------------------------------------------------------------------------------------------------------------------------
merci d'avance et à bientôt
A voir également:

1 réponse

Réponse 1 / 1
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
5 janv. 2010 à 12:44
bonjour,

oubli ie 6 déjà... et ie tout cour si tu peux te le permettre

utilises firefox safari chrome ou opera

ie c'est de la merde regarde sur la page wikipédia les résultat à l'acid 3 test

https://fr.wikipedia.org/wiki/Acid3

personnellement j'ai moins opéra parce qu'il n'y a aucun moyen de le faire gérer border-radius pour l'instant

mon préféré étant firefox surtout pour certain add-on comme :

ad-block : qui bloque toutes les publicité

html validator : qui affiche directement le nombre d'erreur dans la page et fais gagner beaucoup de temps pour la validation w3c

firebug : qui permet de débugger le javascript entre autre

web developer : qui devient vite indispensable également

utiliser un de ces navigateurs est déjà plus pratique, rapide et sur que d'utiliser ie

mais surtout pour celui qui fait un site, ca permet de ne faire qu'un html, un css et ca simplifie énormément le javascript

surtout que si tu ne code que sous ie6 la plupart de tes visiteurs vont avoir des surprises !
-1

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Que veut dire <p>&nbsp;</p>?
quinn mallory -
prosthetiks -

3 réponses