De quel façon faire des onglets???

[MayaKunama]

Bonjour je souhaiterais savoir comment on fait ça:

Merci d'avance,

[Invité]

Bonjour,

Ce que vous avez entouré est une page d'accueil.
panneau d'administration > Affichage > Généralités .

En ce qui concerne les onglet, il y a un sujet qui en parle Onglet sur la page d'accueil.

Cordialement.

[MayaKunama]

je ne comprends pas ce qui est expliquez dans le lien que tu m'as donné...ou pouvons nous avoir les fichiers .js où placés touts ces scripts? et pour les onglets, je ne veux pas qu'on ai a cliqué mais qu'il suffise de placer le curseur dessus pour que l'affichage change.

[Invité]

Ok!
pas de soucis! on va reprendre étape par étape .

Pour que les onglets apparaissent sur la page d'accueil il faut déjà les mettre en place. Pour cela on se rend dans PA > Affichage> Généralité et on insère le code ci-dessous dans le cadre " message de la page d'accueil":

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 4</li></ul>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div>

Chaque ligne commençant par "li" correspond au titre d'un onglet. Chaque ligne commençant pas "div id=co_" correspond au contenu d'un onglet qui apparaitra en dessous. Le chiffre dans "co_1" signifie qu'il s'agit du contenu de l'onglet n°1 (donc qui correspond au premier titre). "Onmouseover" signifie que l'ongle changera en passant la souris dessus.

Ensuite, il faut que ces onglets ressemblent à quelque chose. Pour cela on se rend dans PA > Affichage > Couleurs > onglet Feuille de Style CSS , on copie dans cette feuille le code suivant:

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  cursor: pointer;
  margin-bottom: -1px;
} 
.mon_onglet:hover{
  background: #b8efa1;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #b8efa1;
  border-top: 1px solid #68ce3e;
  border-right: 1px solid #68ce3e;
  border-left: 1px solid #68ce3e; 
  border-bottom: 1px solid #b8efa1; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  padding: 10px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

Dans toutes ces lignes, "color" définit la couleur du texte; "background" donne la couleur de fond; "border" donne l'épaisseur le style et la couleur des bordures. Le mieux c'est de tester doucement en changeant les valeurs une par une .

A cette étape, les onglets apparaissent correctement, mais il est impossible de changer, on est bloqué sur le premier. C'est pour cela qu'il faut ajouter un script dans le message de la page d'accueil. Pour cela, ouvrez le bloc note Windows et copier ceci:

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';
            }
        }
    }           
}

Ensuite enregistrez le fichier en terminant par .js , puis hébergez ce fichier ICI par exemple. Vous obtiendrez une adresse qu'il faudra inclure dans votre message de page d'accueil sous cette forme:

Code:

<script src="url_du_code_en_.js"></script>

Si cela vous parait trop compliqué, insérez juste ceci (c'est le code que j'utilise) au début de votre message en page d'accueil:

Code:

<script src="http://pmsc.free.fr/J04/10912150254.js"></script>

J'espère que cela vous aura permis de mieux comprendre.
Cordialement.

[MayaKunama]

Oui cela m'as permis de comprendre, je vais vous embêtez encore un peux mais comment on ajoute après des choses dans chaque onglets (ex: Qui est en ligne...) et comment on change les couleurs??

[Invité]

Re,

Pour ajouter du contenu dans les onglets, il faut le mettre à la place de "mon contenu X" dans votre message de page d'accueil. Par exemple, si vous voulez que l'onglet 1 soit l'onglet "accueil" et qu'il soit écrit "bienvenue sur le forum" vous devez modifier 2 parties dans votre code de message d'accueil:

Code:

<li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li>

devient

Code:

<li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Accueil</li>

et

Code:

<div id="co_1" class="mon_contenu">Mon contenu 1</div>

deviens:

Code:

<div id="co_1" class="mon_contenu">Bienvenue sur le forum</div>

L'important est de toujours bien faire correspondre l'onglet 1 avec les contenu 1, l'onglet 2 avec le contenu 2 , etc ... Bien sûr, il est possible de mettre des textes, des images, des tableaux, des vidéos. Je vous conseille de réaliser chaque contenu d'onglet "à part" puis de le copier/coller dans le code une fois qu'il sera prêt. (si vous rencontrez des soucis pour créer ces contenus demandez de l'aide dans un nouveau sujet, pour éviter que le sujet parte dans tout les sens )

Pour modifier les couleurs, cela se passe dans la feuille de style CSS. Il faut remplacer les codes couleurs tout simplement. Par exemple, si je souhaite une texte en noir sur fond blanc avec des bordures rouges, je remplace:

Code:

.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  cursor: pointer;
  margin-bottom: -1px;
}
.mon_onglet:hover{
  background: #b8efa1;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #b8efa1;
  border-top: 1px solid #68ce3e;
  border-right: 1px solid #68ce3e;
  border-left: 1px solid #68ce3e;
  border-bottom: 1px solid #b8efa1;
  cursor: pointer;
  margin-bottom: -1px;
}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  padding: 10px;
        margin: -1px;         
}

par

Code:

.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #ffffff;
  border: 1px solid #b22222;
  cursor: pointer;
  margin-bottom: -1px;
}
.mon_onglet:hover{
  background: #FFFFFF;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #FFFFFF;
  border-top: 1px solid #b22222;
  border-right: 1px solid #b22222;
  border-left: 1px solid #b22222;
  border-bottom: 1px solid #ffffff;
  cursor: pointer;
  margin-bottom: -1px;
}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000000;
  background: #ffffff;
  border: 1px solid #b22222;
  padding: 10px;
        margin: -1px;         
}

Dans ces codes "color" définit la couleur du texte; "background" donne la couleur de fond; "border" donne l'épaisseur le style et la couleur des bordures.

Cordialement.

[Calimerotte]

Bonjour MayaKunama, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre : - doit-être explicite (qui explique brièvement le problème), - ne doit pas être en majuscules, - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"... Merci de le modifier en cliquant sur le bouton de votre premier message. A bientôt sur ForumActif

[MayaKunama]

Désolé édit fais ^^ Et merci a Isolde^^