Cafouillage dans mon code T-T

[WwAaPpIi]

Bonjour, Bonsoir,
Et merci d'avance à ceux qui pourront m'aider ! ^^

J'expose mon problème.
Voilà ce que devrais donner mon code :

Spoiler:

Il marchait merveilleusement bien jusqu'à ce que je le bidouille un peu, et voilà le résultat... :

Spoiler:

Le CSS :

Code:


}
.onglet_inactif
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_actif
{
background:#eeeeee;
border-top:1px solid #eeeeee;
}
.contenu_onglet
{
background-color:#eeeeee;
border:1px solid black;
margin-top:1px;
padding:5px;
display:none;
-moz-border-radius: 10px 10px 10px 10px ;
height:200px;
}

Code à mettre dans la PA :

Code:

<script type="text/javascript">
  //<!--
  // La fonction Javascript va permettre de changer d'onglet lorsque l'on clique sans recharger la page.
  // Le principe est simple. Le cadre g�rant le contenu que l'on souhaite voir recoit la calver onglet_actif alors que les autres recoivent onglet_inactif pour les cacher.
      function change_onglet(name)
      {
        document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet';
        document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet';
        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
        document.getElementById('contenu_onglet_'+name).style.display = 'block';
        anc_onglet = name;
      }
  //-->
  </script>
  <style type="text/css">
  body
  {
      width:800px;
      margin:auto;
  }
  img
  {
      border:none;
  }
  .systeme_onglets
  {
      margin-top:5px;
      margin-left:5px;
      width:57%;
      float:left;
  }
  .bloc_general_onglet
  {
      display:inline-block;
      margin-left:3px;
      margin-right:3px;
      padding:3px;
      border:1px solid black;
      cursor:pointer;
  }
  .onglet_inactif
  {
      background:#bbbbbb;
      border-bottom:1px solid black;
  }
  .onglet_actif
  {
      background:#eeeeee;
      border-top:1px solid #eeeeee;
  }
  .contenu_onglet
  {
      background-color:#eeeeee;
      border:1px solid black;
      margin-top:1px;
      padding:5px;
      display:none;
      -moz-border-radius: 10px 10px 10px 10px ;
      height:200px;
  }
  .titre
  {
      text-align:center;
      text-decoration:underline;
  }
 
  /* Le css suivant permet de mettre l'info bulle... */
  a.info_bulle
  {           
    text-decoration : none;
    padding        : 2px 16px 2px 2px; /*D�finition des marges int�rieures de notre lien */
    position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
  }
  a.info_bulle:hover
  {
    border          : 0;  /* ligne qui corrige le bug d'IE6 et inf�rieur */
  }
  /* Rend invisible tout notre bloc span */
  a.info_bulle span.info_bulle
  {
      position  :  absolute;
      top        :  -2000em;
      left      :  -2000em;
      width      :  1px;
      height    :  1px;
      overflow  :  hidden;
  }

  /* Rend visible tout notre bloc span et lui attribue une taille */
  a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
  {
      top        :  auto;
      left      :  auto;
      height    :  auto;
      overflow  :  visible;
  }
  span.contenu
  {
      display    : block;
      padding    : 0 8px;
  } 

  </style>

      <div style="width:800px;margin:auto;height:250px;">
        <div class="systeme_onglets">

          <div class="contenu_onglets">
              <div class="contenu_onglet" id="contenu_onglet_premier">
              Contenu du premier onglet !
              </div>
           
           
              <div class="contenu_onglet" id="contenu_onglet_deuxieme">
              Contenu du deuxieme onglet !
              </div>
           
           
              <div class="contenu_onglet" id="contenu_onglet_troisieme">
              Contenu du troisieme onglet !
              </div>
          </div>
       
