Problème d'onglet sur ma PA

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

Résolu Problème d'onglet sur ma PA

Message par OlympusTales le Jeu 21 Juin 2012 - 17:13

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


Dernière édition par OlympusTales le Jeu 21 Juin 2012 - 17:22, édité 1 fois

OlympusTales
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 16/06/2012

http://olympustales.pro-forum.fr/
OlympusTales a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglet sur ma PA

Message par Arlem le Jeu 21 Juin 2012 - 17:19

Bonjour Smile

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

Arlem
+ Hyperactif +

Messages : 2550
Inscrit(e) le : 30/06/2009

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

Résolu Re: Problème d'onglet sur ma PA

Message par OlympusTales le Jeu 21 Juin 2012 - 17:22

Rapide ET efficace, c'est absolument parfait ;p

Un énorme merci à toi, hinus ^^'


(Problème résolu!)

OlympusTales
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 16/06/2012

http://olympustales.pro-forum.fr/
OlympusTales a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglet sur ma PA

Message par NatureSauvage le Jeu 21 Juin 2012 - 17:30

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

NatureSauvage
***

Messages : 164
Inscrit(e) le : 08/04/2012

http://naturesauvage.forumactif.com/
NatureSauvage a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglet sur ma PA

Message par OlympusTales le Jeu 21 Juin 2012 - 19:26

C'est bon à savoir, merciiii!

OlympusTales
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 16/06/2012

http://olympustales.pro-forum.fr/
OlympusTales 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