Sujets similaires

Merci beaucoup ! Very Happy

ca marche à merveille

Avatar
Pseudo
Rang
(dans l'infobulle:
Les informations
diverses du
membres+
la fiche RPG)

Spoiler:

Code:: <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
      <table><tr><td class="profil_contour">
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.RANK_IMAGE}<span class="postdetails poster-profile">{postrow.displayed.POSTER_AVATAR}
<span style="font-size:11px;">
<center>{postrow.displayed.POSTER_NAME}</center></strong>
<center>{postrow.displayed.POSTER_RANK}</center></span><br />
         <br /><br /> </span>
<div class="infobulle_avatar">
<em>
         

         {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
         
         {postrow.displayed.POSTER_RPG}</em></div>
</span>
      <br />
      <img src="http://2img.net/i/_.gif" alt="" style="width:150px;height:1px" />
</td></tr></table>
   </td>

Merci pur ce super tuto, c'est pile ce que je cherchais ! *-* Ca marche parfaitement, nikel !! ^^

Code bien sympathique, merci beaucoup.

Serait t'il possible de n'avoir que la feuille des personnages dans cette infobulle ? Et laisser la partie profil a sa place ? (:

Super tuto!
Un grand merci aux codeurs Very Happy

Moi mon viewtopic_body est déjà modifié...

quelqu'un pourrait m,aider pour ne pas faire disparaitre la modification qui y était déjà? Même si je ne sais plus c'est quoi XD

Voici mon template:

Code:: <script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
_atc.cwait = 0;
$('.addthis_button').mouseup(function(){
if ($('#at15s').css('display') == 'block') {
addthis_close();
addthis_close();
}
});
});
//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">

<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>


<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

</span>
</td>
<td class="nav" valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="bottom" nowrap="nowrap" width="100%">
<span class="gensmall bold">
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=forumotion">{L_SHARE}</a>
|
<script type="text/javascript">
//<![CDATA[
insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
//]]>
</script>
</span>
</td>
</tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr align="right">
<td class="catHead" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" nowrap="nowrap" class="t-title"><h1 class="cattitle"> {TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
</tr>

{POLL_DISPLAY}
<tr>
<th class="thLeft" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
<th class="thRight" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
</tr>


<tr class="post">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
<td valign="top" nowrap="nowrap" class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr />
</td>
</tr>
<tr>
<td colspan="2">

<div class="vote gensmall">

<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>



<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">

<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>



<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>

</div>



<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>



<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>

</div>


<div class="postbody">

<div>{postrow.displayed.MESSAGE}</div>


<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd>

<dl class="file">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />


<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}



{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}

</dt>


<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
</dd>



<dd>
<em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
</dd>


<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
</dl>

</dd>
</dl>


<div class="clear"></div>
<div class="signature_div">
{postrow.displayed.SIGNATURE}
</div>

</div>
<span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
</td>
</tr>
</table>
</td>
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

{postrow.displayed.POSTER_RPG}
</span><br />
<img src="http://2img.net/i/_.gif" alt="" style="width:150px;height:1px" />
</td>
</tr>
<tr>
<td colspan="2" class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG}
</td>
</tr>
</table>
</td>
<td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
<a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
</td>

</tr>

</table>
<br />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th class="thLeft" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
<th class="thRight" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
</tr>



<tr>
<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
</tr>



<tr align="center">
<td class="row1" colspan="3" height="28">
<span class="genmed">{no_post.L_NO_POST}</span>
</td>
</tr>

<tr align="right">
<td class="catBottom" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" nowrap="nowrap" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
</table>

<table class="forumline noprint" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>

<td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>

</tr>


<tr>
<td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
</tr>


<tr>
<td class="row2" colspan="2" align="center" style="padding:0px">

<a name="quickreply"></a>
{QUICK_REPLY_FORM}<br />

</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
<tbody>

<tr>
<td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
<td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
</tr>

<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>

<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>

</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
<tbody>
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
<span class="nav">

<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>


<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

</span>
</td>

<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>


<td align="center">
<span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
</td>
<td align="center" width="250">
<span class="gensmall"> </span>
</td>

</tr>
</table>
</form>


<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
<form name="action" method="get" action="{S_FORM_MOD_ACTION}">
<input type="hidden" name="t" value="{TOPIC_ID}" />
<input type="hidden" name="sid" value="{S_SID}" />
<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
</form>
</td>
</tr>
</table>



<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>


