Problème d'affichage menu circulaire css

Signaler
Messages postés
3
Date d'inscription
mardi 28 juin 2005
Statut
Membre
Dernière intervention
24 mai 2010
-
Messages postés
3
Date d'inscription
mardi 28 juin 2005
Statut
Membre
Dernière intervention
24 mai 2010
-
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
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>











<li id="item1">http://www.actumada.mg</li>
<li id="item2">http://www.lexpressmada.com/</li>
<li id="item3">http://www.madagate.com</li>
<li id="item4">http://www.laverite.mg</li>
<li id="item5">http://www.madagascar-tribune.com</li>
<li id="item6">http://www.lagazette-dgi.com</li>




</html>


ramhe

2 réponses

Messages postés
3
Date d'inscription
mardi 28 juin 2005
Statut
Membre
Dernière intervention
24 mai 2010

Messages postés
3
Date d'inscription
mardi 28 juin 2005
Statut
Membre
Dernière intervention
24 mai 2010

merci à vous tous
le problème est résolu


ramhe