[résolu] Profil en onglets Bouton_active[résolu] Profil en onglets Bouton_hover[résolu] Profil en onglets Fb-hover[résolu] Profil en onglets Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
[résolu] Profil en onglets EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
[résolu] Profil en onglets EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
[résolu] Profil en onglets EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[résolu] Profil en onglets EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[résolu] Profil en onglets EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[résolu] Profil en onglets EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[résolu] Profil en onglets EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
[résolu] Profil en onglets EmptyMar 07 Fév 2023, 08:40 par Oxtran

-20%
Le deal à ne pas rater :
Ecran PC GIGABYTE 28″ LED M28U 4K ( IPS, 1 ms, 144 Hz, FreeSync ...
399 € 499 €
Voir le deal

Partagez
 

[résolu] Profil en onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas 
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
Bonjour, bonsoir Very Happy
En tentant de mettre mon profil en onglet (profil de base et feuille personnage séparés donc), un petit souci a pointé le bout de son nez. Le code ne fonctionne que sur la fiche du premier posteur. La raison ? L'ID ! Ir un id n'est utilisé qu'une seule fois sur une page, donc ici sur le premier posteur et non les autres. Mais voilà, j'ai tenté d'autres codes et le seul que j'ai réussi à faire fonctionner (à moitié) et bien c'est celui-ci ! un petite alternative à l'id ?

souci en image
Spoiler:

CODE SOUS HIDE
la partie concernée de mon template viewtopic_body


le css concerné


et enfin, le javascript


Voilà, voilà Smile
Si besoin de renseignements supplémentaires n'hésitez surtout pas <3

Un très grand merci d'avance et bon courage Smile


Dernière édition par jamie. le Sam 04 Mai 2013, 05:43, édité 1 fois
MessageSujet: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 08:48
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



[résolu] Profil en onglets Empty
Bonjour,

Sauf erreur de ma part, il existe un tutoriel sur le forum des forums permettant d'avoir un profil en onglets, il en a d'ailleurs été question récemment sur CSSActif... *fait une recherche* Ah, voilà, dans ce sujet. Méthode alternative possible, donc.

Il y a également un code à copier coller à jour sur CSSActif qui n'utilise pas la vieille méthode pas optimisée que tu emploies, en particulier il ne dépend pas des identifiants Wink


Dernière édition par 'Christa le Lun 07 Juin 2021, 10:19, édité 1 fois
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 09:57
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
Bonjour,
J'essaie de ce pas, je prendrais le temps de mieux chercher la prochaine fois. Merci beaucoup [résolu] Profil en onglets 577704309
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 09:59
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
Encore moi ^^' (désolée du double post)
J'ai tenté le tutoriel que tu m'as donc donné; en vain. Les onglets ne fonctionnent même pas :l
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 10:44
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



[résolu] Profil en onglets Empty
Les doubles posts étant interdits, pense à éditer ton message la prochaine fois ^^'

Pour pouvoir t'aider, j'ai besoin du lien de ton forum et des codes que tu as mis en place, je n'ai pas de boule de cristal opérationnelle en stock XD
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 10:50
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
ah mince j'avais pas remarqué les boutons, c'est perturbant que ce soit en bas xD

le lien : http://staypositive.forumactif.com/t29-regles-du-forum

template view_topic
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">
        <!-- 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>
      <td align="center" 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="center">
      <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="center" 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="center" valign="top"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END topicpagination -->
  {POLL_DISPLAY}
  <!-- BEGIN postrow -->
  <!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="postdetails poster-profile">
                                  <div class="profilentour">
                                    {postrow.displayed.POSTER_AVATAR}<br />
                                    <center><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><span style="font-family: 'Times New Roman'; font-size: 22px; font-weight: bold; font-style: italic; margin-bottom:4px;">{postrow.displayed.POSTER_NAME}</span></strong></span></center>
                                  <center><div class="rank" style="padding-top: -8px;">{postrow.displayed.POSTER_RANK}</div></center>
                                  </div>
                                  <br />
                                 
                                          <div class="systab">
          <div>
            <span>Profil</span>
            <div class="profilentour"><!-- BEGIN profile_field -->
            <span id="delf2" class="profile_field">{postrow.displayed.profile_field.LABEL}</span>
{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<script type="text/javascript">
  jQuery('#delf2').html(jQuery('#delf2').html().replace(/: /g,'— ')).removeAttr('id');
 </script>
              <!-- END profile_field --></div>
          </div>
          <div>
            <span>Petit plus</span>
            <div class="profilentour"><div align="left"><div class="profilmasque" onClick="this.firstChild.src=(this.firstChild.src=='https://2img.net/h/oi50.tinypic.com/2j0fp0p.png')?'https://2img.net/h/oi46.tinypic.com/qri3iq.png':'https://2img.net/h/oi50.tinypic.com/2j0fp0p.png';this.lastChild.style.display=(this.firstChild.src=='https://2img.net/h/oi50.tinypic.com/2j0fp0p.png')?'none':'block';" style="text-align: center; padding: 3px;"><input type="image" src="https://2img.net/h/oi50.tinypic.com/2j0fp0p.png"/><div style="display: none; text-align: center;"><span id="rpgone">{postrow.displayed.POSTER_RPG}</span>
        <script type="text/javascript">jQuery('#rpgone').html(jQuery('#rpgone').html().replace('Feuille de personnage','')).removeAttr('id')</script></div></div></div></div>
          </div>

        </div>       
        </span>
        <img src="https://2img.net/i/fa/vide.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 -->

                  <div class="message_contenu">

                    {postrow.displayed.MESSAGE}

                    <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                    </div>
                  </div>
                  <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>
  <!-- BEGIN first_post_br -->
</table>
<br />
<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="3" height="28">
        <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
  </tr>
  <!-- END no_post -->
  <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>
      <!-- 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}<br />
        <!-- 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"><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>
<!-- 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>

css
Code:
/* ONGLETS */
/* .systab .tab => les onglet */
.systab .tab {
    display:inline-block;
    padding:3px;
    cursor:pointer;
background-color: #f3f3f3;
border: 1px solid #c0c0c0;
letter-spacing: -1px;
padding-bottom: 3px;
padding-top: px;
margin-top: 2px;
  cursor: pointer;}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  background: #b8efa1;
  color: #487f31;
  border-color: #487f31;}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  color: #ccc;
  background: #333;}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
    background-color: transparent;
    margin-top:-1px;
    padding:5px;
    display:none;
  text-align: justify;
  font-size: 11px;
  font-family: DejaVu Sans; }
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;}


