Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Tableau des onglets à droit avec image à gauche...

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

Résolu Tableau des onglets à droit avec image à gauche...

Message par Romantic_Lucky le Mer 20 Juil 2011 - 20:01

Bonjour / Bonsoir,

Alors, j'ai besoin d'aide pour ma page d'accueil. J'ai une page d'accueil en onglet et le tableau du contenue des onglets est centré. Mon problème est que je voudrais qu'il soit à droit et qu'une image soit à gauche. J'aimerai aussi que l'image à gauche ne change pas, ce qui veut dire que je ne veux pas que l'image soit dans le contenue des onglets, mais à l'extérieur du contenue des onglets.

Voici deux forum qui vous aideront à comprendre :

http://absolution-advance.forumactif.name/
http://impero.superforum.fr/

Le code de ma page d'acceuil :
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 : 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>
  <table class="onglet-table">
        <tbody><tr><td name="1" class="active">Home</td>
        <td name="2">Staff</td>
        <td name="3">Partners</td>
        <td name="4">Liens</td>
        <td name="5">Crédits</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>

Merci d'avance pour votre aide Smile .
avatar

Romantic_Lucky
*

Messages : 39
Inscrit(e) le : 13/07/2011

http://last-breath.forum-canada.com/ [construction]
Romantic_Lucky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau des onglets à droit avec image à gauche...

Message par SoraNoHime le Jeu 21 Juil 2011 - 6:13

Bonjour

changez votre tableau par celui-ci :

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 : 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">Home</td>
            <td name="2">Staff</td>
            <td name="3">Partners</td>
            <td name="4">Liens</td>
            <td name="5">Crédits</td>
      </tbody></table></td></tr><tr>
<td align="center" valign="middle">
<img src="lien de votre image"></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>

n'oubliez pas de replacer le lien de votre image à l'endroit prévu.

Cordialement.
avatar

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

http://fanasiacodes.bbfr.net/
SoraNoHime a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau des onglets à droit avec image à gauche...

Message par Romantic_Lucky le Jeu 21 Juil 2011 - 15:11

Merci, c'est parfait *.* !
Problème résolu :thanks: !
avatar

Romantic_Lucky
*

Messages : 39
Inscrit(e) le : 13/07/2011

http://last-breath.forum-canada.com/ [construction]
Romantic_Lucky 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