<script type="text/javascript" src="{JS_DIR}addthis/addthis_widget.js"></script>

Il ne marche pas du tout sur mon forum, pourtant j'ai le template par défaut et j'ai suivi à la lettre ce qui à été mis :S

Merci beaucoup ! Ca fonctionne parfaitement. Smile

Voilà ce que ça donne chez moi :

Spoiler:

Pour ceux que ça peut aider, j'ai mis du margin autour de l'avatar pour qu'il puisse respirer un peu.. Je vous mets tout le code comme ça vous avez les réponses à vos questions direct, quelle éfficacité moi j'dis ! x)

Code:: .postdetails.poster-profile a img {
-webkit-border-radius: 10px; /*Arrondi des bords du contour*/
-moz-border-radius:10px; /*Arrondi des bords du contour*/
border: 5px solid #a6d958; /*Contour*/
margin-top: 10px; margin-bottom: 10px; margin-left: 4px; margin-right: 4px; /*Marges autour de l'avatar*/
}

Bonjour,

C'est encore moi, désolé mais j'ai un gros probleme avec le code. Pourtant je l'ai déjà utilisé sur un autre forum, et il marche parfaitement, alors je ne comprends pas.

j'ai voulu mettre l' infobulle dans le profil...mais le probleme est le suivant : les informations se mette à la fois en dessous et dans une infobulle :/

Avant le passage de la souris :

Spoiler:

le passage :

Spoiler:

J'aimerais donc savoir comment enlever ce qu'il y a en dessous de l'avatar avant le passage de la souris

Merci d'avance à ceux qui liront ce message Smile

il m'arrive la même chose que Estel, ça marche mais il apparait dans l'infobulle et sur le côté. Désolé je ne t'aide pas du tout.

Je met mon template de view_body, je l'ai pas mis en entier j'espère que ça fait rien

Spoiler:

et mon css, par contre c'est un peu le bazars (je sais même plus où donner de la tête)

Spoiler:

Code:: body { cursor: crosshair }
a:hover { cursor:ne-resize; }

u{border-bottom: 2px solid;border-color:#C5D8EA;text-decoration: none;
-moz-border-radius:6px;}

I{border-bottom:none; color:#8C4608;text-decoration: none
}

a:hover{text-transform:uppercase;}

.bodylinewidth {
width:60%}

a.forumlink:hover, a.forumlink:hover:visited{
background-color: #f4f1e2;
border-left: 9px solid #f4f1e2;
border-right: 9px solid #f4f1e2;
-moz-border-radius:6px;}

a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a { text-decoration: none; }
a:link { text-decoration: none; }
a:hover { text-decoration: none; }

.quote{
font-family: Tahoma;
font-size: 12px;
color: #28328E;
line-height: 125%;
background-color: #C5D8EA;
border: #D2C5EB;
border-style: solid;
border: 1px #C5D8EA;
dotted;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
-moz-border-radius:6px;}

.code{
font-family: Courier,Courier New,sans-serif;
font-size: 11px;
color: #28328E;
background-color: #C5D8EA;
border: #D2C5EB;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px
border: 3px #C5D8EA;
dotted;
-moz-border-radius:6px;}

input,textarea, select {
-moz-border-radius-bottomleft:9px;
-moz-border-radius-bottomright:9px;
-moz-border-radius-topleft:9px;
-moz-border-radius-topright:9px;
}

body {
background-repeat:no-repeat;
background-position : top center;
background-attachment: fixed;
margin-left:auto;
margin-right:auto;
height:1500px;
margin: auto
}

background: # url(http://hitskin.com/themes/13/81/40/i_logo.gif) no-repeat center top fixed;

td.row1{
background-image: url;
}
td.row2{
background-image: url;
}
td.row3{
background-image: url;
}

td.row3Right{background-image : url;}

a {font-variant: small-caps;}
.forumline{-moz-border-radius:6px;}
.bodyline {-moz-border-radius:20px;}

