Petit détails tableau avec onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Petit détails tableau avec onglets

Message par Soo87 le Mer 10 Aoû 2011 - 18:00

Bonsoirs,

J'ai réussi à faire un tableau onglets ( on ma fais le code entier ) , j'arrive à le remplir et à mettre l'image à gauche comme je voulais. Mais moi bien sur je n'arrive pas à faire les choses les plus simples silent .

- Lorsque j'ai mis l'image à gauche, les onglets se sont légèrement décalés, voyez par vous même => http://etho-forum.forumactif.com/forum
Tant que vous y êtes, regardé le contenu du tableau. Comme vous voyez le texte déborde du cadre, je ne sais pas mettre " une barre de défilement " pourriez vous m'indiquer un code s.v.p ?


Merci d'avance


Dernière édition par Soo87 le Sam 13 Aoû 2011 - 17:25, édité 1 fois

Soo87
**

Féminin
Messages : 62
Inscrit(e) le : 13/08/2010

http://etho-forum.forumactif.com
Soo87 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit détails tableau avec onglets

Message par Lixyr le Mer 10 Aoû 2011 - 19:40

Bonjour.

Pour vous aider, pourrais-je avoir le code ? Au mieux, le code de votre PA avec le CSS (uniquement celui concernant vos onglets, pas tout).

Et je vous indiquerai comment régler les deux problèmes.

Cordialement.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit détails tableau avec onglets

Message par Soo87 le Mer 10 Aoû 2011 - 19:49

Voilà le code du tableau actuel :

Code:
<title>Conception d'onglet</title>
      <script type="text/javascript" src="http://img4.hostingpics.net/pics/282657esthuk.png"></script>
      <style>
          /* Début de la feuille de style */
            .onglet-content > div {
            display : none ;
            border : solid 2px ;
            border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ;
            padding : 20px ; margin-bottom : Xpx ;
            width : 450px ;
    height : 200px;
          }
          .onglet-content > div.active{ display : block ; }
 
          .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
          .onglet-table td {
        style : top ;
      vertical-align:middle ;
        border : solid 2px ;
        border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ;
        padding : 0px 10px ;
            opacity : 0.5 ;
          }
          .onglet-table td.active, .onglet-table td:hover {
            opacity : 1 ;
          }
          /* Fin de la feuille de style */
      </style>
    <center>

    <script type="text/javascript">
      /* Début du script */
      jQuery(document).ready(function(){
          jQuery(".onglet-table").find("td").click(function(){
            /* Suppression des classe .active pour tout les onglets et contenus */
            var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */
            system.find(".onglet-table").find(".active").removeClass("active");
            system.find(".onglet-content").find(".active").removeClass("active");

            /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */
            var id = jQuery(this).attr("name");            /* Identification du numéro de l'onglet cliqué */
            jQuery(this).addClass("active");
            system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
          });
      });
      /*Fin du script */
    </script>
    <!-- Début du HTML --><div class="onglet">
    <table><tbody><tr><td colspan="2">
      <table class="onglet-table">
            <tbody><tr><td name="1" class="active">Accueil</td>
            <td name="2">Staff</td>
            <td name="3">Partenaires</td>
            <td name="4">New'</td>
            <td name="5">Concours</td>
            <td name="6">Liens</td>
      </tbody></table></td></tr><tr>
<td align="center" valign="middle">
<img src="http://img4.hostingpics.net/pics/870558esthuk.png"></td><td>
            <div class="onglet-content">
          <div name="1" class="active">contenu de l'onglet 1</div>
          <div name="2">contenu de l'onglet 2</div>
          <div name="3">contenu de l'onglet 3</div>
          <div name="4">contenu de l'onglet 4</div>
          <div name="5">contenu de l'onglet 5</div>
          <div name="6">contenu de l'onglet 6</div>
      </div></td></tr></tbody></table>




Soo87
**

Féminin
Messages : 62
Inscrit(e) le : 13/08/2010

http://etho-forum.forumactif.com
Soo87 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit détails tableau avec onglets

Message par Soo87 le Jeu 11 Aoû 2011 - 19:50

Upinou :$ .

Soo87
**

Féminin
Messages : 62
Inscrit(e) le : 13/08/2010

http://etho-forum.forumactif.com
Soo87 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit détails tableau avec onglets

Message par Lixyr le Jeu 11 Aoû 2011 - 23:50

Vous voulez garder le codage dans votre PA ou gagner de la place et le mettre ailleurs ? Car autrement, pour gagner de la place, vous pouvez mettre cette partie :

