Bonjour,
Je suis débutante en java script. pour mon site personnel j'ai réalisé un menu déroulant(qui marche enfin:)). Le problème c'est que il se déplace en fonction de la dimension de l'écran de l'ordinateur ou de la fenêtre.
Merci d'avance pour votre aide.
Voila mon site: www.alina-creations.com
Le code source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type='text/javascript'>
function afficher(nom){
//alert(nom);
document.getElementById(nom).style.display="block";
}
function supprimer(nom){
//alert(nom);
document.getElementById(nom).style.display="none";
}
</script>
<style type="text/css">
#menu{
position :absolute;
z-index:10;
left:560px;
top:126px;
}
.onglet{
postion:relative;
float:left;
}
#accueil{
display:none;
background:#FFFFFF;
width:65px;
}
#publicité{
display:none;
background:#FFFFFF;
width:90px;
}
#art{
display:none;
background:#FFFFFF;
width:61px;
}
#cv{
display:none;
background:#FFFFFF;
width:31px;
}
#contact{
display:none;
background:#FFFFFF;
width:66px;
}
#menuv{
position :absolute;
z-index:10;
left:410px;
top:300px;
width:106px;
}
.ongletv{
postion:relative;
float:left;
}
#publicitév{
display:none;
background:#FFFFFF;
width:106px;
}
#artv{
display:none;
background:#FFFFFF;
width:61px;
}
#cvv{
display:none;
background:#FFFFFF;
width:31px;
}
#contactv{
display:none;
background:#FFFFFF;
width:66px;
</style></head>
<body>
<div id ="menu">
<div class="onglet">
<a href="index.html" target="_self"><img src="site/menu/menu_01.gif" border="0"></a></div>
<div class="onglet"
onmouseover="afficher('publicité')";
onmouseout= "supprimer('publicité')";>
<img src="site/menu/menu_02.gif " border="0">
<div id="publicité">
<a href="pubspage.php?page=0" target="_self"><img src="site/menu/menu_07.gif" border="0"><br/></a>
<a href="airaffiches.php?page=7" target="_self"><img src="site/menu/menu_10.gif" border="0"><br/></a>
<img src="site/menu/menu_12.gif" border="0"><br/>
<img src="site/menu/menu_14.gif" border="0"><br/>
</div></div>
<div class="onglet"
onmouseover="afficher('art')";
onmouseout= "supprimer('art')";>
<img src="site/menu/menu_03.gif" border="0">
<div id= "art">
<a href="peinturepage2.php?page=0"><img src="site/menu/menu_08.gif" border="0"><br/></a>
<a href="dessinpage.php?page=14"><img src="site/menu/menu_11.gif" border="0"><br/></a>
<a href="tapisseriepage.php?page=0"><img src="site/menu/menu_13.gif" border="0"><br/></a>
</div></div>
<div class="onglet">
<a href="cvpage.html"><img src="site/menu/menu_04.gif" border="0"></div>
<div class="onglet">
<a href="contactpage.html"><img src="site/menu/menu_05.gif" border="0"></a></div>
</div>
<div id ="menuv">
<div class="ongletv" onmouseover="afficher('publicitév')"; >
<img src="site/menu/menu2_01.jpg" />
<div id="publicitév" onmouseout= "supprimer('publicitév')";>
<a href="pubspage.php?page=0" target="_self"><img src="site/menu/menu_07.gif" border="0"></a><br/>
<a href="airaffiches.php?page=7" target="_self"><img src="site/menu/menu_10.gif" border="0"><br/></a>
<img src="site/menu/menu_12.gif" border="0"><br/>
<img src="site/menu/menu_14.gif" border="0"><br/>
</div>
</div>
<div class="ongletv"
onmouseover="afficher('artv')";><img src="site/menu/menu2_02.jpg" />
<div id= "artv" onmouseout= "supprimer('artv')";>
<a href="peinturepage2.php?page=0"><img src="site/menu/menu_08.gif" border="0"><br/></a>
<a href="dessinpage.php?page=14"><img src="site/menu/menu_11.gif" border="0"><br/></a>
<a href="tapisseriepage.php?page=0"><img src="site/menu/menu_13.gif" border="0"><br/></a>
</div></div>
<div class="ongletv">
<a href="cvpage.html"><img src="site/menu/menu2_03.jpg" border="0"/></div>
<div class="ongletv">
<a href="contactpage.html"><img src="site/menu/menu2_04.jpg" border= "0"/></a></div>
</div>
<table width="751" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="751"><img src="site/images/alinapaun.jpg" width="750" height="111"></td>
</tr>
<tr>
<td><table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="435"><img src="site/images/book.jpg" width="435" height="59"></td>
<td width="54" valign="top"><a href="index.html" target="_self"></a></td>
<td width="51" valign="top"><a href="airaffiches.php?page=7" target="_self"></a></td>
<td width="49" valign="top"><a href="pagefeu.html" target="_self"></a></td>
<td width="51" valign="top"><a href="peinturepage2.php?page=0" target="_self"></a></td>
<td width="61" valign="top"><a href="tapisseriepage.php?page=0" target="_self"></a></td>
<td width="192" valign="top"><a href="contactpage.html" target="_self"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="318" height="366" align="center"><p><img src="site/images/imagesaccueil.jpg" width="187" height="366"></p> </td>
<td width="141"><table width="122" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="122" align="left" valign="middle"><a href="airaffiches.php?page=7" target="_self"></a></td>
</tr>
<tr>
<td align="left"><a href="pagefeu.html" target="_self"></a></td>
</tr>
<tr>
<td align="left"><a href="peinturepage2.php?page=0" target="_self"></a></td>
</tr>
<tr>
<td height="27" align="left"> <a href="tapisseriepage.php?page=0" target="_self"></a></td>
</tr>
</table>
<p> </p>
<p> </p></td>
<td width="291"><p> </p>
<p> </p>
<p><img src="site/images/bienvenue.jpg" width="291" height="113"></p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>