Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

A propos du tutoriel "3 tableaux à onglets", comment rajouter un onglet ?

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

Résolu A propos du tutoriel "3 tableaux à onglets", comment rajouter un onglet ?

Message par Marine_* le Jeu 25 Aoû 2011 - 16:58

Bonjour !

Alors voilà hier j'ai installée sur mon forum un tableau à onglet grâce au tutoriel présent sur ce forum "3 tableaux à onglets".
J'ai parfaitement réussie à tout installer, mais, je cherche en vain comment faire pour ajouter un 5eme onglet à ce tableau!

J'avais tentée un truc mais l'onglet se placait sous les 4 principaux, or je le veux sur la même ligne.

Voici le code javascript

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


Le code CSS

Code:
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffc5 ;
  border: 1px solid #000;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;
}
.mon_onglet:hover{
  background: #f1ffe3;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffc5 ;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  border-left: 2px solid #000;
  border-bottom: 1px solid #ffffc5;
  cursor: pointer;
  margin-bottom: -1px;
  list-style: none;}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffc5;
  border: 2px solid #000;
  padding: 10px; 
  line-height: normal;
  font-size: 12px;}
#mes_contenus, #mes_onglets{
  width: 400px;
  margin: auto;}


Le code HTML

Code:
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Titre</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Titre</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">
</div>
    <div id="co_2" class="mon_contenu" style="display: none;">
</div>
    <div id="co_3" class="mon_contenu" style="display: none;">
</div>
    <div id="co_4" class="mon_contenu" style="display: none;">
</div>
</div></div></ul></div>


L'adresse de mon forum : http://amaury-vassili.forumsactifs.com/
Il a été créee sous un phpBB2
J'espère avoir été clair dans mes explications et que vous pourrez me venir en aide Embarassed
Merci d'avance!


Dernière édition par Marine_* le Jeu 25 Aoû 2011 - 17:44, édité 1 fois
Marine_*

Marine_*
Nouveau membre

Féminin
Messages : 2
Inscrit(e) le : 23/08/2011

http://amaury-vassili.forumsactifs.com/
Marine_* a été remercié(e) par l'auteur de ce sujet.

Résolu Re: A propos du tutoriel "3 tableaux à onglets", comment rajouter un onglet ?

Message par Invité le Jeu 25 Aoû 2011 - 17:23

Bonjour,

Si l'onglet se place en dessous des autres, c'est que la largeur du tableau n'est pas suffisante pour qu'il se mette à coté.
Dans la partie CSS modifiez ceci:
Code:
#mes_contenus, #mes_onglets{
  width: 400px;
  margin: auto;}
Remplacez 400px par un nombre de px plus grand ou par 100% .

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: A propos du tutoriel "3 tableaux à onglets", comment rajouter un onglet ?

Message par Marine_* le Jeu 25 Aoû 2011 - 17:44

:O miracle ça marche niquel. Je me suis pas prise la tête j'ai mis un 100%
Merci pour la réponse rapide!!

Donc sujet résolu
Marine_*

Marine_*
Nouveau membre

Féminin
Messages : 2
Inscrit(e) le : 23/08/2011

http://amaury-vassili.forumsactifs.com/
Marine_* 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