Déplacer mes onglets tableau vers le haut... Help ?

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

Résolu Déplacer mes onglets tableau vers le haut... Help ?

Message par Melow le Mer 1 Sep 2010 - 16:16

    Bonjour ou bonsoir,

    Je viens donc demander un petit coup de main après avoir passé près de trois jours à essayer de trouver la solution seule ou par Internet. À bout de patience, je vous demande donc votre aide :$.

    Spoiler:

    Comme vous pouvez le constater, j'ai réussi à faire un tableau à onglet ( Wouhouuuuuu !!!! ) MAIS... les onglets sont sur le côté T.T. Et personnellement, j'aimerais qu'ils soient centrés au dessus du contenu. Or, je ne suis pas une grande programmeuse ( à mon grand malheur ) et j'aimerais un petit coup de main :$.

    Je vous mets le code du tableau actuel.

    Spoiler:
    Code:
    <title>Conception d'onglet</title>
      <script type="text/javascript" src="http://illiweb.com/fa/js_16/fr.js"></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 : 700px ;
          }
          .onglet-content > div.active{ display : block ; }

     
     
          .onglet-table { border-spacing : Xpx ; }
          .onglet-table td {
        style : top ;
        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>
      <table class="onglet-table">
            <tbody><tr><td name="1" class="active">Onglet 1</td></tr>
            <tr><td name="2">Onglet 2</td></tr>
            <tr><td name="3">Onglet 3</td></tr>
            <tr><td name="4">Onglet 4</td></tr>
            <tr><td name="5">Onglet 5</td></tr>
      </tbody></table></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></td></tr></tbody></table>

    Voilà, je vous remercie d'avance.

Melow
**

Féminin
Messages : 59
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déplacer mes onglets tableau vers le haut... Help ?

Message par zz10 le Mer 1 Sep 2010 - 16:21

Essayez ceci :

Code:
<title>Conception d'onglet</title>
  <script type="text/javascript" src="http://illiweb.com/fa/js_16/fr.js"></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 : 700px ;
      }
      .onglet-content > div.active{ display : block ; }

 
 
      .onglet-table { border-spacing : Xpx ; }
      .onglet-table td {
    style : top ;
    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>
  <table class="onglet-table">
        <tbody><tr><td name="1" class="active">Onglet 1</td></tr>
        <tr><td name="2">Onglet 2</td></tr>
        <tr><td name="3">Onglet 3</td></tr>
        <tr><td name="4">Onglet 4</td></tr>
        <tr><td name="5">Onglet 5</td></tr>
  </tbody></table></td></tr><tr><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></td></tr></tbody></table>

zz10
+ Hyperactif +

Masculin
Messages : 2202
Inscrit(e) le : 04/07/2009

http://www.forum-ice-epinal.com
zz10 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déplacer mes onglets tableau vers le haut... Help ?

Message par Melow le Mer 1 Sep 2010 - 16:24

    Merci de votre réponse rapide !

    Alors j'ai essayé mais ça me donne ceci :

    Spoiler:

    Or, j'aimerais que les onglets soient alignés les uns à côté des autres... Je ne sais pas comment l'expliquer ^^'. Est-ce possible, s'il vous plait ?

Melow
**

Féminin
Messages : 59
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Déplacer mes onglets tableau vers le haut... Help ?

Message par Chouquette~ le Mer 1 Sep 2010 - 16:30

Bonjour,

Ceci devrait marcher ^^ :
Code:
<title>Conception d'onglet</title>
  <script type="text/javascript" src="http://illiweb.com/fa/js_16/fr.js"></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 : 700px ;
      }
      .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>
  <table class="onglet-table">
        <tbody><tr><td name="1" class="active">Onglet 1</td>
        <td name="2">Onglet 2</td>
        <td name="3">Onglet 3</td>
        <td name="4">Onglet 4</td>
        <td name="5">Onglet 5</td>
  </tbody></table></td></tr><tr><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></td></tr></tbody></table>

Chouquette~
*****

Masculin
Messages : 666
Inscrit(e) le : 15/07/2009

Chouquette~ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Déplacer mes onglets tableau vers le haut... Help ?

Message par Melow le Mer 1 Sep 2010 - 16:33

    Kyahhhhhhhh !! Super !! Merci infiniment !! C'est exactement ce que je voulais !

    Merci beaucoup à tous les deux ! Bonne journée !!

    Sujet Résolu !

Melow
**

Féminin
Messages : 59
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow 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