Cafouillage dans mon code T-T

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

Résolu Cafouillage dans mon code T-T

Message par WwAaPpIi le Jeu 21 Juil 2011 - 17:12

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" />


Dernière édition par WwAaPpIi le Jeu 21 Juil 2011 - 17:43, édité 1 fois

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cafouillage dans mon code T-T

Message par Invité le Jeu 21 Juil 2011 - 17:27

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

Invité
Invité


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

Résolu Re: Cafouillage dans mon code T-T

Message par WwAaPpIi le Jeu 21 Juil 2011 - 17:36

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" =/

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cafouillage dans mon code T-T

Message par Invité le Jeu 21 Juil 2011 - 17:40

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

Invité
Invité


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

Résolu Re: Cafouillage dans mon code T-T

Message par WwAaPpIi le Jeu 21 Juil 2011 - 17:43

C'est parfait !
Merci beaucoup, Lydie1 ! Yahoo

Résolu !

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi 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