Onglet "En ligne" sur le côté du profil

[*angiesworld*]

Avant tout.. Bonjour à vous,

Si je vous écrit aujourd’hui c’est parce que j‘ai beau avoir cherché je n‘ai pas trouvé la chose désirée.
Un peu plus clairement je vais tacher de m’expliquer..
J’ai constaté sur certains forum qu’il était possible de mettre un onglet sur le côté du profil afin de signaler si la personne est, ou non, connecté. En ligne (Online) ou Hors ligne (Offline)
Comme ceci :

Spoiler:

Je voulais donc savoir si, parmi vous, il y aurait des gens susceptible de pouvoir m’aider à réaliser le même effet?!

Merci par avance à ceux qui viendront m’éclairer
Bien à vous..

[SoraNoHime]

Bonjour Angieworld

J'aurai besoin de ton template viewtopic_body ^^

Amicalement.

[*angiesworld*]

Bonsoir Macema ^_^

Je te donne ça de ce pas!
Et merci encore une fois (pour ne pas changer face à tant de bonté) à toi.. ♥

Code:

 <script type="text/javascript">
                //<![CDATA[
                var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}';
                var multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
                //]]>
                </script>

                <table width="100%" border="0" cellspacing="2" cellpadding="0">
                  <tr>
                      <td align="left" valign="middle" nowrap="nowrap">
                        <span class="nav">
                        <!-- BEGIN switch_user_authpost -->
                        <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>
                        <!-- END switch_user_authpost -->
                        <!-- BEGIN switch_user_authreply -->
                        <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
                        <!-- END switch_user_authreply -->
                        </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>
                      <!-- BEGIN insert_plus_menu -->
                      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
                        <span class="gensmall bold">
                            <script type="text/javascript">
                            //<![CDATA[
                              insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
                            //]]>
                            </script>
                        </span>
                      </td>
                      <!-- END insert_plus_menu -->
                  </tr>
                </table>

                <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr align="right">
                      <td class="catHead" colspan="2" 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>
                  <!-- BEGIN topicpagination -->
                  <tr>
                      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
                  </tr>
                  <!-- END topicpagination -->
                  {POLL_DISPLAY}
                  <tr>
                      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
                      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
                  </tr>
                  <!-- BEGIN postrow -->
                  <!-- BEGIN displayed -->
                  <tr class="post">
                <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="200">
                        <div class="profilentour"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a></span>
                            <span class="postdetails poster-profile"><center>{postrow.displayed.POSTER_AVATAR}

                <br/>
                <br/>
                            {postrow.displayed.POSTER_NAME}

                            {postrow.displayed.RANK_IMAGE}

                            </strong></span></span></div><br/>

                            <div class="profilentour"><span class="postdetails poster-profile">
                <!-- BEGIN profile_field -->
                            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                            <!-- END profile_field --></span></div><br/>
                            <div class="profilentour"><span class="postdetails poster-profile">{postrow.displayed.POSTER_RPG}
                <div class="profilentour"><span class="postdetails poster-profile"></center></span></div>
                        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                      </td>
                      <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">
                                  <!-- BEGIN switch_vote_active -->
                                  <div class="vote gensmall">
                                    <!-- BEGIN switch_vote -->
                                    <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                                    <!-- END switch_vote -->

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

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

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

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

                                  <span class="postbody">
                           
                                    {postrow.displayed.MESSAGE}
                           
                                    {postrow.displayed.SIGNATURE}
                                  </span>
                                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
                              </td>
                            </tr>
                        </table>
                      </td>
                  </tr>
                  <tr>
                                  <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>
                              <td 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}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
                                      </td>
                            </tr>
                        </table>
                      </td>
                      </tr>
        <tr>
        <td></td>
          <td colspan="2" align="center">
            <img src="http://img199.imageshack.us/img199/1280/11052509543711925482167.png" />
                      </td>
                  </tr>
                  <!-- BEGIN first_post_br -->
                </table>
             

                <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
                  <tr>
                      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
                      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
                  </tr>
                  <!-- END first_post_br -->
                  <!-- END displayed -->
                  <!-- BEGIN hidden -->
                  <tr>
                      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
                  </tr>
                  <!-- END hidden -->
                  <!-- END postrow -->
                  <!-- BEGIN no_post -->
                  <tr align="center">
                      <td class="row1" colspan="2" height="28">
                        <span class="genmed">{no_post.L_NO_POST}</span>
                      </td>
                  </tr>
                  <!-- END no_post -->
                  <tr align="right">
                      <td class="catBottom" colspan="2" 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>
                      <!-- BEGIN topicpagination -->
                      <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
                      <!-- END topicpagination -->
                  </tr>
                  <!-- BEGIN switch_user_logged_in -->
                  <!-- BEGIN watchtopic -->
                  <tr>
                      <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
                  </tr>
                  <!-- END watchtopic -->
                  <!-- END switch_user_logged_in -->
                  <tr>
                      <td class="row2" colspan="2" align="center" style="padding:0px">
                        <!-- BEGIN switch_user_logged_in -->
                        <a name="quickreply"></a>
                        {QUICK_REPLY_FORM}

                        <!-- END switch_user_logged_in -->
                      </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>
                      <!-- BEGIN show_permissions -->
                      <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>
                      <!-- END show_permissions -->
                      <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>
                                  <!-- BEGIN show_permissions -->
                                  <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>
                                  <!-- END show_permissions -->
                              </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">
                            <!-- BEGIN switch_user_authpost -->
                            <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>
                            <!-- END switch_user_authpost -->
                            <!-- BEGIN switch_user_authreply -->
                            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
                            <!-- END switch_user_authreply -->
                        </span>
                      </td>
                      <!-- BEGIN viewtopic_bottom -->
                      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
                      <!-- END viewtopic_bottom -->
                      <!-- BEGIN moderation_panel -->
                      <td align="center">
                        <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
                      </td>
                      <td align="center" width="250">
                        <span class="gensmall"> </span>
                      </td>
                      <!-- END moderation_panel -->
                  </tr>
                </table>
                </form>

                <!-- BEGIN viewtopic_bottom -->
                <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
                  <tr>
                      <td colspan="2" align="left" valign="top" nowrap="nowrap">
    {S_TOPIC_ADMIN}

                        <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}
    {S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
                        </form>
                      </td>
                  </tr>
                </table>
                <!-- END viewtopic_bottom -->

                <!-- BEGIN switch_image_resize -->
                <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>
                <!-- END switch_image_resize -->

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

[SoraNoHime]

Dans ton template, repére

Code:

{postrow.displayed.ONLINE_IMG}

c'est la balise du "En ligne"

supprime la de l'endroit où elle se trouve.
Puis, repère :

Code:

<span class="postdetails poster-profile"><center>{postrow.displayed.POSTER_AVATAR}

remplace le par :

Code:

<center><span class="postdetails poster-profile"><span id="onoutline">{postrow.displayed.ONLINE_IMG}</span>{postrow.displayed.POSTER_AVATAR}

puis dans la css mets :

#onoutline{
background: url('adresse de ton icône hors ligne') no-repeat;
width: largeur de l'imagepx;
height: hauteur de l'imagepx;
}

