Probème d'allignement des div [Résolu]

Fermé
darox Messages postés 31 Date d'inscription dimanche 2 octobre 2011 Statut Membre Dernière intervention 7 février 2012 - Modifié par darox le 4/12/2011 à 13:58
Bonjour,
Voila j'ai un petit problème, et je solliciterais bien votre aide =)
Voici un aperçu que ça donne sans css ni rien d autre:
http://moogafire.atspace.eu/test1.php
Mon problème:Je désirerais que les icônes soit alignés a l'horizontal et non a la vertical, et que les div s'ouvrent juste en bas au milieu des icônes comme http://moogafire.atspace.eu/ (image 1,2,3,4,13,14).


Voici le javascript:
<div onmouseover="affiche('ContenuB')" onmouseout="cache(event,'ContenuB')"> 
<img src="./icones/env.jpg"> 
<div id="ContenuB" style="display:none;"><div class="bubble"><FONT color="black"><b>Choisissez votre fourniseur d'email:</b></FONT></div><br/> 
<a href="http://rms.orange.fr%2F' target='_blank' rel='nofollow'>http://id.orange.fr/auth_user/bin/auth0user.cgi?date=1316900701&skey=840d4695dcd715840eb822a6e804a3f5&url=http://rms.orange.fr%2F"><img src="./icones/orange.jpg"></a> 
<a href="https://login.live.com/login.srf?wa=wsignin1.0&rpsnv=11&ct=1316900839&rver=6.1.6206.0&wp=MBI&wreply=http:%2F%2Fmail.live.com%2Fdefault.aspx&lc=1036&id=64855&mkt=fr-FR&cbcxt=mai&snsc=1"><img src="./icones/msn.jpg"></a> 
<a href="https://imp.free.fr/"><img src="./icones/free.jpg"></a> 
<a href="https://mail.yahoo.com/"><img src="./icones/ymail.jpg"></a> 
<a href="https://accounts.google.com/ServiceLogin?service=mail&passive=true&rm=false&continue=https://mail.google.com/mail/&ss=1&scc=1<mpl=default<mplcache=2&emr=1&osid=1"><img src="./icones/gmail.jpg"></a> 
</div> </div> 
</div> 

<div onmouseover="affiche('ContenuD')" onmouseout="cache(event,'ContenuD')"> 
<img src="./icones/tchat.jpg"> 
<div id="ContenuD" style="display:none;"><div class="bubble"><FONT color="black"><b>Choisissez votre reseau social:</b></FONT></div><br/> 
<a href="https://myspace.com/"><img src="./icones/myspace.jpg"></a> 
<a href="https://twitter.com/"><img src="./icones/twitter.jpg"></a> 
<a href="https://www.facebook.com/"><img src="./icones/facebook.jpg"></a> 
</div></div> 
</div> 

<div onmouseover="affiche('ContenuC')" onmouseout="cache(event,'ContenuC')"> 
<img src="./icones/video.jpg"> 
<div id="ContenuC" style="display: none;border: 0px solid black";>  
<br/><div class="bubble"><FONT color="black"><b>Choisissez votre site de videos:</b></FONT></div><br/> 
<a href="https://www.youtube.com/"><img src="./icones/youtube.jpg"></a> 
<a href="https://www.dailymotion.com/fr"><img src="./icones/dailymotion.jpg"></a> 
</div>  
</div></div> 

<div onmouseover="affiche('ContenuE')" onmouseout="cache(event,'ContenuE')"> 
<img src="./icones/mus.jpg"> 
<div id="ContenuE" style="display: none;border: 0px solid black";>  
<br/><div class="bubble"><FONT color="black"><b>Choisissez votre site de musique:</b></FONT></div><br/> 
<a href="http://grooveshark.com/"><img src="./icones/groov.jpg"></a> 
<a href="https://www.deezer.com/fr/"><img src="./icones/deezer.jpg"></a> 
</div>  
</div></div> 

<div onmouseover="affiche('ContenuF')" onmouseout="cache(event,'ContenuF')"> 
<img src="./icones/tra.jpg"> 
<div id="ContenuF" style="display: none;border: 0px solid black";>  
<br/><div class="bubble"><FONT color="black"><b>Choisissez votre site de traduction:</b></FONT></div><br/> 
<a href="https://www.reverso.net/text_translation.aspx?lang=FR"><img src="./icones/rev.jpg"></a> 
<a href="https://translate.google.com/"><img src="./icones/gt.jpg"></a> 
</div>  
</div></div> 

<div onmouseover="affiche('ContenuA')" onmouseout="cache(event,'ContenuA')"> 
<img src="./icones/reg.jpg"> 
<div id="ContenuA" style="display:none; border:none; margin: auto; padding: auto; ">  
<br/><div class="bubble"><FONT color="black"><b>Veuillez cliquer sur le fond que vous désirez :</b></FONT></div><br/> 
 <?php 
 $i = 0; 
 $dir=opendir("background/"); 
 while($file = readdir($dir)){ 
  if(!in_array($file,array(".",".."))){ 
   if((preg_match("/~/", $file)==false) && (preg_match("/.jpg/", $file)==true)) 
   { 
$i++; 
?> 

<a href='?fond=<?php echo $file;?>'> 
<img style='width:200px;height:150px;' src='background/mini/mini_<?php echo $file; ?>' /> 
</a> 
<?php 
} 
} 
 } 
 ?> 


</div>  

<div id="bg"> 
 <table cellspacing="0" cellpadding="0" > 
 <tr> 
 <td> 
 <img src="./background/<?php echo $fond; ?>"> 
 </td> 
 </tr> 
 </table> 
</div> 

<script type="text/javascript"> 
function affiche(id) { 
  document.getElementById(id).style.display = ''; 
} 
function cache(e,id) { 
  var relTarg = e.relatedTarget || e.toElement; 
  if(!isChildOf(relTarg,document.getElementById('conteneur'))) { 
    document.getElementById(id).style.display = 'none'; 
  } 
} 
function isChildOf(child,par) { 
  while(child!=document) { 
    if(child==par) { return true; } 
    child = child.parentNode; 
  } 
  return false; 
} 
</script>


Je vous remercie d'avance de votre aide,
Darox.