/* C'est ici que nous allons changer le titre des onglets pour pouvoir g�rer plus facilement la navigation sur la PA ^^ */

          <div class="onglets" style="padding-left:10px;">
              <span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Onglet 1</span>
              <span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Onglet 2</span>
              <span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">Onglet 3</span>
          </div>
      </div>
      <script type="text/javascript">
      //<!--
        var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1
        change_onglet(anc_onglet);
      //-->
      </script>
     
      <!-- Ci dessous le cadre du staff -->
        <div style="width:39%;float:right;border:1px solid black;height:200px;padding:5px;margin-right:5px;margin-top:5px;">
            <div class="titre">STAFF</div>
            <!-- Pour l'info bulle, copies le code d'ici -->
        /* Mettre l'url du l'image ici... */
              <span class="info_bulle">
                  <span class="contenu">
                    <img src="http://graph-style.forumn.biz/users/2515/81/28/17/avatars/3154-29.png" alt="" />
                  </span> 
              </span>
            </a>
            <!-- Jusqu'a ici !
            Attention ! Les deux images (en petit et grand) doivent �tre de la taille que tu souhaites l'infobulle -->
        </div>
      </div>
      <!-- Fin du cadre du staff -->
     
     
      <!-- Debut du cadre des infos importantes -->
      <div style="width:40%;border:1px solid black;height:200px;float:left;margin-top:5px;overflow:auto;">
        <div class="titre">Contenu...Informations importantes...etc</div>
        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

        Bcp de texte...

       
      </div>
      <!-- Fin informations importantes -->
     
     
      <!-- D�but cadre en bas � droite -->
      <div style="width:58%;border:1px solid black;height:225px;margin-top:-20px;float:right;">
     
            <!-- player de musique (dewplayer pour faire un exemple) -->
            <div style="margin-left:10px;margin-top:10px;">
              <object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashswf/dewplayer.swf" width="200" height="60" id="dewplayer" name="dewplayer">
              <param name="wmode" value="transparent" />
              <param name="movie" value="http://www.alsacreations.fr/flashswf/dewplayer.swf" />
              <param name="flashvars" value="mp3=la_musique.mp3&showtime=1" />

[Invité]

Bonsoir

Essayez de remplacer votre code de page d'accueil par ceci :

Code:

 <script type="text/javascript">
      //<!--
   
          function change_onglet(name)
          {
            document.getElementById('onglet_'+anc_onglet).className = 'onglet_inactif bloc_general_onglet';
            document.getElementById('onglet_'+name).className = 'onglet_actif bloc_general_onglet';
            document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
            document.getElementById('contenu_onglet_'+name).style.display = 'block';
            anc_onglet = name;
          }
      //-->
      </script>
      <style type="text/css">
   
      </style>

          <div style="width:800px;margin:auto;height:250px;">
            <div class="systeme_onglets">

              <div class="contenu_onglets">
                  <div class="contenu_onglet" id="contenu_onglet_premier">
                  Contenu du premier onglet !
                  </div>
             
             
                  <div class="contenu_onglet" id="contenu_onglet_deuxieme">
                  Contenu du deuxieme onglet !
                  </div>
             
             
                  <div class="contenu_onglet" id="contenu_onglet_troisieme">
                  Contenu du troisieme onglet !
                  </div>
              </div>
         
 
              <div class="onglets" style="padding-left:10px;">
                  <span class="onglet_inactif bloc_general_onglet" id="onglet_premier" onclick="javascript:change_onglet('premier');">Onglet 1</span>
                  <span class="onglet_inactif bloc_general_onglet" id="onglet_deuxieme" onclick="javascript:change_onglet('deuxieme');">Onglet 2</span>
                  <span class="onglet_inactif bloc_general_onglet" id="onglet_troisieme" onclick="javascript:change_onglet('troisieme');">Onglet 3</span>
              </div>
          </div>
          <script type="text/javascript">
          //<!--
            var anc_onglet = 'premier'; // Cette ligne informe qu'on va en premier voir l'onglet 1
            change_onglet(anc_onglet);
          //-->
          </script>
       
          <!-- Ci dessous le cadre du staff -->
            <div style="width:39%;float:right;border:1px solid black;height:200px;padding:5px;margin-right:5px;margin-top:5px;">
                <div class="titre">STAFF</div>
                <!-- Pour l'info bulle, copies le code d'ici -->
            /* Mettre l'url du l'image ici... */
                  <span class="info_bulle">
                      <span class="contenu">
                        <img src="http://graph-style.forumn.biz/users/2515/81/28/17/avatars/3154-29.png" alt="" />
                      </span>
                  </span>
                </a>
                <!-- Jusqu'a ici !
                Attention ! Les deux images (en petit et grand) doivent �tre de la taille que tu souhaites l'infobulle -->
            </div>
          </div>
          <!-- Fin du cadre du staff -->
       
       
          <!-- Debut du cadre des infos importantes -->
          <div style="width:40%;border:1px solid black;height:200px;float:left;margin-top:5px;overflow:auto;">
            <div class="titre">Contenu...Informations importantes...etc</div>
            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

            Bcp de texte...

         
          </div>
          <!-- Fin informations importantes -->
       
       
          <!-- D�but cadre en bas � droite -->
          <div style="width:58%;border:1px solid black;height:225px;margin-top:-20px;float:right;">
       
                <!-- player de musique (dewplayer pour faire un exemple) -->
                <div style="margin-left:10px;margin-top:10px;">
                  <object type="application/x-shockwave-flash" data="http://www.alsacreations.fr/flashswf/dewplayer.swf" width="200" height="60" id="dewplayer" name="dewplayer">
                  <param name="wmode" value="transparent" />
                  <param name="movie" value="http://www.alsacreations.fr/flashswf/dewplayer.swf" />
                  <param name="flashvars" value="mp3=la_musique.mp3&showtime=1" />

et d'ajouter ces éléments dans votre CSS :

Code:


    body
      {
          width:800px;
          margin:auto;
      }
      img
      {
          border:none;
      }
      .systeme_onglets
      {
          margin-top:5px;
          margin-left:5px;
          width:57%;
          float:left;
      }
      .bloc_general_onglet
      {
          display:inline-block;
          margin-left:3px;
          margin-right:3px;
          padding:3px;
          border:1px solid black;
          cursor:pointer;
      }
      .onglet_inactif
      {
          background:#bbbbbb;
          border-bottom:1px solid black;
      }
      .onglet_actif
      {
          background:#eeeeee;
          border-top:1px solid #eeeeee;
      }
      .contenu_onglet
      {
          background-color:#eeeeee;
          border:1px solid black;
          margin-top:1px;
          padding:5px;
          display:none;
          -moz-border-radius: 10px 10px 10px 10px ;
          height:200px;
      }
      .titre
      {
          text-align:center;
          text-decoration:underline;
      }
   
      /* Le css suivant permet de mettre l'info bulle... */
      a.info_bulle
      {         
        text-decoration : none;
        padding        : 2px 16px 2px 2px; /*D�finition des marges int�rieures de notre lien */
        position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
      }
      a.info_bulle:hover
      {
        border          : 0;  /* ligne qui corrige le bug d'IE6 et inf�rieur */
      }
      /* Rend invisible tout notre bloc span */
      a.info_bulle span.info_bulle
      {
          position  :  absolute;
          top        :  -2000em;
          left      :  -2000em;
          width      :  1px;
          height    :  1px;
          overflow  :  hidden;
      }

      /* Rend visible tout notre bloc span et lui attribue une taille */
      a.info_bulle:hover span.info_bulle, a.info_bulle:focus span.info_bulle
      {
          top        :  auto;
          left      :  auto;
          height    :  auto;
          overflow  :  visible;
      }
      span.contenu
      {
          display    : block;
          padding    : 0 8px;
      }


Cordialement

[WwAaPpIi]

Merci beaucoup ! ^^
Il y a juste un léger petit problème : le coin du cadre "Résumé du contexte" (voir schéma dans mon premier post" passe sur l'onglet "Onglet 3" =/

[Invité]

Re,

Je n'ai pas ce problème en affichage, mais dans cette partie du CSS :

Code:

 .bloc_general_onglet
      {
          display:inline-block;
          margin-left:2px;
          margin-right:3px;
          padding:3px;
          border:1px solid black;
          cursor:pointer;
      }

Vous pouvez "jouer" avec la partie margin-left en réduisant sa valeur ce qui décalera votre bloc très légèrement sur la gauche.

Cordialement

[WwAaPpIi]

C'est parfait !
Merci beaucoup, Lydie1 !

Résolu !