De quel façon faire des onglets???

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

Résolu De quel façon faire des onglets???

Message par MayaKunama le Sam 18 Sep 2010 - 13:43

Bonjour je souhaiterais savoir comment on fait ça:

Merci d'avance,


Dernière édition par MayaKunama le Dim 19 Sep 2010 - 10:00, édité 3 fois (Raison : oublie de quelque chose)

MayaKunama
**

Masculin
Messages : 71
Inscrit(e) le : 27/03/2010

http://wotm-actu.forumactif.com/portal.htm
MayaKunama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: De quel façon faire des onglets???

Message par Invité le Sam 18 Sep 2010 - 13:49

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.

Invité
Invité


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

Résolu Re: De quel façon faire des onglets???

Message par MayaKunama le Sam 18 Sep 2010 - 15:23

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.

MayaKunama
**

Masculin
Messages : 71
Inscrit(e) le : 27/03/2010

http://wotm-actu.forumactif.com/portal.htm
MayaKunama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: De quel façon faire des onglets???

Message par Invité le Sam 18 Sep 2010 - 15:52

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

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

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.

Invité
Invité


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

Résolu Re: De quel façon faire des onglets???

Message par MayaKunama le Sam 18 Sep 2010 - 19:11

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??

MayaKunama
**

Masculin
Messages : 71
Inscrit(e) le : 27/03/2010

http://wotm-actu.forumactif.com/portal.htm
MayaKunama a été remercié(e) par l'auteur de ce sujet.

Résolu Re: De quel façon faire des onglets???

Message par Invité le Sam 18 Sep 2010 - 20:59

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

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.

Invité
Invité


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

Résolu Re: De quel façon faire des onglets???

Message par Calimerotte le Dim 19 Sep 2010 - 1:10

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 :editer: de votre premier message. Wink

A bientôt sur ForumActif Smile

Calimerotte
+ Hyperactif +

Féminin
Messages : 11665
Inscrit(e) le : 12/08/2004

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

Résolu Re: De quel façon faire des onglets???

Message par MayaKunama le Dim 19 Sep 2010 - 9:54

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

MayaKunama
**

Masculin
Messages : 71
Inscrit(e) le : 27/03/2010

http://wotm-actu.forumactif.com/portal.htm
MayaKunama 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