C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Slideshow horizontal infini
Hier à 08:26 par Leiris

» Infobulle avec effets CSS3
Hier à 01:35 par Helena-Bella

» Limitation de la signature
Ven 18 Aoû 2017, 23:36 par Helena-Bella

» Effet de volet glissant sur un bloc
Ven 18 Aoû 2017, 18:56 par Blocku

» Dimensions des avatars
Ven 18 Aoû 2017, 06:12 par Mortuus

» Signature codée
Jeu 17 Aoû 2017, 22:31 par Helena-Bella

» Signature codée
Jeu 17 Aoû 2017, 22:27 par Helena-Bella

» Signature codée avec onglets
Jeu 17 Aoû 2017, 22:18 par Helena-Bella


Partagez | 
 

Ajouter les catégories en onglets sur un template déjà modifié.

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://hollywood-ramdam.lebonforum.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 103



Bonjour !

Je souhaite combiner deux codes HTML sur le même template. Je suis d'abord passé sur le sujet relatif aux catégories en onglet, seulement, à ce moment là, j'avais déjà un QEEL usant des onglets et ça posait un problème de taille lors de l'affichage, tout était déformer. Étant un peut perfectionniste, je mise beaucoup sur l'esthétisme de mon futur forum, j'ai donc supprimé le QEEL en catégorie, afin de le faire autrement, et je m'attaque donc à mes catégories.

Le seul soucis, c'est que je n'arrive pas à combiner les deux codes. J'ouvre ce sujet dans l'espoir que l'on viendra à mon aide (wouah, c'te phrase Very Happy). Autant commencer par ça, et après voir, comment ça se présente.

Voici mon template :
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
      <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}

        {CURRENT_TIME}

        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span>
        </h{catrow.forumrow.LEVEL}>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
        <span class="gensmall">
<table width="100%"><tr><td></td><td align="right"><span class="gensmall"><b>Sujets :</b> {catrow.forumrow.TOPICS} | <b>Messages :</b> {catrow.forumrow.POSTS}</span></td></tr></table>
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <!-- BEGIN forum_link_no -->
      <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
      <!-- END forum_link_no -->
      <!-- BEGIN forum_link -->
      <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
      <!-- END forum_link -->
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

J'ai pris le temps de générer mes onglets, comme indiquer sur le tutoriel, voici le code obtenu :
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}

{CURRENT_TIME}

</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>

<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>

<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>


<!-- DEBUT MODIF ONGLETS -->

<script type="text/javascript">
<!--

document.write('<div align="center">
<ul class="conteneur_onglets">

<li onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1">Beginning</li>
<li onMouseOver="change_cat(2)" class="onglet " id="onglet_2">Register</li>
<li onMouseOver="change_cat(3)" class="onglet " id="onglet_3">Walnut Creek</li>
<li onMouseOver="change_cat(4)" class="onglet " id="onglet_4">Los Angeles</li>
<li onMouseOver="change_cat(5)" class="onglet " id="onglet_5">Accomodation</li>
<li onMouseOver="change_cat(6)" class="onglet " id="onglet_6">Area of Los Angeles</li>
<li onMouseOver="change_cat(7)" class="onglet " id="onglet_7">California</li>
<li onMouseOver="change_cat(8)" class="onglet " id="onglet_8">Around the World</li>
<li onMouseOver="change_cat(9)" class="onglet " id="onglet_9">Laughing out Loud</li>
<li onMouseOver="change_cat(10)" class="onglet " id="onglet_10">Relaxation</li>
<li onMouseOver="change_cat(11)" class="onglet " id="onglet_11">Archives</li>

</ul></div>');

var compteur_cat = 1;

function change_cat(numero)
{
   if(document.getElementById('categorie_'+numero))
   {
      /* affichage de la bonne categorie */
      $('table[id^=categorie_]').css('display','none');
      $('table[id=categorie_'+numero+']').fadeIn();;
      
      /* affichage du bon onglet */
      $('.actif').removeClass("actif");
      $('.onglet[id=onglet_'+numero+']').addClass("actif");
   }
}

function capture_cat()
{
   if(compteur_cat == 1)
   {
      document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
   }
   else
   {
      document.write('</table><table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
   }
   
   compteur_cat++;
}

//-->
</script>

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

<script type="text/javascript">
<!--
   capture_cat();
//-->
</script>

<!-- FIN MODIF ONGLETS -->


<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
<th nowrap="nowrap" width="50">{L_TOPICS}</th>
<th nowrap="nowrap" width="50">{L_POSTS}</th>
<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

</span>
</h{catrow.forumrow.LEVEL}>
<span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</td>
<!-- BEGIN forum_link_no -->
<td class="row3" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.TOPICS}</span>
</td>
<td class="row2" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.POSTS}</span>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>
<!-- END forum_link_no -->
<!-- BEGIN forum_link -->
<td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
<!-- END forum_link -->
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Et ma CSS, qui est loin d'être terminé :

