problème avec un onglet

3 participants

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

Résolu problème avec un onglet

Message par -Azuline- Ven 1 Juil 2011 - 0:26

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 ♥


Dernière édition par -Azuline- le Sam 2 Juil 2011 - 0:45, édité 2 fois
-Azuline-

-Azuline-
Nouveau membre

Féminin
Messages : 21
Inscrit(e) le : 20/12/2010

http://wanderingsouls.1fr1.net/
-Azuline- a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: problème avec un onglet

Message par Lixyr Ven 1 Juil 2011 - 22:57

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.
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec un onglet

Message par -Azuline- Sam 2 Juil 2011 - 0:20

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

-Azuline-
Nouveau membre

Féminin
Messages : 21
Inscrit(e) le : 20/12/2010

http://wanderingsouls.1fr1.net/
-Azuline- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec un onglet

Message par Tech Sam 2 Juil 2011 - 0:36

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.
Tech

Tech
Membre actif

Masculin
Messages : 22683
Inscrit(e) le : 01/12/2007

https://forum.forumactif.com/
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: problème avec un onglet

Message par Lixyr Sam 2 Juil 2011 - 1:42

Merci x)

Et de rien. ^^


Pour faciliter les recherches, mettez un titre explicite.
Remerciez problème avec un onglet 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu problème avec un onglet 3592387030 pour prévenir la modération.

problème avec un onglet Baston10
Lixyr

Lixyr
Aidactive
Aidactive

Féminin
Messages : 7381
Inscrit(e) le : 22/07/2010

https://forum.forumactif.com
Lixyr 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