Il faut veiller à ce que l'avatar ne fasse pas la totalité de la taille de la colonne, et que l'image en ligne se trouve dans la gestion des images.

[*angiesworld*]

Merci..
Malheureusement cela ne semble pas vraiment fonctionner.
Non seulement l’image ne vient pas à s’afficher, mais le seul changement qu’il ai eu c’est celui de l’icône « En ligne » venant se collé à l’avatar des membres, ce qui n’est pas son emplacement normalement. (En effet l’onglet n’est pas censé être collé à l’avatar mais plus au cadre du profil, de ce que j'en ai vu tout du moins)
Comme ici présent: (La petite icône verte)


En revanche pour ceux qui sont hors ligne rien n’a changé.. L’icône « Hors Ligne » n’apparaît même plus.

De plus si je met une image en guise d'onglet pour ceux qui sont hors ligne, ne devrais je pas faire la même chose pour ceux qui sont en ligne?!

Et pour finir vous me dites qu’il faut veiller à ce que l'avatar ne fasse pas la totalité de la taille de la colonne, et que l'image en ligne se trouve dans la gestion des images..
Et donc en bonne quiche qui se respecte je dis « Hein?! » xD
Je ne suis pas sur d’avoir bien compris ce que tu voulais dire par là.

Je ne sais pas de quelle colonne il s’agit au juste lorsqu’il pour ce qui est de la taille de l’avatar inférieur à celle de la colonne. Puis pour l’image en ligne se trouvant dans la gestion des images, c’est-à-dire?!
Encore désolé de tant en demander..

[SoraNoHime]

En fait, quand je parle d'image pas trop grande, c'est pour que l'avatar ne passe pas en dessous de l'icone en ligne.

exemple si vous avez une colonne qui fait 150px avec un en ligne de 10px et un avatar de 145px, 10 + 145 = 155, donc ton avatar se mettra en dessous par défaut.

pour l'image du en ligne elle se trouve dans la gestion des image à PA > Affichage > Gestion des images > mode avancé > onglet boutons > En ligne :

elle susplante l'image du hors ligne normalement quand la personne est connectée.

je vais tenter de placer cela autrement. Je te tiens au courant.

[*angiesworld*]

Ce que je n’ai pas comprit c’est que la taille de l’avatar ne devrait pas poser problème du fait que l’onglet « En Ligne » est contre la colonne, il n’y a donc pas d’addition à faire tant que l’avatar est plus petit que la colonne.
Pas très clair tout ça je te l’avouerai.. xD. Pas très doué moi.
Mais ce que je veux dire c’est que si l’avatar fait 145px, que la colonne fait 150 et l’onglet 10px il n’y aura pas de problème
Du fait que l’onglet est collé à la colonne et non à l’avatar donc y a pas a additionné.
Tu vois ce que j’veux dire?!

Pour ce qui est de l’image en ligne je n’étais pas sur de ce que tu voulais dire. Merci donc de m’avoir éclairer sur ce sujet.
Cela signifie que si je veux changer aussi l’image en ligne pour l’utiliser comme onglet il faudra que je passe par mes boutons c’est ça?!
Je passe seulement via mon CSS pour l’image Hors Ligne?! ^_^

Puis merci de me tenir informé ma chips adorée..

[SoraNoHime]

Ok, donc c'est ce que je disais, je vais voir cela autrement. Mais ça va me prendre un peu plus de temps ^^.

Tu peux déjà remettre ton template comme au début, par contre inutile d'enlever la css, elle servira ainsi, même si j'aouterai de petits changements.

[*angiesworld*]

Prends le temps qu’il faudra pour ça.. J’te fais confiance dans tous les cas.
Tu connais la situation donc je ne m’en fais pas..

J’ai remit le template comme il était et ai gardé le CSS comme tu le voulais.

[SoraNoHime]

Reprend les changements précédents, mais au dernier remplace par :

Code:

<center><span class="postdetails poster-profile"><div id="onoutline">{postrow.displayed.ONLINE_IMG}</div>{postrow.displayed.POSTER_AVATAR}

Normalement si tu enregistres là, tu devrais voir le hors ligne apparaitre. Mais il se trouve au dessus de l'avatar. on va donc devoir le déplacer.

Pourrais-je avoir le lien de l'endroit où tu as trouvé ce scan ?

[*angiesworld*]

Après rectification des codes, comme demandé.. Le hors ligne apparaît en effet.
Le petit souci c’est qu’il apparaît également au gens qui sont en ligne, et en plus de la petite icône « En Ligne ».
Vois plutôt :


Pour ce qui est du forum sur lequel l’exemple a été prit, le voici :
http://www.goldheartofficiel.com/forum

[SoraNoHime]

Pour les images c'est normal, vu qu'il faut que le en ligne soit de la même taille que le horsligne pour faire cette effet. Un oubli de ma part.

Donc ensuite dans la css il faut mettre :

#onoutline {
background: url('adresse de ton image') no-repeat;
position: absolute;
float: left;
width: largeur de ton imagepx;
height: hauteur de ton imagepx;
margin-left: -10px;
margin-top: 10px;
}