Code:
                .onglet-content > div {
                display : none ;
                border : solid 2px ;
                border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ;
                padding : 20px ; margin-bottom : Xpx ;
                width : 450px ;
        height : 200px;
              }
              .onglet-content > div.active{ display : block ; }
   
              .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
              .onglet-table td {
            style : top ;
          vertical-align:middle ;
            border : solid 2px ;
            border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ;
            padding : 0px 10px ;
                opacity : 0.5 ;
              }
              .onglet-table td.active, .onglet-table td:hover {
                opacity : 1 ;
              }
dans votre feuille de style CSS
panneau d'administration >> affichage >> couleurs >> feuille de style css

et cette partie :

Code:
    jQuery(document).ready(function(){
              jQuery(".onglet-table").find("td").click(function(){
                /* Suppression des classe .active pour tout les onglets et contenus */
                var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */
                system.find(".onglet-table").find(".active").removeClass("active");
                system.find(".onglet-content").find(".active").removeClass("active");

                /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */
                var id = jQuery(this).attr("name");            /* Identification du numéro de l'onglet cliqué */
                jQuery(this).addClass("active");
                system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
              });
          });
dans les feuilles javascripts
panneau d'administration >> modules >> gestion des pages javascripts >> créer une nouvelle page appelée onglets (ou autre), mettre le code dedans et enregistrez en ne la plaçant que sur l'index.

Et ça vous donne plus à la fin que ceci dans votre PA :

Code:
<div class="onglet">
        <table><tbody><tr><td colspan="2">
          <table class="onglet-table">
                <tbody><tr><td name="1" class="active">Accueil</td>
                <td name="2">Staff</td>
                <td name="3">Partenaires</td>
                <td name="4">New'</td>
                <td name="5">Concours</td>
                <td name="6">Liens</td>
          </tbody></table></td></tr><tr>
    <td align="center" valign="middle">
    <img src="http://img4.hostingpics.net/pics/870558esthuk.png"></td><td>
                <div class="onglet-content">
              <div name="1" class="active">contenu de l'onglet 1</div>
              <div name="2">contenu de l'onglet 2</div>
              <div name="3">contenu de l'onglet 3</div>
              <div name="4">contenu de l'onglet 4</div>
              <div name="5">contenu de l'onglet 5</div>
              <div name="6">contenu de l'onglet 6</div>
          </div></td></tr></tbody></table>

donc un contenu moins important pour mieux s'y retrouver. Enfin ça c'est mon avis.


Alors,
Like a Star @ heaven pour mettre une scrool-barre, faites comme ceci :

<div style="height:TAILLE_DE_LA_HAUTEUR_DE_VOTRE_CONTENU_px;display: block;overflow:hidden;overflow-x: hidden;overflow-y: auto;">A l'aube du XXIe siècle, nous rêvons de faire du cheval un ami. Un défis difficile, compte tenu des différences qui nous séparent. Car la vie du cavalier est une lente progression vers la compréhension de sa monture, apprenez à comprendre son silence et offrez lui toute la confiance dont il a besoin. Vous découvrirez alors un cheval calme, respectueux, confiant & épanoui ... C'est sur ces principes là qu'Etho-forum c'est fondé, entraider les cavaliers dans leurs diverses problèmes. Mais ce n'est pas tout, autre que de l'aide ce forum propose plusieurs autres activités, comme par exemple, des concours photos organisé régulièrement, des défis amusant pour vous distraire, vous et votre équidé. Délire, convivialité et conseils sont au rendez-vous autour d'une même passions : Le cheval au naturel. </div>

=> en gros on entoure le texte d'une div, avec l'attribut "style" qui permet d'insérer du code css. Le code css permet de mettre une scroll qui est cachée quand on en a pas besoin, sur seulement la verticale quand il y a besoin, sur une hauteur minimale que vous aurez décidé.

Like a Star @ heaven ensuite, et bien, pour vos onglets, ils sont centrés dans leur cellule, donc je ne vois très bien pourquoi vous dites que ça s'est décalé, puisque c'est normal. Vous les voulez plus vers la gauche ou plus vers la droite ?

Cordialement.






Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit détails tableau avec onglets

Message par Soo87 le Sam 13 Aoû 2011 - 17:25

pour les onglets finalement non c'est bon x) ! Ensuite, pour la scrool-barre après plusieurs essaie j'ai réussi, Merci beaucoup ! tout est parfait, merci beaucoup de votre aide !

Soo87
**

Féminin
Messages : 62
Inscrit(e) le : 13/08/2010

http://etho-forum.forumactif.com
Soo87 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Petit détails tableau avec onglets

Message par Lixyr le Sam 13 Aoû 2011 - 18:17

Je vous en prie. Wink





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum