Soucis avec mon tableau à onglet

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

Résolu Soucis avec mon tableau à onglet

Message par Missindo Mer 20 Juil 2011 - 21:10

Bonjour ou bonsoir celon le coin ou du monde où vous êtes.

Voilà j'ai un soucis avec mon tableau à onglet, j'ai suvie ce tutotuto

Ce qui me donne :
Code:
  <script src="http://new-life.fr-bb.com/h1-new-life.js">"></script>
 <ul><li id="o_1" class="onglet_selectionner" onclick="changeOnglet(this);">♠ Staff ♠</li>
        <li id="o_2" class="onglet" onclick="changeOnglet(this);">♦ Bon a savoir♦</li>
        <li id="o_3" class="onglet" onclick="changeOnglet(this);">♥ Partenaires ♠</li>
        <li id="o_4" class="onglet" onclick="changeOnglet(this);">• Postes Vacants •</li>
        <li id="o_5" class="onglet" onclick="changeOnglet(this);">♣ Votez pour nous ♣</li>
        </ul>
        <div class="clear"><div id="les_contenus">
    <div id="co_1" class="contenu"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 18px; line-height: normal">Votre Staff</span>
<br>
<img src="http://i43.servimg.com/u/f43/15/13/21/07/sa_bmp10.jpg" border="0" alt="" /><img src="http://i43.servimg.com/u/f43/15/13/21/07/sa1_bm10.jpg" border="0" alt="" /></div><div style="margin:auto;text-align:center;width:100%">PA by Sempai du Chti Chaphardeur<a href="http://lechtichatphardeur.forumgratuit.org" class="postlink" target="_blank" rel="nofollow"><img src="http://i23.servimg.com/u/f23/13/93/00/52/bou10.jpg" border="0" alt="" /></a> (site référencement), Design By Sascha, Context by Zack
<br>
<font color="red">Toute reproduction, même partielle du forum et interdite</font></div></div>
    <div id="co_2" class="contenu" style="display: none;"><a href="http://new-life.fr-bb.com/t6-notre-histoire-contexte#6?tid=53a78e7d1184894315fedbe503ff9d0f" class="postlink">♦ Contexte ♦</a>
<br>
<a href="http://new-life.fr-bb.com/f1-reglement?tid=53a78e7d1184894315fedbe503ff9d0f" class="postlink">• Règlements •</a>
<br>
<a href="http://new-life.fr-bb.com/t4-fiche-obligatoire?tid=53a78e7d1184894315fedbe503ff9d0f" class="postlink">○ Présentation ○</a>
<br>
<a href="http://new-life.fr-bb.com/t14-notre-formulaire?tid=53a78e7d1184894315fedbe503ff9d0f" class="postlink">◘ Nous Liez ◘</a>
<br></div>
    <div id="co_3" class="contenu" style="display: none;"><a href="http://harry-potter.forumdefans.com/" class="postlink" target="_blank" rel="nofollow"><img src="http://i23.servimg.com/u/f23/15/13/21/07/sans_t10.png" border="0" alt="" /></a><a href="http://unbreakable-vow.forumactif.org/forum.htm" class="postlink" target="_blank" rel="nofollow"><img src="http://i30.servimg.com/u/f30/15/40/19/60/bouton10.png" border="0" alt="" /></a><a href="http://lechtichatphardeur.forumgratuit.org" class="postlink" target="_blank" rel="nofollow"><img src="http://i23.servimg.com/u/f23/13/93/00/52/bou10.jpg" border="0" alt="" /></a> </div>
    <div id="co_4" class="contenu" style="display: none;"><span><marquee behavior="scroll" direction="up" scrollamount="1" height="60"><img src="http://i43.servimg.com/u/f43/15/13/21/07/c_bmp10.jpg" border="0" alt="" /><img src="http://i43.servimg.com/u/f43/15/13/21/07/c1_bmp10.jpg" border="0" alt="" />
<img src="http://i43.servimg.com/u/f43/15/13/21/07/c2_bmp10.jpg" border="0" alt="" /><img src="http://i43.servimg.com/u/f43/15/13/21/07/c3_bmp10.jpg" border="0" alt="" />
<img src="http://i43.servimg.com/u/f43/15/13/21/07/c4_bmp10.jpg" border="0" alt="" />
<br>
Et  bien d'autre Postes vacants <a href="http://new-life.fr-bb.com/f13-postes-vacants?tid=53a78e7d1184894315fedbe503ff9d0f" class="postlink">ici</a></marquee></span></div>
    <div id="co_5" class="contenu" style="display: none;"><a href="http://www.root-top.com/topsite/gilgamesh/in.php?ID=5175" class="postlink" target="_blank" rel="nofollow"> <img src="http://img.root-top.com/topsite/gilgamesh/banner.gif" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/obsession27/in.php?ID=17338" class="postlink" target="_blank" rel="nofollow"> <img src="http://img.root-top.com/topsite/obsession27/banner.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/azzare34/in.php?ID=6848" class="postlink" target="_blank" rel="nofollow"> <img src="http://img.root-top.com/topsite/azzare34/banner.gif" border="0" alt="" /></a> <a href="http://www.root-top.com/topsite/forumrpg/in.php?ID=6149" class="postlink" target="_blank" rel="nofollow"> <img src="http://img.root-top.com/topsite/forumrpg/banner.gif" border="0" alt="" /></a><a href="http://www.root-top.com/topsite/yami/in.php?ID=3769" class="postlink" target="_blank" rel="nofollow"> <img src="http://img.root-top.com/topsite/yami/banner.gif" border="0" alt="" /></a>

</div>
</div></div></div>

Css :

Code:

.onglet{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border: 1px solid #000000;
  cursor: pointer;
  width: 18%;
  list-style: none;}
   
.onglet_selectionner{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: none !important;
  cursor: pointer;
  width: 18%;
  list-style: none;}

.onglet:hover{
  background: #9C1C56;}
       
.clear{
  clear: both;}

.contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #000000;
  padding: 10px;
  list-style: none;}

#les_contenus, #les_onglets{
  width: 100%;}

le HTML :

Code:
 function changeOnglet(_this){
    var getOnglets    = document.getElementById('les_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'onglet_selectionner';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }       
}

Merci d'avance pour les réponses que vous me fournirez et pour vos conseil en cours

Edit: Voici mon site New Life


Dernière édition par Missindo le Jeu 21 Juil 2011 - 10:34, édité 1 fois
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Soucis avec mon tableau à onglet

Message par Missindo Jeu 21 Juil 2011 - 10:34

Résolu avec le tuto du site
Missindo

Missindo
****

Féminin
Messages : 438
Inscrit(e) le : 20/07/2011

http://coeur-et-force.forumactif.com/
Missindo a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum