Sujets similaires

Bonjour

,
j'essaye de mettre en page la liste du staff. Seulement, je n'arrive pas à faire ce que je veux ><. J'aimerai que les Administrateurs et le fondateur soit sur la même ligne et que les trois modérateurs se trouvent dessous mais impossible. J'ai beau élargir le cadre, cela ne change rien.

Spoiler:

Code:: <br><br><DIV style="WIDTH: 128px; HEIGHT: 160px; padding:5px; text-align: justify; border:5px #9B957C solid;-moz-border-radius-topright : 15x; -moz-border-radius-bottomleft : 15px;background-color:#9B957C;"><a class="imginfo1"><img src="http://i43.tinypic.com/eanozs.png"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font size="2">AVERY P. LANGDON.</td></tr><tr><td style="text-align: center;"><a class="imginfo"></a></td></tr><tr><td style="text-align: center;"><font size="1">Fondateur | Ravenclaw. <br><a href=http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=7" class="postlink" target="_blank"><i>Hibou Express.</i></a><br/></font></td></tr><tr align="center"/></tbody></table></span></a> <a class="imginfo4"><img src="http://i43.tinypic.com/2e0jnet.png"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font size="2">SALOME R. PREWETT.</font></td></tr><tr><td style="text-align: center;"><a class="imginfo"></a></td></tr><tr><td style="text-align: center;"><font size="1">Administratrice | Gryffindor.<br><a href="hhttp://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=8" class="postlink" target="_blank"><i>Hibou Express.</i></a><br/></font></td></tr><tr align="center"/></tbody></table></span></a> <a class="imginfo3"><img src="http://i41.tinypic.com/fxtqpz.png"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font color=indianred ;size="2">REMUS J. LUPIN.</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"></a></td></tr><tr><td style="text-align: center;"><font size="1">Administrateur | Gryffindor. <br><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=15" class="postlink" target="_blank"><i>Hibou Express.</i></a><br/></font></td></tr><tr align="center"/></tbody></table></span></a> <a class="imginfo3"><img src="http://img7.hostingpics.net/pics/160188icon_80_LG.png"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font color="#38A346"; size="2">SEVERUS T. SNAPE.</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"></a></td></tr><tr><td style="text-align: center;"><font color="#38A346"; size="1">Administratrice | Slytherin. <br><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=30" class="postlink" target="_blank"><i>Hibou Express.</i></a><br/></font></td></tr><tr align="center"/></tbody></table></span></a> <a class="imginfo3"><img src="http://img7.hostingpics.net/pics/78264icon_80_JP_1.png"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font color="#EDE65A"; size="2">CHRISTEL O. SULLIVAN.</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"></a></td></tr><tr><td style="text-align: center;"><font color="#EDE65A"; size="1">Modératrice | Hufflepuff. <br><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=16" class="postlink" target="_blank"><i>Hibou Express.</i></a><br/></font></td></tr><tr align="center"/></tbody></table></span></a> <a class="imginfo3"><img src="http://img7.hostingpics.net/pics/391621icon_80_HB_1.png"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font size="2">ECKO SULLIVAN.</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"></a></td></tr><tr><td style="text-align: center;"><font size="1">Modératrice | Gryffindor. <br><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=26" class="postlink" target="_blank"><i>Hibou Express.</i></a><br/></font></td></tr><tr align="center"/></tbody></table></span></a> <a class="imginfo3"><img src="http://img7.hostingpics.net/pics/105782icon_80_ER_1.png"/></font><span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody><tr><td style="text-align: center;"><font color="#EDE65A"; size="2">ELIZABHETA A. CARTER.</font><br/></td></tr><tr><td style="text-align: center;"><a class="imginfo"></a></td></tr><tr><td style="text-align: center;"><font color="#EDE65A"; size="1">Modératrice | Hufflepuff. <br><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=3" class="postlink" target="_blank"><i>Hibou Express.</i></a><br/></font></td></tr><tr align="center"/></tbody></table></span></a>
</td></div>

Bonjour !