.forumline{
background-color: #CDBBDA;
-moz-border-radius: 0px 0px 14px 14px ;
border-bottom: 1px #CDBBDA solid;
border-top: 1px #CDBBDA dotted;
border-right: 1px #CDBBDAdotted;
border-left: 1px #CDBBDA dotted;}

/INFOBULLE/

* {
font-size: 11px;
font-family: Tahoma, Verdana, Arial;
}
a.info {
position: relative;
color: #000000;
text-decoration: none;
border-bottom: 0px #000000 solid;
}
a.info span {
display: none;
}
a.info:hover {
background: url("http://i63.servimg.com/u/f63/13/93/38/18/patt_410.jpg");
z-index: 999;

cursor: help;
}
a.info:hover span {
display: inline;
position: absolute;

white-space: nowrap;

top: 10px;
left: 20px;

background: url("http://i63.servimg.com/u/f63/13/93/38/18/patt_410.jpg");

color: #000000;
padding: 3px;

border: 0px solid #BD8D46;
border-left: 3px solid #BD8D46;
border-right: 3px solid #BD8D46;
border-top: 3px solid #BD8D46;
border-bottom: 5px solid #BD8D46;
}

/TUTAUX DEROULANT/

body {
margin: 0;
padding: 0;
background: white;
font: 80% "Comic Sans MS", cursive;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation dl {
float: left;
width: 100%;
}
#navigation dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ffffff;
border: 1px solid gray;
margin: 1px;
}
#navigation dd {
display: none;
border: 1px solid black;
}
#navigation li {
text-align: center;
background: #fff;
}
#navigation li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
}
#navigation li a:hover, #navigation li a:focus, #navigation dt a:hover, #navigation dt a:focus {
background: #000000;
color:#FFF;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

/ACCORDEON/

.haccordion{
padding: 0;
width: 800px;
}

.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}

.haccordion li{
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 20px;
overflow: hidden;
float: left;
}

#hc1 li{
margin:0 0px 0 0;
width: 800px;
}

#hc1 li .hpanel{
padding: 0px;
background: transparent;
}

.haccordion li .hpanel{
width: 20px;
height: 20px;
}

#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}

/AFFICHAGE/

#navigation ul{
list-style-type: none;
text-align: center;
}
#navigation li{
display: inline;
text-align: center;
margin: 0 10px 0 0;
}
#navigation li a {
padding: 2px 7px 2px 7px;
color: #FFF;
background-color: #000000;
border: 1px solid #ccc;
text-decoration: none;
}
#navigation li a:hover{
background-color: #333333;
color: #ffffff;
}

info bulle

mm

* {
font-family: Tahoma,Verdana,Arial,serif,Georgia,Courier New;
}
a.info {
position: relative;
color: #576186;
text-decoration: none;
}
a.info span {
display: none;
font-size: 12px;
}
a.info:hover {
background: transparent none repeat scroll 0% 50%;
z-index: 999;
cursor: help;
}
a.info:hover span {
border: 3px solid #3e3d70;
padding: 3px;
background: #c0cde5 none repeat scroll 0% 50%;
display: inline;
position: absolute;
white-space: nowrap;
top: 10px;
left: 10px;
color: #576186;
}
#blabla {
text-align: center;
}
.categling {
border-bottom: 1px dotted #9999ff;
margin: 0px 4px 8px 0px;
padding: 3px;
text-transform: uppercase;
width: 95%;
background-color: #f8f8fb;
text-align: center;
font-size: 10px;
display: block;
text-decoration: none;
color: #888888;
font-weight: bold;
}
.categling:hover {
border-bottom: 1px dotted #9999ff;
margin: 0px 4px 8px 0px;
padding: 3px;
text-align: center;
width: 95%;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border-right-width: 10px;
border-left-width: 10px;
display: block;
background-color: #f8f8fb;
font-size: 10px;
color: #797979;
}

ESSAI

* {
font-family: Tahoma,Verdana,Arial,serif,Georgia,Courier New;
}
a.info {
position: relative;
color: #576186;
text-decoration: none;
}
a.info span {
display: none;
font-size: 12px;
}
a.info:hover {
background: transparent none repeat scroll 0% 50%;
z-index: 999;
cursor: help;
}
a.info:hover span {
border: 3px solid #3e3d70;
padding: 3px;
background: #c0cde5 none repeat scroll 0% 50%;
display: inline;
position: absolute;
white-space: nowrap;
top: 10px;
left: 10px;
color: #576186;
}
#blabla {
text-align: center;
}
.categling {
border-bottom: 1px dotted #9999ff;
margin: 0px 4px 8px 0px;
padding: 3px;
text-transform: uppercase;
width: 95%;
background-color: #f8f8fb;
text-align: center;
font-size: 10px;
display: block;
text-decoration: none;
color: #888888;
font-weight: bold;
}
.categling:hover {
border-bottom: 1px dotted #9999ff;
margin: 0px 4px 8px 0px;
padding: 3px;
text-align: center;
width: 95%;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
border-right-width: 10px;
border-left-width: 10px;
display: block;
background-color: #f8f8fb;
font-size: 10px;
color: #797979;
}

