problème avec un onglet

[-Azuline-]

Hellow tous le monde ♥ J'ai encore un problème avec un code, il y a un bug assez curieux.
Voici ma page HTML → http://hot-potatoes.forumgratuit.org/h1-pastaff
Comme vous pourrez le constater la dernière page est doublée, hors dans le code elle ne l'est pas ! Il y a d'autres information qui refusent d'apparaitre ><

Code:

<style type="text/css">
/* LES ONGLETS */
.onglet{
      display:inline-block;
      margin-left:0px;
      margin-right:0px;
      padding-left:5px;
      padding-right:5px;
      padding-top:3px;
      padding-bottom:3px;
      cursor:pointer;
      text-align: center;
}
.onglet_0{
      color: #362821;
      font-family: helvetica;
      font-size: 24px;
      letter-spacing: 5px;
      text-shadow: 1px 1px 2px #F7D8CE;
}
.onglet_1{
      color: #362821;
      font-family: tahoma;
      font-size: 24px;
      letter-spacing: -1px;
      text-shadow: 1px 1px 2px #F7D8CE;
}

.contenu_onglet{
      width: 275px;
      height: auto;
      display:none;
      text-align: center;     
      text-transform: upercase;
      font-size: 14px;
      font-family: helvetica;
      letter-spacing: -1px;
      font-weight: bold;
      color: #362821;
}
a img {
    border: none;
    }
a:link,a:active,a:visited {
    color : #362821;
    text-decoration: none !important;
    }
a:hover{
    text-decoration: none !important;
    color : #362821;
    }
.cadre{
background-color: #F0E9D3;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; text-align: center; margin: 5px; padding: 5px;
}

.desc {
background-color: #362821;
padding: 7px;
font-size: 11px;
text-align: justify;
line-height: 10px;
margin-bottom: 5px;
margin-top: 3px;
-moz-border-radius:10px;}

</style>
<script language="javascript" src="http://beta-testeur.forumactif.com/h4-onglets">
</script>

      <center>
<span class="onglet_0 onglet" id="onglet_groupe1" onmouseover="javascript:change_onglet('groupe1');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>
<span class="onglet_0 onglet" id="onglet_groupe2" onmouseover="javascript:change_onglet('groupe2');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>
<span class="onglet_0 onglet" id="onglet_groupe3" onmouseover="javascript:change_onglet('groupe3');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>
<span class="onglet_0 onglet" id="onglet_groupe4" onmouseover="javascript:change_onglet('groupe4');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>
<span class="onglet_0 onglet" id="onglet_groupe5" onmouseover="javascript:change_onglet('groupe5');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>
<span class="onglet_0 onglet" id="onglet_groupe6" onmouseover="javascript:change_onglet('groupe6');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>
<span class="onglet_0 onglet" id="onglet_groupe7" onmouseover="javascript:change_onglet('groupe7');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>
<span class="onglet_0 onglet" id="onglet_groupe8" onmouseover="javascript:change_onglet('groupe7');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>


<div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_groupe1"><div style="font-family: arial; font-style: italic; font-weight: bold; font-size: 18pt; letter-spacing: -2px; text-transform: lowercase;text-shadow:  0pt 0px 1pt #b21604;margin-bottom: -10px;"><font  color ="#854f39">contexte</font></div>
<div class="desc"><div style="overflow: auto; width: 270px; height: 112px;" class="profiler"><span style="font-size: 15px; line-height: 10px;"><div align="justify"><font color="#000000"><b><font color="#cdbc81">Deux juillet 1996</font></b> &minus; les humains l&apos;ignorent‚ mais la Terre est envahie par les extraterrestres, des âmes. La première vague, provenant du Monde des araignées prennent possession de corps humains sans que ces derniers aient le temps de s’en rendre compte. Ces âmes adopteront la vie de ces humains‚ prendront en pseudonyme leurs noms‚ auront comme amis ces pauvres humains sans défense‚ amis de leurs hôtes. Leurs maisons servaient de centre d’insertions‚ beaucoup y rentraient humains et n’en ressortaient qu’une fois âme. Plus le temps passait‚ plus les humains disparaissaient. L’humanité est en danger. Le Monde ignorait tout de ce petit manège‚ la vie continuait ainsi pendant plusieurs années sans que personne ne doute sur la présence extraterrestre sur Terre. Mais certains hommes ont compris ce qu'il se passait‚ et n'étaient pas résolus à se rendre à ces êtres inhumains. Ils se sont rebellés‚ se réfugiant en petites communautés loin de la civilisation mise en place par les âmes‚ dans un but de survie ... </font></div></span></div></div>