le margin-left permet de la décaler vers la gauche, le margin-top vers le bas.

[*angiesworld*]

Ah donc enfaîte l’image Hors Ligne sera toujours présente même sur le En Ligne.
L’image du En Ligne devant faire la même taille que l’autre.. Celle-ci ne fera que recouvrir celle du Hors Ligne c’est ça?!
Bon pas sur que ce soit très clair tout ça ma foi.. xD

Pour le CSS.. Tout semble Ok.
Mais je me demande si il n’y a pas une autre façon de faire?!
Je m’explique.. Quand je vais sur le forum dont l’exemple est tiré.. Via Mozilla comme via Internet Explorer l’onglet apparaît sans souci au même endroit exactement comme il est sur Mozilla..
Tandis que pour moi.. Lorsque je vais sur mon forum par le biais d’Internet Explorer, l’onglet se trouve en plein sur le profil.. Au lieu d’etre sur le rebord, comme il figure via Mozilla.
N’y aurait il pas un moyen de « l’attaché » directement sur le rebord du profil ou du forum?!

PS: Par contre c’est normal que le code CSS commence par un # au lieu d’un point?!

[SoraNoHime]

Ah donc enfaîte l’image Hors Ligne sera toujours présente même sur le En Ligne.
L’image du En Ligne devant faire la même taille que l’autre.. Celle-ci ne fera que recouvrir celle du Hors Ligne c’est ça?!
Bon pas sur que ce soit très clair tout ça ma foi.. xD

