Infobulles test

<center><table><tr><td><div style="width: 300px; height: 920px; background-color: #414141; text-align: justify; font-size: 9px; color: #EFEFEF;"><img src="http://oi66.tinypic.com/11syrlj.jpg" style="width: 300px; height: 169px;">
<div style="font-family: 'Megrim', cursive; font-size: 15px; color: #C8BCA4; text-align: center;">“ Celui qui assiste en spectateur voit clair, celui qui prend parti se laisse égarer. ”</div>

[center]<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://www.aht.li/2682213/Flow_Like_Water.mp3&t0=Flow Like Water&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" />[/center]

<div style="padding: 25px;"><span style="font-family: 'Patrick Hand SC', cursive; font-size: 20px; color: #C8BCA4;">Caractère <span style="color: #92D764;">★</span></span>
<iframe src="http://tests-tinkerandpeter.forumactif.org/h7-infobulles-fiche-ocean"></iframe>

<span style="font-family: 'Patrick Hand SC', cursive; font-size: 20px; color: #C8BCA4;">Histoire <span style="color: #92D764;">★</span></span>
<div style="width: 250px; height: 140px; overflow: auto;font-size: 12px;"></div>

<div style="font-family: 'Megrim', cursive; font-size: 15px; color: #C8BCA4; text-align: center;">“Un homme est toujours la proie de ses vérités.”</div>

<span style="font-family: 'Patrick Hand SC', cursive; font-size: 20px; color: #C8BCA4;">Nota-Bene du Physique <span style="color: #92D764;">★</span></span>
<div style="width: 250px; height: 100px; overflow: auto;font-size: 12px;"></div></div>
</div></td>
<td><div style="width: 160px; height: 870px; position: relative; left: -5px; padding: 25px; background-color: #669999; font-size: 10px; color: #3C3C3C; text-align: justify; line-height: 13px; border-top-right-radius: 50px; border-bottom-left-radius: 50px;"><div style="font-family: 'Megrim', cursive; font-size: 25px; color: #1F1F1F; text-align: center;">Who I Am</div>
Je me nomme <span style="color: #40731E;"><b>Océan</b></span> et j'ai <span style="color: #40731E;"><b>des millions d'années</b></span>. Je travaille en tant que <span style="color: #40731E;"><b>Dieu Fleuve</b></span> et je suis un <span style="color: #40731E;"><b>Titan</b></span>. Au fait ! Je suis <span style="color: #40731E;"><b>marié</b></span>. Et ma tête (comme elle te plait), c'est celle de <span style="color: #40731E;"><b>Chezem</b></span>, de <span style="color: #40731E;"><b>Shal we Date ? My Sweet Prince</b></span>, me la vole pas j'y tiens !

<img src="http://33.media.tumblr.com/795b79e728f183ae6828376d8dba8bc0/tumblr_nabwdbnlD01qg67clo1_500.gif" style="width: 150px; border: 2px solid #ffffff;">
                   
<span style="color: #40731E;"><b>Surnom :</b></span> Ὠκεανός, Triton
<span style="color: #40731E;"><b>Age :</b></span> ///
<span style="color: #40731E;"><b>Signe Astrologique :</b></span> Scorpion
<span style="color: #40731E;"><b>Groupe Sanguin :</b></span> Ichôr
<span style="color: #40731E;"><b>Lieu de Naissance :</b></span> Mont Othrys
<span style="color: #40731E;"><b>Nationalité :</b></span> Grec
<span style="color: #40731E;"><b>Lieu d'entraînement :</b></span> Othrys
<span style="color: #40731E;"><b>Maître :</b></span> Lui-même
<span style="color: #40731E;"><b>Camps :</b></span> Titan
<span style="color: #40731E;"><b>Rang :</b></span> Titan des Océans
<span style="color: #40731E;"><b>Somâ :</b></span> Paire de poignards


<div style="font-family: 'Megrim', cursive; font-size: 25px; color: #1F1F1F; text-align: center;">And ...</div>
<img src="http://38.media.tumblr.com/0a82662a8b320ed816bd39f09b5c3a59/tumblr_nabwdbnlD01qg67clo3_500.gif" style="width: 150px; border: 2px solid white;"><div style=" width: 172px; height: 120px; overflow: auto;">
<span style="color: #40731E;"><b>Couleur des cheveux :</b></span> Blond
<span style="color: #40731E;"><b>Couleur des Yeux :</b></span> Dorés azuréen
<span style="color: #40731E;"><b>Taille :</b></span> 1,80 m
<span style="color: #40731E;"><b>Poids :</b></span> 75 kg
<span style="color: #40731E;"><b>Signe particulier :</b></span> Des lunettes (uniquement pour lire), ses yeux sont fragiles, recouverts d'un voile, cadeau de naissance de sa mère Gaïa (et parce que l'aîné est toujours le plus choyé au départ) lui permettant de voir correctement sous l'eau.</div>

<div style="font-family: 'Megrim', cursive; font-size: 25px; color: #1F1F1F; text-align: center;">L'auteur</div>
<div style="width: 172px; height: 120px; overflow: auto;">Je suis <span style="color: #40731E;"><b>Gabrielle de Volkan</b></span> et vous pouvez me contacter <a href="http://fullmetalrebirth.forumactif.org/privmsg?mode=post&u=51" style="color: #40731E !important; text-decoration: none !important;">par MP</a>. Mes exigences pour le rôle sont <span style="color: #40731E;"><b>une présence minimum, travailler sur le lien Gaby/Isaac, et que les grandes lignes soient respectées</b></span>. Je verrais l'avenir du personnage <span style="color: #40731E;"><b>plus tard avec celui ou celle qui le prendra</b></span>. Les modifications sont <span style="color: #40731E;"><b>envisageables, essentiellement sur les détails de l'histoire (le comment du pourquoi en gros, justifiant les grandes lignes)</b></span>.
</div>
<center><a href="http://www.never-utopia.com" style="color: #40731E !important; text-decoration: none !important; font-size: 9px;">© Halloween</a></div></center></div></td>
</tr></table></center>
<link href='http://fonts.googleapis.com/css?family=Megrim|Patrick+Hand+SC|Cinzel' rel='stylesheet' type='text/css'>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title></title>
  <style type="text/css">
    
    .infobulle{
    position: relative;z-index: 0;
    text-shadow:0 -1px 1px white;
    }
    
    .infobulle:hover{
    background-color: transparent;z-index: 50;
    box-shadow:0 1px 0 rgba(255,255,255,.4);
    }
    
    .infobulle span{
    position: absolute;
    left: -200px;
    visibility: hidden;
    margin-top:19px;
    margin-left:-20px;
    background:rgba(176,196,222,.6);
    padding:15px;
    border-radius:3px;
    box-shadow:0 0 2px rgba(0,0,0,.5);
    transform:scale(0) rotate(-12deg);
    transition:all .25s;
    opacity:0;
    }
    
    .infobulle span img{
    border: 1px;
    padding: 5px;}
    
    .infobulle:hover span{
    visibility: visible;
    top: Xpx;
    left: 35px;
    width: 150px;
    height: 100px;
    border-bottom-left-radius: 50px;
    border-top-right-radius: 50px;
    -webkit-border-bottom-left-radius: 50px;
    -webkit-border-top-right-radius: 50px;
    transform:scale(1) rotate(0);
    opacity:1;
    }
    
  </style>
</head>

<body>

<!-- Menu de navigation du site -->


<!-- Contenu principal -->

  <table align="center"><tr><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td></tr>
  <tr><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td></tr>
  <tr><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td><td><div class="infobulle"><img class="imgwidget1" src="http://img11.hostingpics.net/pics/369189cosmos.jpg" >
   <span>Contenu de la bulle</span></div></td></tr></table>

<!-- Signer et dater la page, c'est une question de politesse! -->
<address></address>

</body>
</html>