Lou'N@il
{ Membre }
Messages : 43
| hello hello
voila je suis entrain de refaire ma page d'accueil avec un code que j'ai depuis un petit temps, et je rencontre un mini soucis mes images (staffs la précisément) ce mettent l'un en dessous de l'autre au lieux de ce mettre a coter je ne connais pas le code pour le faire.
merci beaucoup de toutes aide ^^
image : - Spoiler:
code : - Code:
-
<style type="text/css"> .titre { color: #000000; text-transform:uppercase; border-top:1px solid #000000; text-align:center; font-size:14px; } .texte{ color:#000000; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; } .nav li{ list-style-type:none; padding-left:10px; } .nav li a{ color:#000000; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; background-color: #CFCDFE; border-right:#99CCCC 5px solid; list-style-type:none; display:block; text-decoration:none;
} .nav li a:hover{ color:#6666CC; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:14px; background-color: #CCCCFF; border-right: #CFCDFE 5px solid; list-style-type:none; display:block; text-decoration:none; padding-left:5px; }
.Style1 {color: #000000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; } .Style2 { font-size: 14px; font-weight: bold; }
/*début infobulle*/
.tstaff{font-size:1em;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail span{ position: absolute; background-color:#99CCCC; padding: 10px; left: -1000px; visibility: hidden; color: #000000;-moz-border-radius:15px; border: 2px double #000000;}
.thumbnail span img{border: 1px solid; padding: 5px;}
.thumbnail:hover span{ visibility: visible; top: 15px; left: 25px; width: 150px; height:150px;}
/*fin infobulle*/ /*images gris/couleurs*/ img.faded { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } img.faded:hover { filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; opacity:1; } </style>
<table width="800" border="0"> <tr> <td width="164" valign="top"><p class="titre">Membres du mois</p> <p align="center" class="texte">Nos meilleurs Posteurs<br> <img class="faded" src="http://i42.tinypic.com/2q06qtk.png" /><img class="faded" src="http://i43.tinypic.com/v4xnuo.png" alt="" /><img class="faded" src="http://i40.tinypic.com/ibm70o.png" alt="" /></p> </td> <td width="458" valign="top"><p class="titre">Contexte</p> <p align="justify" class="Style1"><span class="Style2">Les premiers mots :</span> <span class="texte">Chères membres, Vous vous demandez certainement où vous avez atterrit, en ce lieu même ? sur ce forum au désigne attrayant ? Ne cherchez plus, vous venez de pénétrer sur un territoire où deux mondes se bousculent, où les personnages de deux sagas exceptionnelles se rencontrent enfin. Le journal d'un vampire se mêle à l'histoire de Twilight, plaisir et suspens garantie. Faites marcher votre imagination et créer des moments de pur amusement! A vous! </span></p> </td> <td width="164" valign="top"><p class="titre">Liens</p> <ul class="nav"> </div><div style="text-align: left; padding-right: 5px; font-size: 15px; background-color: #2C2C2C(176, 21, 21); color: rgb(255, 255, 255); -moz-border-radius-topleft: 11px; -moz-border-radius-topright: 11px;"><font size="1"><span style="font-size: 20px; line-height: normal;">Menu :</span></font> </div><div style="text-align: justify; padding-bottom: 10px; padding-top: 5px; -moz-border-radius-bottomright: 11px; -moz-border-radius-bottomleft: 11px;"><div style="text-align: left; margin-left: 10px; margin-right: 10px; padding-right: 5px; font-size: 12px; -moz-border-radius-topleft: 11px; -moz-border-radius-topright: 11px; -moz-border-radius-bottomleft: 11px; -moz-border-radius-bottomright: 11px;"> <form><select style="width: 160px;" onchange="location = this.options [this.selectedIndex].value">
<option selected="selected">Naviguation facile</option> <option value="http://tvd-twi-actuality.forum-actif.net/reglement-f1/reglement-du-forum-t5.htm">Réglement</option> <option value="http://tvd-twi-actuality.forum-actif.net/posts-vacants-f20/a-vous-de-voir-t3.htm">Post Vacant</option> <option value="http://tvd-twi-actuality.forum-actif.net/avatar-deja-pris-f72/avatar-pris-t52.htm">Avatar Pris</option> <option value="http://tvd-twi-actuality.forum-actif.net/le-forum-vous-parle-f4/">Le Forum vous Parle.</option> <option value="http://tvd-twi-actuality.forum-actif.net/graphisme-f11/">Graphisme</option> <option value="http://tvd-twi-actuality.forum-actif.net/partenariat-pub-f31/">Partenariat</option> </select></form> </td> </tr> <tr> <td valign="top"><p class="titre">Le staff du forum</p> <!--début infobulle--> <div class="thumbnail"><div align="center"><img width="50px" height="50px" src="http://i43.tinypic.com/fxdwy9.png"> <span></span></div> <span><div class="tstaff" align="center"> Damon Salvator <img class="faded" src="http://i42.tinypic.com/egr76r.png"><br> <a href="http://tvd-twi-actuality.forum-actif.net/msg.forum?mode=post&u=2">MP</a> | <a href="http://tvd-twi-actuality.forum-actif.net/profile.forum?mode=viewprofile&page_profil=profile&u=2">Profil</a> </div></span> </div> <!--fin infobulle--><!--début infobulle--> <div class="thumbnail"><div align="center"><img width="50px" height="50px" src="http://i41.tinypic.com/2cxdma.png"> <span></span></div> <span><div class="tstaff" align="center"> Emmett Cullen <img class="faded" src="http://i43.tinypic.com/fvtao.png"><br> <a href="http://tvd-twi-actuality.forum-actif.net/msg.forum?mode=post&u=1">MP</a> | <a href="http://tvd-twi-actuality.forum-actif.net/profile.forum?mode=viewprofile&page_profil=profile&u=1">Profil</a> </div></span> </div> <!--fin infobulle--> </td> <td valign="top"><p class="titre">On les veut Vraiment.</p> <p class="texte"></p> </td> <td valign="top"><p class="titre">Vidéos du Mois</p> <p class="texte"></p> </td> </tr> <tr> <td valign="top"><p class="titre">Top-sites</p> <p class="texte"></p> </td> <td valign="top"><p class="titre">News</p> <p class="texte"></p> </td> <td valign="top"><p class="titre">Nos amis</p> <p class="texte"></p> </td> </tr> </table> |
Dernière édition par Lou'N@il le Sam 08 Mai 2010, 12:46, édité 1 fois | |
|
'Christa
Lostmindy
Messages : 2856
| C'est un peu beaucoup normal ^^' Les "div" sont des balises bloc, à savoir qu'elles prennent une ligne complète quand on les utilise. Je ne sais pas d'où sort ton code pour le staff mais il est trop compliqué à mon sens. En tous cas, tel que se trouve le code CSS et le code HTML, tu n'as pas d'autre choix que de faire avec. | | |
|
Liliana
{ Membre actif }
Messages : 997
| Bonsoir, Ce que dit Lostmindy est exact, cependant il est simple de modifier pour que cela passe; il suffit de remplacer cette portion de code : - Spoiler:
- Code:
-
<td valign="top"><p class="titre">Le staff du forum</p> <!--début infobulle--> <div class="thumbnail"><div align="center"><img width="50px" height="50px" src="http://i43.tinypic.com/fxdwy9.png"> <span></span></div> <span><div class="tstaff" align="center"> Damon Salvator <img class="faded" src="http://i42.tinypic.com/egr76r.png"><br> <a href="http://tvd-twi-actuality.forum-actif.net/msg.forum?mode=post&u=2">MP</a> | <a href="http://tvd-twi-actuality.forum-actif.net/profile.forum?mode=viewprofile&page_profil=profile&u=2">Profil</a> </div></span> </div> <!--fin infobulle--><!--début infobulle--> <div class="thumbnail"><div align="center"><img width="50px" height="50px" src="http://i41.tinypic.com/2cxdma.png"> <span></span></div> <span><div class="tstaff" align="center"> Emmett Cullen <img class="faded" src="http://i43.tinypic.com/fvtao.png"><br> <a href="http://tvd-twi-actuality.forum-actif.net/msg.forum?mode=post&u=1">MP</a> | <a href="http://tvd-twi-actuality.forum-actif.net/profile.forum?mode=viewprofile&page_profil=profile&u=1">Profil</a> </div></span> </div> <!--fin infobulle--> </td>
Par ceci : - Spoiler:
- Code:
-
<td valign="top"><p class="titre">Le staff du forum</p> <!-- Début infobulle--> <table cellspacing="1" align="center"><tr> <td align="center"> <div class="thumbnail"> <img width="50px" height="50px" src="http://i43.tinypic.com/fxdwy9.png"> <span> <div class="tstaff" align="center"> Damon Salvator <img class="faded" src="http://i42.tinypic.com/egr76r.png"><br> <a href="http://tvd-twi-actuality.forum-actif.net/msg.forum?mode=post&u=2">MP</a> | <a href="http://tvd-twi-actuality.forum-actif.net/profile.forum?mode=viewprofile&page_profil=profile&u=2">Profil</a> </div> </span> </div> </td> <!-- Fin première infobulle -->
<!-- Début deuxième infobulle --> <td align="center"> <div class="thumbnail"> <img width="50px" height="50px" src="http://i41.tinypic.com/2cxdma.png"> <span> <div class="tstaff" align="center"> Emmett Cullen <img class="faded" src="http://i43.tinypic.com/fvtao.png"><br> <a href="http://tvd-twi-actuality.forum-actif.net/msg.forum?mode=post&u=1">MP</a> | <a href="http://tvd-twi-actuality.forum-actif.net/profile.forum?mode=viewprofile&page_profil=profile&u=1">Profil</a> </div> </td> </tr></table> <!-- Fin infobulle--> </td>
Utiliser les div pour faire les infobulles c'est mieux pour Internet Explorer et Chrome; mais le problème c'est ce retour à la ligne. J'ai juste crée une table dans ta colonne d'infobulle; pour ensuite créer deux autres petites colonnes, qui contiennent donc tes images. Les colonnes forcent les div à rester l'une à côté de l'autre ... Ainsi, elles sont côte à côte, et le code est compatible aussi sur IE | | |
|
Lou'N@il
{ Membre }
Messages : 43
| |