Problème d'onglet sur ma PA

[OlympusTales]

Bien le bonjour :p


Actuellement, j'effectue un design sur mon forum test pour un forum. Je rencontre malgré tout des problèmes avec ces satanés ongletsqui refusent de s'afficher en ligne droite... Je ne comprends pas ce qu'il se passe, j'ai cherché absolument partout et pourtant, aucun signe du fautif.


HTML:

Code:


<font color= black><center><div class="en_tete">
<table>
  <tr><td id="tab1_col1">

<script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 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">
.onglet
{
display:inline-block;
margin-left:1px;
margin-right:1px;
margin-top:1px
padding:2px;
cursor:pointer;
width:10%;
border-left: ##F5EBC9 1px solid;
border-bottom: ##F5EBC9 1px solid;
border-right: ##F5EBC9 1px solid;
border-top: ##F5EBC9 1px solid;
}

.onglet_0
{
background:#FFF;
width:20%;
border-bottom:1px solid ##F5EBC9;
}
.onglet_1
{
background:#F5EBC9;
width:20%;
border-left: #FFF 5px solid;
border-bottom: #FFF 1px solid;
border-right: #FFF 5px solid;
border-top: #FFF 1px solid;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#F5EBC9;
padding:5px;
display:none;
margin-top:3px;
width: 200px;
height: 250px;
float: left;
}
</style><div class="gensmall">
 
          <div class="systeme_onglets">
        <div class="onglets">
            <span class="onglet_1 onglet" id="onglet_quoi" onmouseover="javascript:change_onglet('quoi');"><center>Contexte</center></span><span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><center>STAFF</center></span> </div><span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><center>Nouveautés</center></span><span class="onglet_0 onglet" id="onglet_vote" onmouseover="javascript:change_onglet('vote');"><center>Partenaires</center></span>
</td></tr>

<tr><td id="tab2_col1">
        </div>
        <div class="contenu_onglets">
            <div style="display: block;" class="contenu_onglet" id="contenu_onglet_quoi">
                <br><table border="0" width= "200px"><tbody><tr>gf
            </tr></tbody></table>
           
            </div>
           
        <div style="display: none;" class="contenu_onglet" id="contenu_onglet_qui">
                <br><table border="0"><tbody><tr>STAFFOU
            </tr></tbody></table>
            </div>
            <div style="display: none;" class="contenu_onglet" id="contenu_onglet_pourquoi">
                <br><table border="0"><tbody><tr>News
            </tr></tbody></table>
            </div>
        </div>
    </div><div style="display: none;" class="contenu_onglet" id="contenu_onglet_vote">
                <br><table border="0"><tbody><tr>Partos
            </tr></tbody></table>
            </div>
       
   
    <script type="text/javascript">
        //<!--
                var anc_onglet = 'quoi';
                change_onglet(anc_onglet);
        //-->
        </script>
<br><br></div>         

        </td>
        <td id="tab2_col3">
La nouvelle <a href="">intrigue</a> est mise en place!<br><br><br><br><br><br>
           
       
              </td>
    </tr>
</table>
</div></center></font>



Quant au CSS:

Code:


/*PA*/


.en_tete{
  width:800px;
  min-height:600px;
  height:auto;
  background-color:#ffffff;
  background-image:url('http://i40.servimg.com/u/f40/16/70/78/35/pa10.jpg');
  background-repeat:no-repeat;
  border:solid 1px #CCCCCC; 
}

table tr{
  vertical-align:top;
  }

#tab1_col1{
  width: 800px;
  padding: 0px;
  padding-left: 0px;
  padding-top: 10px;
  float: center
}

#tab2_col1{
  width: 300px;
  padding-left:70px;
  padding-top: 200px;
 
  }

#tab2_col3{
  width: 400px;
  padding:12px;
  padding-left: 10px;
  padding-top: 180px;
  padding-right: 70px
  }


/*boite à  onglets*/
ul, li{
  list-style: none;/*evite les puces de liste dans les onglets*/
}
.mon_onglet{
  float: center;/*aligne les onglets sur une ligne horizontale*/
  padding: 2px 10px;/*marge intérieure autour du texte des onglets*/
  margin-right: 5px;/*marge extérieure droite des onglets*/
  color: #000;/*couleur du texte*/
  background: #ffffff;/*couleur du fond des onglets*/
  border: 1px solid #ff0000;/* epaisseur style et couleur des contours des onglets*/
  cursor: pointer;/* forme du curseur (facultatif)*/
  margin-bottom: -1px;/* reduction de la marge inférieure pour rapprocher les onglets du contenu*/
}
.mon_onglet:hover{
  background: #b8efa1;/*couleur de fond de l'onglet survolé*/
}       
.mon_onglet_selected{
  float: left;/*aligne l onglet sélectionné sur la meme  ligne que les autres*/
  padding: 2px 10px;/*marge intérieure autour du texte de l onglet selectionné*/
  margin-right: 5px;/*marge extérieure droite de l onglet selectionné*/
  color: #000;/*couleur du texte*/
  background: #ffffff;/*couleur du fond de l onglets sélectionné*/
  border-top: 1px solid #ff0000;/* epaisseur style et couleur du bord haut de l onglet selectionné*/
  border-right: 1px solid #ff0000;/* epaisseur style et couleur du bord droit de l onglet selectionné*/
  border-left: 1px solid #ff0000;/* epaisseur style et couleur du bord gauche de l onglet selectionné*/
  border-bottom: 1px solid #ffffff; /* epaisseur style et couleur du bord inférieur de l onglet selectionné*/
  cursor: pointer; /* forme du curseur (facultatif)*/
  margin-bottom: -1px;/* reduction de la marge inférieure pour rapprocher les onglets du contenu*/
}         
.clear{
  clear: both;/* cache le contenu quand on change d'onglet*/
}
.mon_contenu{
  color: #000;/* couleur du texte du contenu*/
  background: #ffffff;/couleur de fond du contenu*/
  border: 1px solid #ff0000;/* epaisseur style et couleur des contuours du contenu*/
  padding: 10px;/* marge intérieure autour du texte du contenu*/
        margin: -1px; /* reduction de la marge pour rapprocher les onglets du contenu*/       
}
#mes_contenus, #mes_onglets{
  width: 800px;/*largeur totale de la boite à onglet*/
}


Merci d'avance!http://createworld.forumgratuit.org

[Arlem]

Bonjour

Ici :

Code:

<span class="onglet_0 onglet" id="onglet_qui" onmouseover="javascript:change_onglet('qui');"><center>STAFF</center></span> </div><span class="onglet_0 onglet" id="onglet_pourquoi" onmouseover="javascript:change_onglet('pourquoi');"><center>Nouveautés</center></span>

Tu as un </div> qui ne m'a pas l'air d'être à sa place, en l'enlevant ça devrait corriger le problème.

[OlympusTales]

Rapide ET efficace, c'est absolument parfait ;p

Un énorme merci à toi, hinus ^^'


(Problème résolu!)

[NatureSauvage]

Sinon, les balises center dans les span des onglets ne sont pas nécessaires.

[OlympusTales]

C'est bon à savoir, merciiii!