Petit détails tableau avec onglets

2 participants

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

Résolu Petit détails tableau avec onglets

Message par Soo87 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

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 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.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Petit détails tableau avec onglets 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Petit détails tableau avec onglets 3592387030 pour prévenir la modération.

Petit détails tableau avec onglets Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

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

Message par Soo87 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

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 Jeu 11 Aoû 2011 - 19:50

Upinou :$ .
Soo87

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 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.



Pour faciliter les recherches, mettez un titre explicite.
Remerciez Petit détails tableau avec onglets 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Petit détails tableau avec onglets 3592387030 pour prévenir la modération.

Petit détails tableau avec onglets Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

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

Message par Soo87 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

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 Sam 13 Aoû 2011 - 18:17

Je vous en prie. Wink


Pour faciliter les recherches, mettez un titre explicite.
Remerciez Petit détails tableau avec onglets 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu Petit détails tableau avec onglets 3592387030 pour prévenir la modération.

Petit détails tableau avec onglets Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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

- Sujets similaires

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