Premier conseil : lorsque tu fais un code, saute des lignes et laisse des espaces, quitte à les effacer au moment de poster le message. Ca facilite grandement la relecture !

Apparemment tu as voulu arrondir certains coins, ce qui n'apparaît pas sur ta capture d'écran. C'est tout simplement parce que -moz-border-radius n'a effet que sur un nombre limité de navigateurs. Pour qu'un maximum d'utilisateurs voient tes arrondis correctement, il faut rajouter -webkit-border-radius et border-radius, en leur appliquant les mêmes valeurs (ou en changeant si tu veux, mais je ne vois pas l'intérêt).

En regardant ton code de plus près, tu verras que tu as quelques balises isolées. Je suis sûr qu'en les supprimant ça irait déjà mieux Wink

Tu as fait pas mal d'autres petites erreurs, notamment l'oublie de guillemets. Je ne vais pas toutes te les citer, le but n'es pas d'y passer la journée ! ^^"

Je ne sais pas trop comment tu t'y es pris pour coder ça, mais tu t'es compliqué la tâche pour pas pas grand-chose ^^" Au lieu de faire un tableau pour chaque image, chacun imbriqué dans ton div, il aurait été quand même plus simple de faire un seul tableau et de lui appliquer tes propriétés, puis de remplir chaque cellule avec ton image et ton texte !

Quand tu veux faire un code, la première chose à faire est de savoir ce que tu veux obtenir à la fin. Si ça peut t'aider, fais un dessin. Et à partir de là, tu vas pouvoir réfléchir à comment faire, pour trouver la meilleure méthode possible. Un code, c'est pas un match de rugby. On ne se lance pas à l'aveugle en fonçant dans le tas. C'est plutôt comme une peinture. Avant de se lancer, il faut savoir ce qu'on va faire et comment on va disposer les différents éléments.

Je te mets le début du code corrigé. Il ne te restera plus qu'à rajouter tes lignes et tes cellules et les compléter. Si tu n'y arrives pas ou ne comprends pas ce que j'ai fais, n'hésite pas à poser des questions.

Code:: <div style="width: 128px; height: 160px; padding:5px; text-align: center; -moz-border-radius-topright: 15x; -wekit-border-radius-topright: 15px; border-radius-topright: 15px; -moz-border-radius-bottomleft : 15px; -wekit-border-radius-bottomleft: 15px; border-radius-bottomleft: 15px; border:5px #9B957C solid; background-color:#9B957C;">

<table width="" align="center" cellspacing="0" cellpadding="0">
   <tr>
      <td>
         <img src="url-de-l-image"/>

         <font size="2">Nom</font>

         <font size="1">Rang</font>

         <a href="url"><i>Hibou Express.</i></a>
      </td>

      <td>
         nouvelle cellule
      </td>
   </tr>
</table>

<table width="" align="center" cellspacing="0" cellpadding="0">
   <tr>
      <td>
         texte
      </td>
   </tr>
</table>

</div>

Il y a deux tableaux à chaucn une ligne, ce sera plus facile pour gérer l'alignement. Mais n'oublie pas de fixer la largeur pour que l'alignemet soit pris en compte.
Tu peux rajouter une classe dans les td pour mettre des marges.

Fu'

Bonjour

,
merci de tous ces conseils, je ne foncerai plus tête baissé dans un HTML.
J'ai réussi à faire ce que je voulais te je te remercie Smile

.
Par contre, je n'arrive plus à mettre la main sur le code me permettant de faire apparaître les données du staff dans une espèce de bulle... Est-ce que tu pourrais m'aider ? :/
(ma capture d'écran ne montre pas la souris, mais normalement, son curseur est un point d'interrogation ><)

Spoiler:

PS : Pour le soucis des angles arrondis, oui, je sais, avec Safari ça ne marche pas Smile

. Mais comme les utilisateurs sont sur mozilla, ils voient tout comme il faut Smile

Bonjour,
Fais une recherche sur le forum avec le mot "Infobulle"

Super ! Si tu as réussi à faire ce que tu voulais je suis content !

Pour faire une infobulle, je te conseille d'aller voir ce tuto : https://css-actif.forumactif.org/intermediaire-f15/faire-une-infobulle-t103.htm

Fu'

EDIT : Ha Kimy, tu m'as encore devancé XD

Puis-je classer le sujet ?

Merci à vous deux pour le lien.
Par contre, j'ai encore un petite soucis ^^".
Je n'arrive pas à activer l'infobulle =/. Je pense que je n'ai pas compris quelque chose dans le tutoriel. Il faut que je change le "#" ?
Et sinon, pourquoi mes images ne rentrent pas dans le fond de couleur ? =/
(Je suis désolé si je pose des questions stupides, j'ai commencé lundi u;u")

Code:: <div style="width: 128px; height: 160px; padding:5px; text-align: center; -moz-border-radius-topright: 15x; -wekit-border-radius-topright: 15px; border-radius-topright: 15px; -moz-border-radius-bottomleft : 15px; -wekit-border-radius-bottomleft: 15px; border-radius-bottomleft: 15px; border:5px #9B957C solid; background-color:#9B957C;">

<table width="" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#" class="infobulle"><img src="http://i43.tinypic.com/eanozs.png"/>

<span><font color="#4376A3"; size="2">AVERY P. LANGDON</font>

<font color="#4376A3"; size="1">Fondateur ı Ravenclaw</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=7" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://i43.tinypic.com/2e0jnet.png"/>

<font color="#BA4A4A"; size="2">SALOME R. PREWETT</font>

<font color="#BA4A4A"; size="1">Administratrice ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=8" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://i41.tinypic.com/fxtqpz.png"/>

<span><font color="#BA4A4A"; size="2">REMUS J. LUPIN</font>

<font color="#BA4A4A"; size="1">Administrateur ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=15" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/160188icon_80_LG.png"/>

<span><font color="#38A346"; size="2">SEVERUS T. SNAPE</font>

<font color="#38A346"; size="1">Administratrice ı Slytherin</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=30" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>
</tr>
</table>

<table width="" align="center" cellspacing="0" cellpadding="0">
<tr>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/78264icon_80_JP_1.png"/>

<span><font color="#EDE65A"; size="2">CHRISTEL O. SULLIVAN</font>

<font color="#EDE65A"; size="1">Modératrice ı Hufflepuff</font>

<div><a href=""http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=16" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/391621icon_80_HB_1.png"/>

<span><font color="#BA4A4A"; size="2">ECKO SULLIVAN</font>

<font color="#BA4A4A"; size="1">Modératrice ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=26" target="_blank"><i>Hibou Express.</i></a><.div></span></a>
</td>
<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/105782icon_80_ER_1.png"/>

<span><font color="#EDE65A"; size="2">ELIZABHETA A. CARTER</font>

<font color="#EDE65A"; size="1">Modératrice ı Hufflepuff</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=3" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>
</tr>
</table>

</div>

Perso je mets jamais le "href="#"" XD
Tu avais oublié un

Code:: <span>

quelque part mais sinon ça fonctionne chez moi

Code:: <div style="width: 128px; height: 160px; padding:5px; text-align: center; -moz-border-radius-topright: 15x; -wekit-border-radius-topright: 15px; border-radius-topright: 15px; -moz-border-radius-bottomleft : 15px; -wekit-border-radius-bottomleft: 15px; border-radius-bottomleft: 15px; border:5px #9B957C solid; background-color:#9B957C;">

<table width="" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#" class="infobulle"><img src="http://i43.tinypic.com/eanozs.png"/>

<span><font color="#4376A3"; size="2">AVERY P. LANGDON</font>

<font color="#4376A3"; size="1">Fondateur ı Ravenclaw</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=7" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://i43.tinypic.com/2e0jnet.png"/>

<span><font color="#BA4A4A"; size="2">SALOME R. PREWETT</font>

<font color="#BA4A4A"; size="1">Administratrice ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=8" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://i41.tinypic.com/fxtqpz.png"/>

<span><font color="#BA4A4A"; size="2">REMUS J. LUPIN</font>

<font color="#BA4A4A"; size="1">Administrateur ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=15" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/160188icon_80_LG.png"/>

<span><font color="#38A346"; size="2">SEVERUS T. SNAPE</font>

<font color="#38A346"; size="1">Administratrice ı Slytherin</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=30" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>
</tr>
</table>

<table width="" align="center" cellspacing="0" cellpadding="0">
<tr>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/78264icon_80_JP_1.png"/>

<span><font color="#EDE65A"; size="2">CHRISTEL O. SULLIVAN</font>

<font color="#EDE65A"; size="1">Modératrice ı Hufflepuff</font>

<div><a href=""http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=16" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/391621icon_80_HB_1.png"/>

<span><font color="#BA4A4A"; size="2">ECKO SULLIVAN</font>

<font color="#BA4A4A"; size="1">Modératrice ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=26" target="_blank"><i>Hibou Express.</i></a><.div></span></a>
</td>
<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/105782icon_80_ER_1.png"/>

<span><font color="#EDE65A"; size="2">ELIZABHETA A. CARTER</font>

<font color="#EDE65A"; size="1">Modératrice ı Hufflepuff</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=3" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>
</tr>
</table>

</div>

EDIT : Pour que tout rentre dans ton fond de couleur, il faut que tu agrandisses la largeur de ta DIV

Ca ne marche toujours pas chez moi ><.
Mais peut être cela vient-il de ma feuille CSS. Pourtant, l'ancien était en infobulle et je n'avais pas de soucis...

Code:: a.mainmenu
{background-color:#9B957C;
text-decoration: bold;
color:#ffffff;
align: center;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;}

a.mainmenu:hover
{background-color:#9B957C;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
text-decoration: bold;
align: center;
color :#B3AC91;}

.statistiques{
border:0px;
background-image: url("");
background-repeat: no-repeat;
background-position: center;
height:270px;}

.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}

.forumline{
-moz-border-radius:6px;
}
.forumline{border: 3px double #9B957C; }

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
a:hover{ text-decoration: none !important;}
a:forumlink{
text-align:center;
}
a{text-decoration: none !important;}

a.forum{
text-align: center;
}

tr.post span.gensmall { display: none; }

/* arrondir zones de texte */
textarea, .textarea.post, input.post {
-moz-border-radius-left:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-right:10px;
border:1px normal #9B957C;}

body {
text-align:justify;
}

.postdetails.poster-profile a img {
color:#6495ed;
background-color: #9B957C;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
border: 10px solid #9B957C;
}

.vignettes
{background-color:#9B957C;
text-decoration: none;
color:#ffffff;
align: left;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;}

.vignettes:hover
{background-color: #9B957C;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
text-decoration:none;
color :#ffffff;}

a.imginfo1 {
position: relative;
color: steelblue;
text-decoration: none;
border-bottom: 0px #9B957C solid; /* on souligne le texte */
}

a.imginfo1 span {
display: none; /* on masque l'infobulle */
}
a.imginfo1:hover {
background: #B3AC91; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo1:hover span {
display: block; /* on affiche l'infobulle */
position: absolute;
list-style-type:none;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 12px; /* on positionne notre infobulle */
left: 15px;
background: #B3AC91;
color: steelblue;
padding: 3px;
border: 0px solid #9B957C;
border-left: 5px solid #9B957C;
border-right: 5px solid #9B957C;
border-top: 5px solid #9B957C;
border-bottom: 5px solid #9B957C;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}

a.imginfo2 {
position: relative;
color: steelblue;
text-decoration: none;
border-bottom: 0px #9B957C solid; /* on souligne le texte */
}

a.imginfo2 span {
display: none; /* on masque l'infobulle */
}
a.imginfo2:hover {
background: #B3AC91; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo2:hover span {
display: block; /* on affiche l'infobulle */
position: absolute;
list-style-type:none;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 12px; /* on positionne notre infobulle */
left: 1px;
background: #B3AC91;
color: steelblue;
padding: 3px;
border: 0px solid #9B957C;
border-left: 5px solid #9B957C;
border-right: 5px solid #9B957C;
border-top: 5px solid #9B957C;
border-bottom: 5px solid #9B957C;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}

a.imginfo3 {
position: relative;
color: indianred;
text-decoration: none;
border-bottom: 0px #9B957C solid; /* on souligne le texte */
}

a.imginfo3 span {
display: none; /* on masque l'infobulle */
}
a.imginfo3:hover {
background: #B3AC91; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo3:hover span {
display: block; /* on affiche l'infobulle */
position: absolute;
list-style-type:none;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 12px; /* on positionne notre infobulle */
background: #B3AC91;
color: indianred;
padding: 3px;
border: 0px solid #9B957C;
border-left: 5px solid #9B957C;
border-right: 5px solid #9B957C;
border-top: 5px solid #9B957C;
border-bottom: 5px solid #9B957C;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}

a.imginfo4 {
position: relative;
color: indianred;
text-decoration: none;
border-bottom: 0px #9B957C solid; /* on souligne le texte */
}

a.imginfo4 span {
display: none; /* on masque l'infobulle */
}
a.imginfo4:hover {
background: #B3AC91; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo4:hover span {
display: block; /* on affiche l'infobulle */
position: absolute;
list-style-type:none;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 12px; /* on positionne notre infobulle */
right: 10px;
background: #B3AC91;
color: indianred;
padding: 3px;
border: 0px solid #9B957C;
border-left: 5px solid #9B957C;
border-right: 5px solid #9B957C;
border-top: 5px solid #9B957C;
border-bottom: 5px solid #9B957C;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}

a.menuinfo {
position: relative;
color: #ffffff;
font-size: 15px;
background-color: #9B957C;
text-decoration: none;
border-bottom: 0px #9B957C solid; /* on souligne le texte */
border: 0px solid #9B957C;
border-left: 5px solid #9B957C;
border-right: 5px solid #9B957C;
border-top: 5px solid #9B957C;
border-bottom: 5px solid #9B957C;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}

a.menuinfo span {
display: none; /* on masque l'infobulle */

}
a.menuinfo:hover {
background: steelblue; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
border: 0px solid steelblue;
border-left: 5px solid steelblue;
border-right: 5px solid steelblue;
border-top: 5px solid steelblue;
border-bottom: 5px solid steelblue;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}
a.menuinfo:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
list-style-type:none;
float:none
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 22px; /* on positionne notre infobulle */
left: 0px;
background: lightsteelblue;
color: #ffffff;
font-size: 11px;
padding: 10px;
border: 0px solid steelblue;
border-left: 5px solid steelblue;
border-right: 5px solid steelblue;
border-top: 5px solid steelblue;
border-bottom: 5px solid steelblue;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}

.postbody {
display: block;
padding-left: 30px;
padding-right: 30px;
text-align:justify;
}

.navig
{background-color:#9B957C;
text-decoration: none;
color:#B3AC91;
font-size: 13px;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;}

.navig:hover
{background-color: #9B957C;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
text-decoration:none;
color :#9B957C;}

.navig1
{background-color:#9B957C;
text-decoration: none;
color:#B3AC91;
font-size: 13px;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft:10px;}

.navig1:hover
{background-color: #9B957C;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft:10px;
text-decoration:none;
color :#9B957C;}

.navig2
{background-color:#9B957C;
text-decoration: none;
color:#B3AC91;
font-size: 13px;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;}

.navig2:hover
{background-color: #9B957C;
border-left: 10px solid #9B957C;
border-right: 10px solid #9B957C;
text-decoration:none;
color :#9B957C;}

Spoiler:

Effectivement y'a un gros soucis dans le CSS.
Dans ton code HTML tu as appliqué la classe "infobulle" à ton infobulle
or dans ton CSS tu as 4 classes différentes °°
imginfo1, imginfo2, imginfo3 et imginfo4
Donc ton code HTML n'est pas relié au CSS vu que les classes diffèrent

j'ai changé ma feuille CSS. Mais je crois que je me loupe encore puisque le "Hibou Express" ne rentre pas dans l'infobulle =/

Spoiler:

Code:: a.infobulle {
position: relative;
}

a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 5px; /* on positionne notre infobulle */
left: 15px;

background: #ebebeb; /* arrière-plan de l'infobulle */

color: black; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
}

a.menuinfo {
position: relative;
color: #ffffff;
font-size: 15px;
background-color: #9B957C;
text-decoration: none;
border-bottom: 0px #9B957C solid; /* on souligne le texte */
border: 0px solid #9B957C;
border-left: 5px solid #9B957C;
border-right: 5px solid #9B957C;
border-top: 5px solid #9B957C;
border-bottom: 5px solid #9B957C;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}

a.menuinfo span {
display: none; /* on masque l'infobulle */

}
a.menuinfo:hover {
background: steelblue; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
border: 0px solid steelblue;
border-left: 5px solid steelblue;
border-right: 5px solid steelblue;
border-top: 5px solid steelblue;
border-bottom: 5px solid steelblue;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}
a.menuinfo:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
list-style-type:none;
float:none
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 22px; /* on positionne notre infobulle */
left: 0px;
background: lightsteelblue;
color: #ffffff;
font-size: 11px;
padding: 10px;
border: 0px solid steelblue;
border-left: 5px solid steelblue;
border-right: 5px solid steelblue;
border-top: 5px solid steelblue;
border-bottom: 5px solid steelblue;
-moz-border-radius-left:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-right:10px;
}

Remontre nous ton code HTML pour voir ^^

Voilà mon code HTML Smile

Code:: <div style="width: 160px; height: 160px; padding:5px; text-align: center; -moz-border-radius-topright: 15x; -wekit-border-radius-topright: 15px; border-radius-topright: 15px; -moz-border-radius-bottomleft : 15px; -wekit-border-radius-bottomleft: 15px; border-radius-bottomleft: 15px; border:5px #9B957C solid; background-color:#9B957C;">

<table width="" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#" class="infobulle"><img src="http://i43.tinypic.com/eanozs.png"/>

<span><font color="#4376A3"; size="2">AVERY P. LANGDON</font>

<font color="#4376A3"; size="1">Fondateur ı Ravenclaw</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=7" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://i43.tinypic.com/2e0jnet.png"/>

<span><font color="#BA4A4A"; size="2">SALOME R. PREWETT</font>

<font color="#BA4A4A"; size="1">Administratrice ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=8" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://i41.tinypic.com/fxtqpz.png"/>

<span><font color="#BA4A4A"; size="2">REMUS J. LUPIN</font>

<font color="#BA4A4A"; size="1">Administrateur ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=15" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/160188icon_80_LG.png"/>

<span><font color="#38A346"; size="2">SEVERUS T. SNAPE</font>

<font color="#38A346"; size="1">Administratrice ı Slytherin</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=30" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>
</tr>
</table>

<table width="" align="center" cellspacing="0" cellpadding="0">
<tr>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/78264icon_80_JP_1.png"/>

<span><font color="#EDE65A"; size="2">CHRISTEL O. SULLIVAN</font>

<font color="#EDE65A"; size="1">Modératrice ı Hufflepuff</font>

<div><a href=""http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=16" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>

<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/391621icon_80_HB_1.png"/>

<span><font color="#BA4A4A"; size="2">ECKO SULLIVAN</font>

<font color="#BA4A4A"; size="1">Modératrice ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=26" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>
<td>
<a href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/105782icon_80_ER_1.png"/>

<span><font color="#EDE65A"; size="2">ELIZABHETA A. CARTER</font>

<font color="#EDE65A"; size="1">Modératrice ı Hufflepuff</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=3" target="_blank"><i>Hibou Express.</i></a></div></span></a>
</td>
</tr>
</table>

</div>

C'est exact pour le

Code:: <br>

Sinon en collant ton CSS et ton code HTML, je vois bien le hibou express dans l'infobulle °°

D'accord, merci.
Sur Mozilla, il est parfait (enfin j'obtiens le résultat que je souhaitais). Par contre, sur IE et Safari, le Hibou Express est toujours dehors =/.
Il faut que je change quelque chose dans ma feuille CSS ?

Ah je pense savoir !
Je reprends ton code et j'édite ^^

EDIT :
Essaye avec ce code :

Code:: <div style="width: 160px; height: 160px; padding:5px; text-align: center; -moz-border-radius-topright: 15x; -wekit-border-radius-topright: 15px; border-radius-topright: 15px; -moz-border-radius-bottomleft : 15px; -wekit-border-radius-bottomleft: 15px; border-radius-bottomleft: 15px; border:5px #9B957C solid; background-color:#9B957C;">

<table width="" align="center" cellspacing="0" cellpadding="0">
<tr>
<td>
<div href="#" class="infobulle"><img src="http://i43.tinypic.com/eanozs.png"/>

<span><font color="#4376A3"; size="2">AVERY P. LANGDON</font>

<font color="#4376A3"; size="1">Fondateur ı Ravenclaw</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=7" target="_blank"><i>Hibou Express.</i></a></div></span></div>
</td>

<td>
<div href="#" class="infobulle"><img src="http://i43.tinypic.com/2e0jnet.png"/>

<span><font color="#BA4A4A"; size="2">SALOME R. PREWETT</font>

<font color="#BA4A4A"; size="1">Administratrice ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=8" target="_blank"><i>Hibou Express.</i></a></div></span></div>
</td>

<td>
<div href="#" class="infobulle"><img src="http://i41.tinypic.com/fxtqpz.png"/>

<span><font color="#BA4A4A"; size="2">REMUS J. LUPIN</font>

<font color="#BA4A4A"; size="1">Administrateur ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=15" target="_blank"><i>Hibou Express.</i></a></div></span></div>
</td>

<td>
<div href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/160188icon_80_LG.png"/>

<span><font color="#38A346"; size="2">SEVERUS T. SNAPE</font>

<font color="#38A346"; size="1">Administratrice ı Slytherin</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=30" target="_blank"><i>Hibou Express.</i></a></div></span></div>
</td>
</tr>
</table>

<table width="" align="center" cellspacing="0" cellpadding="0">
<tr>

<td>
<div href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/78264icon_80_JP_1.png"/>

<span><font color="#EDE65A"; size="2">CHRISTEL O. SULLIVAN</font>

<font color="#EDE65A"; size="1">Modératrice ı Hufflepuff</font>

<div><a href=""http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=16" target="_blank"><i>Hibou Express.</i></a></div></span></div>
</td>

<td>
<div href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/391621icon_80_HB_1.png"/>

<span><font color="#BA4A4A"; size="2">ECKO SULLIVAN</font>

<font color="#BA4A4A"; size="1">Modératrice ı Gryffindor</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=26" target="_blank"><i>Hibou Express.</i></a></div></span></div>
</td>
<td>
<div href="#" class="infobulle"><img src="http://img7.hostingpics.net/pics/105782icon_80_ER_1.png"/>

<span><font color="#EDE65A"; size="2">ELIZABHETA A. CARTER</font>

<font color="#EDE65A"; size="1">Modératrice ı Hufflepuff</font>

<div><a href="http://hogwarts-marauders.bbactif.com/msg.forum?mode=post&u=3" target="_blank"><i>Hibou Express.</i></a></div></span></div>
</td>
</tr>
</table>

</div>

Code:: div.infobulle {
position: relative;
}

div.infobulle span {
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;

white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */

top: 5px; /* on positionne notre infobulle */
left: 15px;

background: #ebebeb; /* arrière-plan de l'infobulle */

color: black; /* texte dans l'infobulle */
padding: 3px;

/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
}

Ah ça marche ! =D
Merci beaucoup d'avoir passé autant de temps pour m'aider Smile

Avec plaisir ^^
Je classe donc

Problème de mise en page.

Problème de mise en page.

Sujets similaires

Sujets similaires

Partenaires Or