Code:
body {background-repeat: no-repeat;}

/* Justification du texte */
.postbody {
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-align:justify;
}

Merci d'avance.


Avatar : © Design Touch.


Dernière édition par Kaileen le Lun 07 Mar 2011, 12:45, édité 1 fois
MessageSujet: Ajouter les catégories en onglets sur un template déjà modifié.   Ven 18 Fév 2011, 04:29
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://tearsofthephoenix.forumactif.com/
avatar
♦ P'tit Chaperon Vert ♦{.Sadique Reine des Loups.}
♦ P'tit Chaperon Vert ♦
{.Sadique Reine des Loups.}

Féminin Messages : 466



Bonjour Smile

Ton problème est-il toujours d'actualité? S'il a été résolu, je te demande de bien vouloir éditer ton message et de cocher l'icône

Merci Wink


- Est-ce que vous êtes classé dans la catégorie humain ?
- Négatif, je suis une mite en pull over !
MessageSujet: Re: Ajouter les catégories en onglets sur un template déjà modifié.   Ven 25 Fév 2011, 00:56
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hollywood-ramdam.lebonforum.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 103



Mon problème est toujours d'actualité.


Avatar : © Design Touch.
MessageSujet: Re: Ajouter les catégories en onglets sur un template déjà modifié.   Ven 25 Fév 2011, 03:32
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.school-of-pub.net/forum.htm
avatar
{ Modérateur }
{ Modérateur }

Masculin Messages : 1492



Bonjour ! Smile

Votre problème est-il toujours d'actualité ? Si ce n'est pas le cas, merci de bien vouloir éditer votre premier message et de cocher l'icône .

Merci d'avance. Smile


MessageSujet: Re: Ajouter les catégories en onglets sur un template déjà modifié.   Jeu 03 Mar 2011, 13:13
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hollywood-ramdam.lebonforum.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 103



Mon problème est toujours d'actualité, merci.


Avatar : © Design Touch.
MessageSujet: Re: Ajouter les catégories en onglets sur un template déjà modifié.   Ven 04 Mar 2011, 06:14
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://ensomnia.co.nr
avatar
{ Membre actif }
{ Membre actif }

Féminin Messages : 346



Un petit conseil. ;D les commandes sont meilleures pour répondre à ce type de besoin. (:
MessageSujet: Re: Ajouter les catégories en onglets sur un template déjà modifié.   Lun 07 Mar 2011, 10:26
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hollywood-ramdam.lebonforum.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 103



Je verrais ça plus tard dans ce cas. J'édite mon topic.


Avatar : © Design Touch.
MessageSujet: Re: Ajouter les catégories en onglets sur un template déjà modifié.   Lun 07 Mar 2011, 12:45
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre actif }
{ Membre actif }

Masculin Messages : 867



Je classe Wink


MessageSujet: Re: Ajouter les catégories en onglets sur un template déjà modifié.   Lun 07 Mar 2011, 12:48
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Ajouter les catégories en onglets sur un template déjà modifié.   
Revenir en haut Aller en bas
 

Ajouter les catégories en onglets sur un template déjà modifié.

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

 Sujets similaires

-
» Ajouter les catégories en onglets sur un template déjà modifié.
» Mettre ses catégories en onglets
» Catégories en onglets - phpBB3
» catégories en onglets + onglets sur la droite
» Catégories par onglets!

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Corbeille :: Archives de CSSActif :: Archives 2009~2011-

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 | Contact | Signaler un abus | Forum gratuit