Problème de positionnement d'une div

poupilou

WRInaute impliqué
Salut à tous,

J'ai un site qui se compose d'une partie haute sur toute la largeur (1000px), dessous on trouve la partie centrale et à droite de cette partie centrale un menu d'une largeur de 160px, bref rien de bien compliqué comme architecture.

Dans la partie centrale j'affiche un tableau html (créé dynamiquement en php) d'une quinzaine de lignes listant mes produits, je souhaite lorsque qu'on passe la souris sur une de ces lignes que les infos détaillés de mes produits s'affichent dans une div en haut de mon menu.

J'arrive à faire cela mais en positionnant cette div avec une position:absolute;top:215px;right:333px;width:160px; mon problème c'est qu'en fonction de la résolution d'écran cette div se déplace à gauche et chevauche mon tableau html, comment faut-il faire pour quelle reste à sa place dans mon menu ?

J'ai essayé de positionner cette div avec un float:right; et float:left; à la place d'une position:absolute; mais elle ne s'affiche plus dans mon menu mais dans la partie centrale.

Voici mon code html pour les lignes de mon tableau :
Code:
echo "<tr onmouseover=\"swicht('details_".$voir2[num]."');swicht('menu_tooltip_2');swicht('menu_tooltip');\" onmouseout=\"swicht('menu_tooltip_2');swicht('menu_tooltip');swicht('details_".$voir2[num]."');\">
.....
</tr>

Le code javascript :
Code:
function swicht(id){
 obj = document.getElementById(id);
 if(obj.style.display=='block'){obj.style.display='none';}else{obj.style.display='block'}
}

Le code de ma div qui se situe dans la partie centrale, sous mon tableau :
Code:
echo "<div id=\"details_".$voir2[num]."\" class=\"detail_tooltip\" style=\"display:none\">
*** infos détaillés de mes produits ****
</div>

Et le code qui se situe dans mon menu :
Code:
<div id="menu_tooltip_2" style="display:block">
**** Affichage des infos détaillés de mes produits ****
</div>
<div id="menu_tooltip" style="display:block">
**** Affichage des rubriques de mo site ****
</div>

Mon css :
Code:
.detail_tooltip{position:absolute;top:215px;right:333px;width:155px;padding:7px;margin:3px;margin-bottom:10px;margin-top:5px;text-align:center;vertical-align:top;font-size:90%;}

Quelqu'un peut-il m'aider à trouver la solution ?

D'avance merci.

Bruno
 

spout

WRInaute accro
T'as pas une démo en ligne à nous montrer ?
Quand on vois du code comme ça on a besoin de motilium pr s'en remettre :mrgreen:
 

poupilou

WRInaute impliqué
Merci Spout pour ta réponse mais tu n'auras pas de besoin d'absorber du motilium cette fois car j'ai trouvé une solution et utilisant de l'ajaxilium :mrgreen:
 

Discussions similaires

Haut