et enfin JS
Code:
$(function () {
  var d = function () {
      if ($(this).is(".selected")) return;
      var a = $(this).closest(".systab");
      a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
      $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
  };
  $("div.systab").each(function () {
      var a = $("> div", this).detach(),
          c = [],
          b;
      $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
          "tabs" : "contents") + '"></div>');
      $(a).each(function () {
          b = $(this).children(":first");
          b.is("span") ? (c = $(c).add($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
      });
      $("> div.tabs", this).append(c);
      $("> div.contents", this).append(a);
      b = $(".content:first,.content.selected", this).last();
      $(b).addClass("selected").siblings().hide();
      $(b).data("tab").addClass("selected")
  }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
});

Merci beaucoup de t'occuper de mon cas ^^
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 10:54
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



[résolu] Profil en onglets Empty
Hum, c'est peut-être à cause du div avec profilentour ? Retire ça et essaie d'utiliser un code aussi "basique" que possible, pour voir ?
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 13:45
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
Toujours pas :l

Du coup je reposte comme j'en ai profité pour retirer le afficher/masquer
Code:
<div class="systab">
          <div>
            <span>Profil</span>
            <!-- BEGIN profile_field -->
            <span id="delf2" class="profile_field">{postrow.displayed.profile_field.LABEL}</span>
{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<script type="text/javascript">
  jQuery('#delf2').html(jQuery('#delf2').html().replace(/: /g,'— ')).removeAttr('id');
 </script>
              <!-- END profile_field -->
          </div>
          <div>
            <span>Petit plus</span>
            <div align="left">{postrow.displayed.POSTER_RPG}</div>
                                           
                                            </div>
                                    </div>
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 13:51
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[résolu] Profil en onglets Empty
Bonjour Jamie,

Ce script me parle tout à fait parce-qu'il me semble l'avoir déjà traité un jour.

Et après quelques recherches dans mes souvenirs, voici le problème résolu[ qui mettait en jeu ce script. Concrètement, il est résolu dans mon dernier message de la première page. Je te suggère de regarder le code proposé et de le comparer avec le tien. De même, vérifie que tu place le JS au bon endroit (mais il me semble que oui).

J'espère que cela saura te dépanner. Sinon et si tu as des questions / des choses que tu ne comprends pas, n'hésites pas à demander Smile
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 16:24
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
Code:
                        <div class="systab s_slide">
  <div>
    <span>En profil</span>
    <div class="postdetailinfo">
      <!-- BEGIN profile_field -->
      {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field --></div>
  </div>
  <div>
    <span>En +</span>
    <div class="postdetailinfo"> {postrow.displayed.POSTER_RPG}</div>
  </div>
  <div>
    <span>Contact</span>
  <div class="postdetailinfo"> <br />
    <center>{postrow.displayed.PROFILE_IMG}
                {postrow.displayed.PM_IMG} <br /><br />
                  {postrow.displayed.EMAIL_IMG}
                  {postrow.displayed.contact_field.CONTENT}<br /><br /></center>
                  </div>
  </div>
</div>     

est-ce bien l'unique changement me concernant dans ce template ? si oui, et bien... sans résultat :l (j'ai également changé le JS)

EDIT: Voici mon template
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMar 09 Avr 2013, 16:41
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[résolu] Profil en onglets Empty
Bon, alors après quelques tests ce n'est pas le script ni la structure qui semble poser problème.

En revanche, pourrais-je avoir ton CSS par hasard ? Je pense qu'il y a quelques propriétés qui ne vont pas de ce côté là pour commencer (un display: none; qui ne devrait pas exister dans .systab .contents).
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMer 10 Avr 2013, 15:48
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty


Les onglets sont toute à la fin Smile
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMer 10 Avr 2013, 15:50
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[résolu] Profil en onglets Empty
Bon alors effectivement comme je viens de le soulever il faudrait supprimer le display: none; qui est contenu dans le sélecteur .systab .contents vu que en gros, ça masquera toujours tes onglets.

Mais cela ne résoudra pas le soucis, or en isolant le code HTML/CSS/JS dont tu dispose (et en corrigeant le point ci-dessus), cela fonctionne.
Ce qui veut dire que le problème vient d'ailleurs dans ton environnement... C'est donc un peu plus complexe et il faut que j'investigue...


Résout déjà ce soucis de CSS pour commencer Smile
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyJeu 11 Avr 2013, 04:04
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
Fait ! [résolu] Profil en onglets 1688815589
Donc en effet, ça ne fonctionne pas mais on voit le profil haha

Aurais-tu besoin d'autres chose ? Tous mes templates modifiés par exemple ?
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyJeu 11 Avr 2013, 04:17
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



[résolu] Profil en onglets Empty
Bonsoir,

Ton problème est-il toujours d'actualité ? Merci de donner une réponse dans un délai de quatre jours sinon ton sujet sera archivé et verrouillé !

Bonne soirée, Smile
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyJeu 18 Avr 2013, 15:50
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
Bonsoir,
oui, mon problème est toujours d'actualité. Merci de la relance et bonne soirée à toi Smile
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyJeu 18 Avr 2013, 15:52
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



[résolu] Profil en onglets Empty
Bonsoir !

Le problème est-il toujours d'actualité ? Merci de relancer de temps en temps si tu n'obtiens pas de réponse. D'ici quatre jours, si tu ne réponds pas le sujet sera archivé !

Bonne soirée.
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyLun 22 Avr 2013, 15:10
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
toujours d'actu
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyLun 22 Avr 2013, 15:17
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[résolu] Profil en onglets Empty
Désolé de ce délai de réponse extrêmement long tout d'abord.

Ensuite, j'ai du mal à comprendre pourquoi ce bug existe... Cela doit s'agir d'un problème de timing (bien que je n'en ai pas l'impression) ou bien d'une erreur lors de l'exécution qui empêche le bon déroulement de la fin du script... Je n'ai pas plus investigué mais tu pourrais essayer de remplacer cette partie du JS :

Code:
$("div.systab").each(function() {
        var a = $("> div", this).detach(), c = [], b;
        $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ? "tabs" : "contents") + '"></div>');
        $(a).each(function() {
            b = $(this).children(":first");
            b.is("span") ? (c = $(c).add($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
        });
        $("> div.tabs", this).append(c);
        $("> div.contents", this).append(a);
        b = $(".content:first,.content.selected", this).last();
        $(b).addClass("selected").siblings().hide();
        $(b).data("tab").addClass("selected")
    }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)

Par ceci :

Code:
$("div.systab").each(function() {
        var a = $("> div", this).detach(), c = [], b;
        $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ? "tabs" : "contents") + '"></div>');
        $(a).each(function() {
            b = $(this).children(":first");
            b.is("span") ? (c = $(c).add($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
        });
        $("> div.tabs", this).append(c);
        $("> div.contents", this).append(a);
        b = $(".content:first,.content.selected", this).last();
        $(b).addClass("selected").siblings().hide();
        $(b).data("tab").addClass("selected")
    });
$("div.systab").on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d);

Je ne pense pas que ça change grand chose (a priori ça ne devrait pas) mais au stade où l'on en est...
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyMer 01 Mai 2013, 19:55
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
Encore et toujours rien.. :l
Aucun souci pour l'attente, tu as une vie en dehors ^^
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyJeu 02 Mai 2013, 04:53
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[résolu] Profil en onglets Empty
Hmmmm es-tu bien sûr que ton script est bon ?

De mon point de vue j'ai une erreur, est-ce-que tu pourrais remplacer ton code actuel par très exactement celui-ci et voir ce que ça donne :

Code:
$(function () {
    var d = function () {
        if ($(this).is(".selected")) return;
        var a = $(this).closest(".systab");
        a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
        $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
    };
    $("div.systab").each(function () {
        var a = $("> div", this).detach(),
            c = [],
            b;
        $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ? "tabs" : "contents") + '"></div>');
        $(a).each(function () {
            b = $(this).children(":first");
            b.is("span") ? (c = $(c).add($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
        });
        $("> div.tabs", this).append(c);
        $("> div.contents", this).append(a);
        b = $(".content:first,.content.selected", this).last();
        $(b).addClass("selected").siblings().hide();
        $(b).data("tab").addClass("selected")
    });
    $("div.systab").on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d);
});
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptyVen 03 Mai 2013, 20:39
Revenir en haut Aller en bas
jamie.
jamie.
{ Membre }
{ Membre }

Féminin Messages : 17



[résolu] Profil en onglets Empty
ça fonctionne à merveille ! Merci beaucoup pour ta patience et ton aide [résolu] Profil en onglets 2176505670
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptySam 04 Mai 2013, 05:42
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[résolu] Profil en onglets Empty
De rien, pas de soucis et bonne journée à toi Smile
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptySam 04 Mai 2013, 14:38
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



[résolu] Profil en onglets Empty
Hello,

J'archive. ^^
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets EmptySam 04 Mai 2013, 16:19
Revenir en haut Aller en bas
Contenu sponsorisé




[résolu] Profil en onglets Empty
MessageSujet: Re: [résolu] Profil en onglets   [résolu] Profil en onglets Empty
Revenir en haut Aller en bas
 

[résolu] Profil en onglets

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [résolu] Profil en onglets : le script ne marche pas ?
» [Résolu] Organisation par Onglets
» Les onglets, encore eux [RÉSOLU]
» Problème d'onglets (Résolu)
» [RESOLU] Système d'onglets pour la P.A

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit