Bonjour
J'ai aussi un problème à l'affichage de ce menu car le celtre est décalé vers le haut à gauche.
j'ai remarqué que le code html que je colle sur JCE change quand je valide .Le <body onload="menu(6);">
je suis obligé de mettre en blanc la couleur du div "centre" et du div "menu"
Voici l'url: http://www.tgvonona.org/index.php?opti [...] =73&Itemid=97
Code : CSS
#menu
{
width: 300px;
margin-top: 50px;
background-color: #DBDCFF;
border: 1px solid #000000;
}
#menu h2
{
position: absolute;
color: #0000EE;
text-align: center;
font-size: 15px;
}
#menu li
{
position: absolute;
list-style-type: none;
list-style-position: inside;
}
#centre
{
position: absolute;
height: 50px;
width: 50px;
margin: auto;
left: 650px;
top: 300px;
background-color: #ffffff;
border: 1px solid #ffffff;
}
.item
{
position: absolute;
}
Code : JavaScript
var decalage = 0;
var nbBout;
var timer;
function menu(nb)
{
var angle = 360 / nb;
nbBout = nb;
var posX;
var posY;
var rayon = 120;
var centreX = document.getElementById("centre").offsetLeft;
var centreY = document.getElementById("centre").offsetTop;
var lItem = 20;
var i = 1;
var item;
var b;
for(b = 0; b < 360; b += angle)
{
posX = centreX + 25 + rayon * Math.cos(b * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin(b * Math.PI / 180);
item = document.getElementById("item" + i);
item.className = "item";
item.style.top = (posY - lItem / 2) + "px";
item.style.left = (posX - lItem / 2) + "px";
i++;
}
}
function anim()
{
decalage++;
var angle = 360 / nbBout;
var posX;
var posY;
var rayon = 120;
var centreX = document.getElementById("centre").offsetLeft;
var centreY = document.getElementById("centre").offsetTop;
var lCentre = 50;
var lItem = 20;
var i = 1;
var item
var b;
for(b = 0; b < 360; b = b + angle)
{
posX = centreX + 25 + rayon * Math.cos((b + decalage) * Math.PI / 180);
posY = centreY + 25 + rayon * Math.sin((b + decalage) * Math.PI / 180);
item = document.getElementById("item" + i);
item.style.top = (posY - lItem / 2) + "px";
item.style.left = (posX - lItem / 2) + "px";
i++;
}
}
timer = setInterval(anim,50);
function stopanim()
{
clearInterval(timer);
}
function replayanim()
{
timer = setInterval(anim,50);
}
Code : 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" xml:lang="fr" >
<head>
<title>Bienvenue sur le site de Tanora malaGasy Vonona</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="menu" href="menu/menu.css" />
<script type="text/javascript" src="menu/menu.js"></script>
</head>
<body onload="menu(6);">
<div id="menu" onmouseover="stopanim();" onmouseout="replayanim();">
<div id="centre"></div>
<ul>
<li id="item1"><a href="http://www.actumada.mg"><img src="menu/actumada.png" alt="www.actumada.mg" title="www.actumada.mg"/></a></li>
<li id="item2"><a href="http://www.lexpressmada.com/"><img src="menu/lexpressmada.png" alt="www.lexpressmada.com" title="www.lexpressmada.com"/></a></li>
<li id="item3"><a href="http://www.madagate.com"><img src="menu/madagate.png" alt="www.madagate.com" title=" www.madagate.com"/></a></li>
<li id="item4"><a href="http://www.laverite.mg"><img src="menu/laverite.png" alt="www.laverite.mg" title="www.laverite.mg"/></a></li>
<li id="item5"><a href="http://www.madagascar-tribune.com"><img src="menu/madagascar-tribune.png" alt="www.madagascar-tribune.com" title="www.madagascar-tribune.com"/></a></li>
<li id="item6"><a href="http://www.lagazette-dgi.com"><img src="menu/lagazette.png" alt="http://www.lagazette-dgi.com/" title="http://www.lagazette-dgi.com/"/></a></li>
</ul>
</div>
</body>
</html>
ramhe