Onglet coulissant sur les catégories et sous forums

[chocobook]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : Aujourd'hui
Lien du forum : http://lecafelitteraire.exprimetoi.net/

Description du problème

Hello,
j'ai un gros soucis avec les onglets coulissants sur les sous-forums.
Sur mon ancien forum les onglets fonctionnent bien et quand ils coulissent bien jusqu'à la droite et s'arrêtent a coté de l'image.
Voir les croquis
Image 1


Image 2
Quand ils coulissent


Et sur mon forum actuel, j'aimerai garder le contour arrondi mais avec les onglets ça donne ça


et en coulissant ça déborde hors du forum


Tout est en décalé.

J'aimerai que les onglets soient comme sur l'image 1 et 2 tout en gardant l'arrondi et que les onglets le soit aussi.
En espérant que quelqu'un m'aide.
Merci

[Yoshikuni]

Coucou,

Il faut mettre une largeur dans ton code au niveau de la description ou alors tu mets un texte, est-ce que tu pourrais me passer ton HTML et ton CSS, s'il te plait ?

Merci beaucoup

[chocobook]

Coucou,

Voilà le css

Code:

Catégories et forum
------------------------------------------------ */
.forumcat {width: 100%;}
.forumcat_titre{height:30px;line-height:30px;border: 1px # solid;background-image: url(http://img11.hostingpics.net/pics/193691barre.png);background-position: center top;}
.secondarytitle1,.secondarytitle1 h2 {text-shadow: none !important;margin: 0;padding: 0;color: #0c0105;font-size: 12px;font-weight: bold;text-transform: uppercase;}
.secondarytitle1 h2{display:inline;}
.bg-desc{background-color: transparent;background-image: url(http://i62.tinypic.com/2q32ijl.png);border: 1px #704735 solid;background-repeat: no-repeat;background-position: center center;}
.link-titre{color: #0c0105;font-size: 11px;font-style: normal;font-weight: bold;text-transform: uppercase;text-decoration: none !important;text-shadow: 0 1px 0 #ffffff;-webkit-transition: all .6s ease-in;-moz-transition: all .6s ease-in;-o-transition: all .6s ease-in;transition: all .6s ease-in;}
.link-titre:hover{color: #fffff; padding:10px;}
#lapodiv li{list-style:none;width:100px;position:absolute;margin-left:151px;margin-top:38px;}
#lapodiv div{width:0px;margin-top:-115px;left: -15px;padding:0;position: absolute;overflow: hidden;font-family: 'Aldrich', sans-serif;font-size: 11px;font-weight: normal;letter-spacing: 0.6px;white-space: nowrap;-webkit-transition: 0.25s;-moz-transition: 0.25s;transition: 0.25s;}
#lapodiv span{cursor:pointer;padding:0px;text-align:left;font-family: 'Aldrich', sans-serif;font-size: 10px;background-color: #d1bfb6;display:block;position:relative;-webkit-transition: all .6s ease-in;-moz-transition: all .6s ease-in;-o-transition: all .6s ease-in;transition: all .6s ease-in;}
#lapodiv span:hover div{margin-top:-115px;width:708px;height: 112px;overflow:visible;cursor:default;white-space:normal;}
#lapodiv span:hover{text-align:center;text-decoration:none;background-color: #d1bfb6;}
#lapodiv .home{background-position:0 0;}
#lapodiv .home:hover{background-position:0 -39px;}
#lapodiv .home div{background-color:#d1bfb6; }
.lapotable{height: 112px;border-right-width: 6px;border-right-style: solid;border-right-color: #704735;}
.description{ padding-top:4px; width:100%; height:84px; overflow:auto; }
.img-descr{width:166px; height:102px;position:absolute; margin-left:-186px; margin-top:-12px;}
.head1{padding-bottom:30px;background-color: transparent;background-image: url(http://img11.hostingpics.net/pics/230264shadow.png);background-repeat: no-repeat;background-position: center bottom;}
.link-index{margin-left: 5px;padding: 8px 8px 7px 8px;display: inline-table;text-transform: capitalize;font-size: 13px;-webkit-border-radius: 1px 1px 1px 1px;border-radius: 1px 1px 1px 1px;border: 1px solid #704735;background-image: url(http://img11.hostingpics.net/pics/230264shadow.png)background: rgb(255,255,255);background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1)));background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );-webkit-box-shadow: 0 1px 1px 0 #e3e3e3;box-shadow: 0 1px 1px 0 #e3e3e3;-webkit-transition: all .6s ease-in;-moz-transition: all .6s ease-in;-o-transition: all .6s ease-in;transition: all .6s ease-in;}
.link-index:hover{background: rgb(246,246,246);background: -moz-linear-gradient(top,  rgba(246,246,246,1) 0%, rgba(221,221,221,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(221,221,221,1)));background: -webkit-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(221,221,221,1) 100%);background: -o-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(221,221,221,1) 100%);background: -ms-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(221,221,221,1) 100%);background: linear-gradient(to bottom,  rgba(246,246,246,1) 0%,rgba(221,221,221,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#dddddd',GradientType=0 );}
.link-index a{color: #704735 !important;font-style: normal !important;font-weight: normal !important;}

/*------------------------------------------------

Il n'y a pas de HTML, c'est aussi dans la template.

Merci pour ton coup de main. Effectivement il y a un truc dans la description c'est du javascript. Il y a aussi dans les templates.

[Yoshikuni]

Il me faut aussi ton HTML (template) car je ne sais pas à quoi correspond telle ou telle pseudo classe. Si tu as peur, mets le sous hide =)

[chocobook]

Non je n'ai pas peur

Voilà la template index_box

Code:

<div style="height:10px;"></div>
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td>
            <div class="nav"><span style="font-style:normal !important; margin-left:-2px !important;" class="link-index"><a class="gensmall" href="{U_INDEX}">{L_INDEX}</a></span><span class="supprimg">{NAV_CAT_DESC}</span></div>
          </td>
          <td class="gensmall" align="right">       
<!-- BEGIN switch_user_logged_in -->
<span class="link-index"><a class="gensmall" href="{U_SEARCH_NEW}">nouveaux messages</a></span>
<span class="link-index"><a class="gensmall" href="{U_SEARCH_SELF}">ses messages</a></span>
<!-- END switch_user_logged_in -->
<span class="link-index"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">sans réponses</a></span>           
        </td>
      </tr>
    </table>
<!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
<div class="head1">     
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>   
<table class="forumcat_titre" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" class="secondarytitle1"> {catrow.tablehead.L_FORUM} </td>
</tr>
</table>       
    </td>
    </tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center"> 
      <!-- END tablehead -->
      <!-- BEGIN forumrow -->
<table cellspacing="0" cellpadding="0" class="forumcat" border="0">
<tr>
<td style="padding-top:5px;">
<table width="100%" height="112" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="bg-desc" width="176">
<ul id="lapodiv">
<li><span class="home" href="#">Sous Forum
<div>
<table class="lapotable" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</td>
  </tr>
</table>
</div>
</span></li>
</ul>   
    </td>
    <td style="padding-left:15px;" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<a href="{catrow.forumrow.U_VIEWFORUM}"><span class="link-titre">{catrow.forumrow.FORUM_NAME}</span></a>
    </td>
  </tr>
  <tr>
    <td valign="top">
<div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
    </td>
  </tr>
  <tr>
    <td align="right">
<span class="gensmall">{catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</span>   
    </td>
  </tr>
</table>   
    </td>
    <td align="center" width="175">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>   
    </td>
    <td width="46">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </td>
  </tr>
</table>
</td>
</tr>
</table>
<div style="margin-bottom:5px; margin-top:5px;" class="sepa1"></div>
      <!-- END forumrow -->
      <!-- BEGIN tablefoot -->
</td></tr></table>
</td>
  </tr>
</table>   
</div>   
    <div style="width: 100%; height: 4px;"></div>
    <!-- END tablefoot -->
    <!-- END catrow -->

Je ne comprends pas que ça fasse un rendu comme ça.

[Yoshikuni]

Alors, il suffit de modifier la propriété largeur dans la pseudo classe description, au lieu des pourcentage, il faut mettre des pixels. Il suffit juste que tu choisis pour coïncider avec ce que tu veux =)
.description { padding-top:4px; width:100%; height:84px; overflow:auto; }

[chocobook]

Ohhhh génial ça fonctionne. Juste un petit souci, pour le coulissement de l'onglet, il faut qu'il s'ouvre jusqu'à ras de l'image à droite (ancien), et à il s'ouvre mais pas jusqu'au bout. Peux-tu me dire je dois faire ou le petit réglage ?
Merciiii

[Yoshikuni]

C'est toujours une question de largeur, dans ton template tu as mis

Code:

<table class="lapotable" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</td>
  </tr>
</table>

Tu enlèves width="100%" et dans la pseudo-classe .lapotable tu écris la propriété width mais en pixel.

[chocobook]

Ça ne fonctionne pas, ça le met à la vertical.

[Yoshikuni]

Pourrais tu me montrer ce que tu as fait, s'il te plait ?

[chocobook]

J'ai mis px dans le template comme tu me l'a noté et l'ongle descend vers le bas du forum au lieu de coulisser vers la droite.

[Yoshikuni]

Tu as modifié la propriété height ou tu as crée une propriété width: XXpx; ?

[chocobook]

Juste modifié le pourcentage en plus. En espérant que tu puisses m'aider.

[Yoshikuni]

Pourrais-tu me repasser le HTML ainsi que le CSS modifié, sil te plait ?

[chocobook]

Voilà le css

Code:

      Catégories et forum
------------------------------------------------ */
.forumcat {width: 100%;}
.forumcat_titre{height:30px;line-height:30px;border: 1px # solid;background-image: url(http://img11.hostingpics.net/pics/193691barre.png);background-position: center top;}
.secondarytitle1,.secondarytitle1 h2 {text-shadow: none !important;margin: 0;padding: 0;color: #0c0105;font-size: 12px;font-weight: bold;text-transform: uppercase;}
.secondarytitle1 h2{display:inline;}
.bg-desc{background-color: transparent;background-image: url(http://i62.tinypic.com/2q32ijl.png);border: 1px #704735 solid;background-repeat: no-repeat;background-position: center center;}
.link-titre{color: #0c0105;font-size: 11px;font-style: normal;font-weight: bold;text-transform: uppercase;text-decoration: none !important;text-shadow: 0 1px 0 #ffffff;-webkit-transition: all .6s ease-in;-moz-transition: all .6s ease-in;-o-transition: all .6s ease-in;transition: all .6s ease-in;}
.link-titre:hover{color: #fffff; padding:10px;}
#lapodiv li{list-style:none;width:100px;position:absolute;margin-left:151px;margin-top:38px;}
#lapodiv div{width:0px;margin-top:-115px;left: -15px;padding:0;position: absolute;overflow: hidden;font-family: 'Aldrich', sans-serif;font-size: 11px;font-weight: normal;letter-spacing: 0.6px;white-space: nowrap;-webkit-transition: 0.25s;-moz-transition: 0.25s;transition: 0.25s;}
#lapodiv span{cursor:pointer;padding:0px;text-align:left;font-family: 'Aldrich', sans-serif;font-size: 10px;background-color: #d1bfb6;display:block;position:relative;-webkit-transition: all .6s ease-in;-moz-transition: all .6s ease-in;-o-transition: all .6s ease-in;transition: all .6s ease-in;}
#lapodiv span:hover div{margin-top:-115px;width:708px;height: 112px;overflow:visible;cursor:default;white-space:normal;}
#lapodiv span:hover{text-align:center;text-decoration:none;background-color: #d1bfb6;}
#lapodiv .home{background-position:0 0;}
#lapodiv .home:hover{background-position:0 -39px;}
#lapodiv .home div{background-color:#d1bfb6; }
.lapotable{height: 112px;border-right-width: 6px;border-right-style: solid;border-right-color: #704735;}
.description{ padding-top:4px; width:650px; height:84px; overflow:auto; }
.img-descr{width:166px; height:102px;position:absolute; margin-left:-186px; margin-top:-12px;}
.head1{padding-bottom:30px;background-color: transparent;background-image: url(http://img11.hostingpics.net/pics/230264shadow.png);background-repeat: no-repeat;background-position: center bottom;}
.link-index{margin-left: 5px;padding: 8px 8px 7px 8px;display: inline-table;text-transform: capitalize;font-size: 13px;-webkit-border-radius: 1px 1px 1px 1px;border-radius: 1px 1px 1px 1px;border: 1px solid #704735;background-image: url(http://img11.hostingpics.net/pics/230264shadow.png)background: rgb(255,255,255);background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(234,234,234,1)));background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );-webkit-box-shadow: 0 1px 1px 0 #e3e3e3;box-shadow: 0 1px 1px 0 #e3e3e3;-webkit-transition: all .6s ease-in;-moz-transition: all .6s ease-in;-o-transition: all .6s ease-in;transition: all .6s ease-in;}
.link-index:hover{background: rgb(246,246,246);background: -moz-linear-gradient(top,  rgba(246,246,246,1) 0%, rgba(221,221,221,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,246,246,1)), color-stop(100%,rgba(221,221,221,1)));background: -webkit-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(221,221,221,1) 100%);background: -o-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(221,221,221,1) 100%);background: -ms-linear-gradient(top,  rgba(246,246,246,1) 0%,rgba(221,221,221,1) 100%);background: linear-gradient(to bottom,  rgba(246,246,246,1) 0%,rgba(221,221,221,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#dddddd',GradientType=0 );}
.link-index a{color: #704735 !important;font-style: normal !important;font-weight: normal !important;}

/*------------------------------------------------

J'ai mis 650px a width

Voilà la template

Code:

<div style="height:10px;"></div>
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td>
            <div class="nav"><span style="font-style:normal !important; margin-left:-2px !important;" class="link-index"><a class="gensmall" href="{U_INDEX}">{L_INDEX}</a></span><span class="supprimg">{NAV_CAT_DESC}</span></div>
          </td>
          <td class="gensmall" align="right">       
<!-- BEGIN switch_user_logged_in -->
<span class="link-index"><a class="gensmall" href="{U_SEARCH_NEW}">nouveaux messages</a></span>
<span class="link-index"><a class="gensmall" href="{U_SEARCH_SELF}">ses messages</a></span>
<!-- END switch_user_logged_in -->
<span class="link-index"><a class="gensmall" href="{U_SEARCH_UNANSWERED}">sans réponses</a></span>           
        </td>
      </tr>
    </table>
<!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
<div class="head1">     
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>   
<table class="forumcat_titre" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" align="center" class="secondarytitle1"> {catrow.tablehead.L_FORUM} </td>
</tr>
</table>       
    </td>
    </tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center"> 
      <!-- END tablehead -->
      <!-- BEGIN forumrow -->
<table cellspacing="0" cellpadding="0" class="forumcat" border="0">
<tr>
<td style="padding-top:5px;">
<table width="100%" height="112" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="bg-desc" width="176">
<ul id="lapodiv">
<li><span class="home" href="#">Sous Forum
<div>
<table class="lapotable" width="100px" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td valign="top">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</td>
  </tr>
</table>
</div>
</span></li>
</ul>   
    </td>
    <td style="padding-left:15px;" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<a href="{catrow.forumrow.U_VIEWFORUM}"><span class="link-titre">{catrow.forumrow.FORUM_NAME}</span></a>
    </td>
  </tr>
  <tr>
    <td valign="top">
<div class="description"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
    </td>
  </tr>
  <tr>
    <td align="right">
<span class="gensmall">{catrow.forumrow.POSTS} Messages dans {catrow.forumrow.TOPICS} Sujets</span>   
    </td>
  </tr>
</table>   
    </td>
    <td align="center" width="175">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>   
    </td>
    <td width="46">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </td>
  </tr>
</table>
</td>
</tr>
</table>
<div style="margin-bottom:5px; margin-top:5px;" class="sepa1"></div>
      <!-- END forumrow -->
      <!-- BEGIN tablefoot -->
</td></tr></table>
</td>
  </tr>
</table>   
</div>   
    <div style="width: 100%; height: 4px;"></div>
    <!-- END tablefoot -->
    <!-- END catrow -->

et ici juste px.

[Yoshikuni]

J'ai trouvé, désolé je me suis trompé alors voici ce que tu dois modifié

#lapodiv span{margin-top:-115px; cursor:pointer;padding:0px;text-align:left;font-family: 'Aldrich', sans-serif;font-size: 10px;background-color: #d1bfb6;display:block;position:relative;-webkit-transition: all .6s ease-in;-moz-transition: all .6s ease-in;-o-transition: all .6s ease-in;transition: all .6s ease-in;}
#lapodiv span:hover div{width:708px;height: 112px;overflow:visible;cursor:default;white-space:normal;}

Tu modifies la partie rouge tout en copier/collant le code ci-dessus, sinon tu peux enlever le width dans le template, il ne te sert à rien.

Cordialement

[chocobook]

Je te remercie beaucoup ça fonctionne.

Encore une petite question et je pense que c'est bon, peux-tu me dire comment enlever la couleur noire sur l'onglet pour en mettre une autre ?

[Yoshikuni]

L'onglet noir ?

[chocobook]

Oui la partie noire sur l'index http://lecafelitteraire.exprimetoi.net/
Tu saurais me dire comment l'enlever ?