1. Accueil
  2. Forum Codes-Sources
  3. PHP
Sujet Précédent Sujet Suivant

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
A voir également:

2 réponses

Réponse 1 / 2
Messages postés
3
Date d'inscription
mardi 28 juin 2005
Statut
Membre
Dernière intervention
24 mai 2010
Voici l'url contenant le menu en question:

http://www.tgvonona.org/index.php?option=com_content&view=article&id=73&Itemid=97



ramhe
Réponse 2 / 2
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
Répondre Posez votre question