<div class="desc"><a href="http://wanderingsouls.1fr1.net/t25-le-contexte" target="blank"><center><font color="#000000">lire la suite</font></center></a></div>
</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe2"> <div style="font-family: arial; font-style: italic; font-weight: bold; font-size: 18pt; letter-spacing: -2px; text-transform: lowercase;text-shadow:  0pt 0px 1pt #b21604;margin-bottom: -10px;"><font  color ="#854f39">a. liz lorella foster</font></div><div class="desc">

<center><img src="http://26.media.tumblr.com/tumblr_lned0fC0F51qbmw3bo1_500.gif" style="width: 250px; height: 112px;"></center></div>
<div class="desc"><font color="#000000"><i>beeotch ♦</i></font><a href="http://wanderingsouls.1fr1.net/privmsg?mode=post&u=1" target="blank"> <font color="#000000">harceler !</font></a></div>

</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe3">

<div style="font-family: arial; font-style: italic; font-weight: bold; font-size: 18pt; letter-spacing: -2px; text-transform: lowercase;text-shadow:  0pt 0px 1pt #b21604;margin-bottom: -10px;"><font  color ="#854f39">Mille-Pétales-au-Soleil</font></div><div class="desc">

<center><img src="http://26.media.tumblr.com/tumblr_lknc4eof5a1qecz51o1_500.gif" style="width: 250px; height: 112px;"></center></div>
<div class="desc"><font color="#000000"><i>sightless mind. ♦</i></font><a href="http://wanderingsouls.1fr1.net/privmsg?mode=post&u=2" target="blank"> <font color="#000000">harceler !</font></a></div>

</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe4"><div style="font-family: arial; font-style: italic; font-weight: bold; font-size: 18pt; letter-spacing: -2px; text-transform: lowercase;text-shadow:  0pt 0px 1pt #b21604;margin-bottom: -10px;"><font  color ="#854f39">Ellen W. Heatherton </font></div><div class="desc">

<center><img src="http://29.media.tumblr.com/tumblr_lmnd7nydyq1qdmt7lo1_500.gif" style="width: 250px; height: 112px;"></center></div>
<div class="desc"><font color="#000000"><i>mythic curse ♦</i></font><a href="http://wanderingsouls.1fr1.net/privmsg?mode=post&u=3" target="blank"> <font color="#000000">harceler !</font></a></div>

</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe5"> <div style="font-family: arial; font-style: italic; font-weight: bold; font-size: 18pt; letter-spacing: -2px; text-transform: lowercase;text-shadow:  0pt 0px 1pt #b21604;margin-bottom: -10px;"><font  color ="#854f39">Marche-sous-la-lune </font></div><div class="desc">

<center><img src="http://27.media.tumblr.com/tumblr_lmwk9fLtdG1qlyfgho1_500.gif" style="width: 250px; height: 112px;"></center></div>
<div class="desc"><font color="#000000"><i>CONATUS ♦</i></font><a href="http://wanderingsouls.1fr1.net/privmsg?mode=post&u=4" target="blank"> <font color="#000000">harceler !</font></a></div>
</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe6"> <div style="font-family: arial; font-style: italic; font-weight: bold; font-size: 18pt; letter-spacing: -2px; text-transform: lowercase;text-shadow:  0pt 0px 1pt #b21604;margin-bottom: -10px;"><font  color ="#854f39">G. Lucky Midwood </font></div><div class="desc">

<center><img src="http://img11.hostingpics.net/pics/858236tumblrlkwlfctf641qakrdzo1500.gif" style="width: 250px; height: 112px;"></center></div>
<div class="desc"><font color="#000000"><i>weeping angel. ♦</i></font><a href="http://wanderingsouls.1fr1.net/privmsg?mode=post&u=6" target="blank"> <font color="#000000">harceler !</font></a></div>
</div>
            <div class="contenu_onglet" id="contenu_onglet_groupe7"> <div style="font-family: arial; font-style: italic; font-weight: bold; font-size: 18pt; letter-spacing: -2px; text-transform: lowercase;text-shadow:  0pt 0px 1pt #b21604;margin-bottom: -10px;"><font  color ="#854f39">Ashley </font></div><div class="desc">

<center><img src="http://media.tumblr.com/tumblr_lhq35uXPOl1qd7trb.gif" style="width: 250px; height: 112px;"></center></div>
<div class="desc"><font color="#000000"><i>♦ Ayenaë ♦</i></font><a href="http://wanderingsouls.1fr1.net/privmsg?mode=post&u=14" target="blank"> <font color="#000000">harceler !</font></a></div></div>

</div>
          <div class="contenu_onglet" id="contenu_onglet_groupe8">
<div style="font-family: arial; font-style: italic; font-weight: bold; font-size: 18pt; letter-spacing: -2px; text-transform: lowercase;text-shadow:  0pt 0px 1pt #b21604;margin-bottom: -10px;"><font  color ="#854f39">Mebaël Lampqvist-Ginzborg
</font></div><div class="desc">

<center><img src="http://i53.tinypic.com/osecyt.jpg" style="width: 250px; height: 112px;"></center></div>
<div class="desc"><font color="#000000"><i>♦ bordel ♦</i></font><a href="http://wanderingsouls.1fr1.net/privmsg?mode=post&u=116" target="blank"> <font color="#000000">harceler !</font></a></div>

</div>



        </div>

    </div>

    <script type="text/javascript">
        //<!--
                var anc_onglet = 'groupe1';
                change_onglet(anc_onglet);
        //-->
        </script></div>
</center>

J'aimerais donc pouvoir afficher le dernier onglet, merci d'avance à ceux qui pourront m'aider ♥

[Lixyr]

Bonjour.

Dans une page html, le css qui est dans la feuille de style peut y être attachée, ainsi veuillez supprimer tout ceci :

Code:


<style type="text/css">
 </style>

et mettre ceci dans votre css :

Code:




   
    /* LES ONGLETS */
    .onglet{
          display:inline-block;
          margin-left:0px;
          margin-right:0px;
          padding-left:5px;
          padding-right:5px;
          padding-top:3px;
          padding-bottom:3px;
          cursor:pointer;
          text-align: center;
    }
    .onglet_0{
          color: #362821;
          font-family: helvetica;
          font-size: 24px;
          letter-spacing: 5px;
          text-shadow: 1px 1px 2px #F7D8CE;
    }
    .onglet_1{
          color: #362821;
          font-family: tahoma;
          font-size: 24px;
          letter-spacing: -1px;
          text-shadow: 1px 1px 2px #F7D8CE;
    }

    .contenu_onglet{
          width: 275px;
          height: auto;
          display:none;
          text-align: center;   
          text-transform: upercase;
          font-size: 14px;
          font-family: helvetica;
          letter-spacing: -1px;
          font-weight: bold;
          color: #362821;
    }
    a img {
        border: none;
        }
    a:link,a:active,a:visited {
        color : #362821;
        text-decoration: none !important;
        }
    a:hover{
        text-decoration: none !important;
        color : #362821;
        }
    .cadre{
    background-color: #F0E9D3;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; text-align: center; margin: 5px; padding: 5px;
    }

    .desc {
    background-color: #362821;
    padding: 7px;
    font-size: 11px;
    text-align: justify;
    line-height: 10px;
    margin-bottom: 5px;
    margin-top: 3px;
    -moz-border-radius:10px;}

Ensuite, vous avez une erreur dans votre code :

<span class="onglet_0 onglet" id="onglet_groupe7" onmouseover="javascript:change_onglet('groupe7');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>
<span class="onglet_0 onglet" id="onglet_groupe8" onmouseover="javascript:change_onglet('groupe7');"><img src="http://neamar.fr/Res/DontClick/Assets/Curseur.png"></img></span>

le 7 en rouge devrait être un 8.

Voilà ça devrait être bon maintenant.

[-Azuline-]

Merci beaucoup, ma page est maintenant sans bug, encore merci ♥

[Tech]

Bonsoir,

C'est très gentil de vouloir remercier Lixyr Yrna pour l'aide qu'elle vous a apporté mais d'un autre côté en la remerciant via le titre, vous empêchez d'autres membres qui auraient pu être dans le même problème que vous d'y trouver la solution facilement via la fonction Rechercher.
De plus, la remercier via le titre ne lui sera pas vraiment utile. Même si cela ne représente rien sur ce forum, la meilleur solution pour la remercier est que vous appuyiez sur le bouton Merci qui se trouve sur le message de Lixyr Yrna et cliquiez également sur le petit + qui se trouve près de son avatar.

C'est pourquoi, je vous recommande donc de remettre le titre explicite et initial de votre sujet dans le but d'aider les autres membres.

Merci de votre compréhension.
Cordialement.

[Lixyr]

Merci x)

Et de rien. ^^