/QEEL/

/* QUI EST EN LIGNE */
.groupes {
font-variant: small-caps;
font-family: georgia;
font-weight: bold;
font-size: 13pt;
text-align: center;
word-spacing: 15px;
font-family: georgia;
text-shadow: 0px 0px 10px #2801C5;
}

.soul-ignage {
padding-top: 5px;
margin-right: 20px;
margin-left: 20px;
border-bottom: 3px dotted #7A2B54;
}

.statistiques {
text-align: justify;
padding-left: 10px;
padding-right: 10px;
margin-top:10px;
border-right: 3px dotted #7A2B54;
}

.scro-last {
text-align: justify;
height: 80px;
overflow: auto;
padding-right: 3px;
}

.titre_pa {
text-align: left;
border-bottom: 2px solid #5C4143;
}

.opacity {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}

.opacity:hover {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity: 1;
}

.navig {
font-weight: bold;
font-variant: small-caps;
}

a.navig {
text-decoration: none !important;
}

/PROFIL/

div.infobulle_avatar em {
display: none;
}

div.infobulle_avatar:hover {
background: none;
z-index: 999;
cursor: hand;
position: relative;
text-decoration: none;
border: 0;
}

.postdetails.poster-profile a img {
-moz-border-radius:10px; /*Arrondi des bords du contour*/
-webkit-border-radius: 10px; /*Arrondi des bords du contour*/
border: 5px solid #D2C5EB; /*Contour*/
margin-top: 10px; margin-bottom: 10px; margin-left: 4px; margin-right: 4px; /*Marges autour de l'avatar*/
}

div.infobulle_avatar:hover em {
font-style: normal; /*écriture de la police*/
font-size: 10px; /*taille de la police*/
color:#000 !important; /*couleur de la police*/
padding: 3px;
display: block;
position: absolute;
-moz-border-radius:10px; /*Arrondi des bords du contour*/
-webkit-border-radius: 5px; /*Arrondi des bords du contour*/
border-radius: 5px ; /* bord arrondis*/
background-color: #FFF; /*couleur de fond de l'infobulle*/
border: 3px solid #D2C5EB; /*Contour*/
width:150px; /*largeur de l'infobulle*/
top: 100px; /*infobulle à 100px du haut*/
left: 100px; /*infobulle à 100px de la gauche*/
}

merci d'avance à celui qui arrive à trouver la source du problème (je précise qu'au cas où j'ai essayé divers navigateur et ça venait pas de là)

Coucou !

J'ai envie d'essayer ça *O* mais est-ce que vous avez un aperçu s'il vous plaît ? ^^

Coucou, alors je ne sais pas si c'est censé être ça comme effet.. Mais moi, les infos s'affichent & dès que l'on met la souris sur l'avatar, elles disparaissent et s'affichent dans l'infobulle.. C'est possible de les enlever totalement de la page & qu'elles ne soient que dans l'infobulle ? :S

Merci pour ce tuto; il est SUPER! Very Happy

Merci, c'est très pratique !

Super code!
Ça marche a merveille (dommage que mon fondo' en veuille pas XD)!

Alors moi, mon problème est très simple (je pense du moins xD) j'ai créé l'infobulle pour la feuille de personnage, sauf que les informations ne sont pas dans l'infobulle mais à l'extérieure... xD

Merci infiniment pour ce tutoriel!

Arf, petit problème ; les bords ne sont pas arrondis x__x

Ce tuto marche hyper bien! Merci!! Bravo !

Mais j'ai un léger problème: comment faire pour que les rangs apparaissent tout de même?
Merci à celui qui me répondra...

+1 ^^

Code:: </span>


<div class="infobulle_avatar">{postrow.displayed.POSTER_RANK}

{postrow.displayed.RANK_IMAGE}
{postrow.displayed.POSTER_AVATAR}

<em>

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

{postrow.displayed.POSTER_RPG}

</em></div>

on le met ou?

Reprenez le tuto de Haribot et utilisez mon code à la place du 2ème du tuto.

Merci pour ce fabuleux tutorial !!! Je les utilisé est j'adore Smile

Mettre les infos de profils dans une infobulle (messages)

Mettre les infos de profils dans une infobulle (messages)

Sujets similaires

Sujets similaires

Partenaires Or