Exactement ^^

Pour le CSS.. Tout semble Ok.
Mais je me demande si il n’y a pas une autre façon de faire?!
Je m’explique.. Quand je vais sur le forum dont l’exemple est tiré.. Via Mozilla comme via Internet Explorer l’onglet apparaît sans souci au même endroit exactement comme il est sur Mozilla..
Tandis que pour moi.. Lorsque je vais sur mon forum par le biais d’Internet Explorer, l’onglet se trouve en plein sur le profil.. Au lieu d’etre sur le rebord, comme il figure via Mozilla.
N’y aurait il pas un moyen de « l’attaché » directement sur le rebord du profil ou du forum?!

Bizarre, car j'ai en fait vérifié mon code, vis à vis du leur pour être certaine de ne pas m'etre trompée, mais c'est bien cela. Il faut adapter les margin, je sais qu'ils posent problème selon les navigateurs. Modifie les données à ce niveau pour adpater.

PS: Par contre c’est normal que le code CSS commence par un # au lieu d’un point?!

Oui car ce n'est pas une class dans le code, mais un id

[*angiesworld*]

Ils ont eu la bonté et la générosité de bien vouloir « partager » leur secret?! Et beh..
J’penserai à les remercier ♥

Néanmoins les margin ont déjà été adapter..

Code:

#onoutline {
background: url('http://img94.imageshack.us/img94/9913/profilot.png') no-repeat;
position: absolute;
float: left;
width: 19px;
height: 127px;
margin-left: -30px;
margin-top: 10px;
}

Mais je les ai adapté vis-à-vis de mon navigateur à savoir Mozilla
Et quand je vais sur IE (la navigateur de certains des membres) ça donne tout autre chose.
Donc si je réadapte à IE j’ai peur que cela modifie sur Mozilla et que ça rende quelque chose de pas très esthétique au final quoi.

Puis merci encore pour les précisions..
J'finirai pas m'ameliorer niveau CSS à force qui sait!

[SoraNoHime]

^^ je pense oui, on finit par s'y faire au css.

Ie est une plaie pour certaines choses, mais bon il n'y a pas vraiment le choix. Je ne vois pas comment trop faire autrement désormais. --'

[*angiesworld*]

Ok. Et bien dans ce cas les membres n’auront qu’à se procurer Mozilla pour profiter au mieux des effets données.
J’le préciserai sur le forum de toute façon..
Avec le retard de IE par rapport à Mozilla il vaudrait sans doute mieux ma foi.

Puis pour l’amélioration côté codage.. Y a plus qu’a espérer! Héhé
Merci encore pour l’immense aide apportée!
Avec tout ça j’devrais t’être reconnaissante à tout jamais..

Puis vu la pas douée que fais j’te dis peut etre à bientôt qui sait..
Prend soin de toi dans tous les cas!
Amicalement, Moi