Faire des onglets sur la Page d'Acceuil.

[La-Pouic-Team]

Bonjours,
Je voudrais savoir comment réalisé ceci :

[risa]

Coucou, moi aussi je cherche ce code =)

[b2uty]

Bonjour, je vais aussi suivre se sujet, ça fait un moment que je recherche
comment pouvoir faire celà.

[Invité]

Bonjour,

J'ai planché sur ce problème d'onglet ... et j'ai finalement trouvé le meilleur tuto possible sur ce Forum, proposé par un membre ... Voici le lien vers ce tuto:
http://www.johnstyle.fr/langage/javascript/creer-des-onglets-facilement/

La partie HTML va dans le message d'accueil, la partie CSS=> feuille de style CSS, et pour le code Javascript, collez-le dans un bloc note, enregistrer en .js et hebergez-le. Il suffit ensuite de mettre le code ci dessous en haut du message d'accueil:

Code:

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

Pour réussir, c'est juste une question de patience ! Bon courage à vous.

Cordialement.

[Park Ha Gi]

Bonjour, j'ai fait comme vous l'avez dit mais voilà ce que ça me fait : http://forumdesigntestforum.forumactif.com/forum.htm. T_T

[Invité]

Bonjour,

Sur mon forum cela fonctionne, mais il est vrai que j'ai retiré un petit bout du CSS ... j'ai mis ceci
Page d'accueil (penser à mettre l'adresse de votre fichier .js):

Code:

<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <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></ul>

Le CSS:

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

[Park Ha Gi]

Mon forum est mieux maintenant mais quand je clique par exemple sur l'onglet 2, rien de change ^^"

[Invité]

Re,

Contente qu'il y ait du mieux! j'ai eu un doute pendant un instant .
Pour les onglets qui ne changent pas, c'est peut être un problème avec le script... Vous avez bien mis les guillemets ( " ) de chaque coté de l'adresse? Un espace a pu se glisser quelques part aussi. L'adresse de votre fichier du script est bien du même genre que celle-ci:

Code:

http://pmsc.free.fr/J04/10912150254.js

Je ne vois pas ce qui pourrait bloquer, sinon .

[b2uty]

chez moi sa marche, je panse que c'est ton url ".js" qui n'est pas bon "Park Ha Gi"

par contre pour l habillage des onglets c'est trop dur, j'y arrive pas je voudrais metre une collone acoté des onglet comme ici :
http://skills-hysteria.forumactif.org/forum.htm
mais sa veux pas T.T en suite j'aurai voulu qu'on ne soit pas obliger de cliker sur chaque titre mais juste passer sa sourit pour que les onglets change de page,
je panse que pour ça il faut modifier :
" onclick="
mais je sais pas se qu'il faut metre à la place de "onclick".

[Invité]

Bonsoir,

Pour que l'onglet change, il faut effectivement remplacer le "onclick" . Il faut mettre "onmouseover" à la place .

En ce qui concerne la colonne à coté du tableau à onglets c'est une autre cellule de tableau. Il faut essayer de mettre tous les éléments de la page d'accueil dans un tableau.

[La-Pouic-Team]

Oh my god ... Je dois être vraiment débile parce que je n'ai rien compris --' Le truc c'est que quand je met le code CSS, ma page de déforme totalement ... Pourquoi ? ( genre la Pa est à 3 km de là où elle devrait être ... --')
Désolé d'être si incompétente >.<

[Invité]

Bonjour,

Sur mon forum cela fonctionne, mais il est vrai que j'ai retiré un petit bout du CSS ... j'ai mis ceci
Page d'accueil (penser à mettre l'adresse de votre fichier .js):

Code:

<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <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></ul>

Le CSS:

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

Même comme ça, ça ne marche pas? Etrange. Il y a peut-être un conflit dans le CSS ...
Cordialement.

[La-Pouic-Team]

Bonsoir,
LOL :$ Si ça marche comme ça ... (Merci xD) Mais je suis tellement trop nulle que moi dès que ça devient un peu compliqué... >.< ( En gros, dès qu'on me mache pas le boulot, la pauvre petit Pauline débile ne comprend rien XD )
Sinaah ( Oui ... je suis une vrai chieuse ...) où placer le dernier code ? Je l'ai mis sur la PA mais ça n'a pas marché ...

[Lixyr]

Ce code ?

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

Tu vas dans PA >> Affichage >> couleurs >> feuille de style css

Tu le mets dans le champ, et tu enregistres.

Ensuite, tu peux modifier certaines indications, ou en rajouter, pour que le graphisme de tes onglets, l'intérieur, etc, te corresponde.

[La-Pouic-Team]

Bonsoir,
Non, pas celui-ci ( Oui, je suis débile, mais le CSS ça va, je comprend à peu près, c'est le javascript que je sais pas ou mettre lol)
Lui :

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

[Invité]

Bonsoir,

Le code que vous donnez est le script javascript . Il faut le copier dans le bloc-note sur votre PC et l'enregistrer en .js, puis héberger le fichier. Une fois cela fait vous notez l'adresse dans votre page d'accueil sous cette forme :

Code:

<script src="Url-du-script"></script>

Cordialement.

P.S. : je vous fait parvenir un exemple en MP

[Lixyr]

Ca tu l'enregistres dans un bloc note, dans tes documents, sous le format .js et tu l'héberges sur un site qui héberge les fichiers, comme celui-ci, ensuite une fois qu'il est hébergé, tu prends l'adresse du lien, et tu la rentres dans cette partie du code qui va dans la page d'accueil :

Code:

<script src="L'URL DE TON FICHIER HEBERGE"></script><div id="mes_onglets">
    <ul>
        <li id="o_1" class="mon_onglet_selected"

celle-ci, en rouge :

<script src="L'URL DE TON FICHIER HEBERGE"></script><div id="mes_onglets">

[La-Pouic-Team]

Bonsoir,
Hum ... Alors hum lol :$ Comment on fait pour mettre en format .js ? Parce que quand j'utilise Works par exemple il n'y a pas non plus & pour le format texte non plus ... Je suis vraiment nulle, je sais :$

[Invité]

Bonjour,

Pour le format .js, c'est tout simple: Dans les accessoire de Windows, il y a un Bloc Note. Il suffit de copier le script dans dans ce bloc note puis l'enregistrer de cette manière:

[Link6740]

Hello , merci pour le code je le cherchais justement mais quelqun c'est comment faire comme sur ce forum :

http://lesmagesnoirs.forum2ouf.com/forum.htm


Forum a l'abandon dommage j'aurai pu contacter l'admin pour lui demander ....

MERCI

[La-Pouic-Team]

Bonjours,
Ha d'accord >.< ( Pauvre petit moi sans cervelle ... )

[Invité]

Bonjour,
Pour faire ce que vous souhaitez Link6740 il faut modifier les template. Effectivement le code doit pouvoir s'adapter, mais je n'ai aucune idée de comment faire cela...

Cordialement.

[La-Pouic-Team]

Re-bonsoir,
Voilà, piti problème ( Oui encore ... je sais >.< )
Le problème c'est que je ne comprend pas pourquoi le 4è onglet ne veut pas resté sur la première barre, j'ai d'abord pensé que mon contenu était trop petit et le texte de l'onglet trop grand, du coup j'ai mis lien à la place et je me suis rendu compte que cet onglet restait quand même en dessous des autres. Pourquoi ?
- Ensuite : Où règle-t-on la largeur ? ( C'est OK pour la hauteur...)
- Où arrondit-on les onglets ?


La PA :

Code:

<script src="http://pmsc.free.fr/J04/10918133120.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Bienvenue</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Contexte & Video</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Nos partenaires</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"> Lien</li>
        <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></ul>


le CSS :

Code:

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

[Invité]

Bonsoir,

Pour l'onglet, c'est juste un petit problème de dimensions dans ce code:

Code:

#mes_contenus, #mes_onglets{
  width: 400px;
}

Remplacez 400 par plus grand et cela devrait replacer le 4ème onglet à la suite des autres. Ce code détermine la longueur maximale de la boite, en gros la ligne d'onglet ne peut pas dépasser la taille indiquée.

Pour arrondir les onglets, il faut bien penser aux 3 endroits : l'onglet sur lequel on est, celui où on n'est pas, est celui où passe la souris:

Code:

.mon_onglet
.mon_onglet:hover
.mon_onglet_selected

Pour n'arrondir que le haut ajoutez le code ci dessous juste avant le "}" de chacun des codes cités ci-dessus:

Code:

 -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;

Cordialement

[La-Pouic-Team]

J'ai essayé de suivre vos indications, mais ça fait tout foiré >.< Je n'ai pas compris ou je me suis gourré ...
http://Instants-Magiques.forumactif.com/ ( Je m'en sert comme forum test en attendant de tout refaire son habillage parce que celui là est vraiment trop moche >.<)

Code:

ul, li{
  list-style: none;
} -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #E3C888;
  border: 1px solid #DBB764;
  cursor: pointer;
  margin-bottom: -1px;
} -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
.mon_onglet:hover{
  background:#E3C888;
} -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #DBB764;
  border-top: 1px solid #DBB764;
  border-right: 1px solid #DBB764;
  border-left: 1px solid #DBB764; 
  border-bottom: 1px solid #DBB764; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 100px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 600px;
}

[Invité]

Re,

En effet, nous ne nous sommes pas comprises ... les codes vont dans ce sens là:

Code:

ul, li{
  list-style: none;
}

.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #E3C888;
  border: 1px solid #DBB764;
  cursor: pointer;
  margin-bottom: -1px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;}

.mon_onglet:hover{
  background:#E3C888;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;}     

.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #DBB764;
  border-top: 1px solid #DBB764;
  border-right: 1px solid #DBB764;
  border-left: 1px solid #DBB764;
  border-bottom: 1px solid #DBB764;
  cursor: pointer;
  margin-bottom: -1px;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;  }
           
.clear{
  clear: both;
}

.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 100px;
        margin: -1px;         
}
#mes_contenus, #mes_onglets{
  width: 600px;
}

Tout ce qui concerne le style doit être inclus entre { et } . Je me suis mal exprimée en disant "avant }" , désolée.

[La-Pouic-Team]

Bonjours,
Haaa oui en effet ! xD Désolé je comprend jamais rien >.<

Heum ... Je voudrais que le tableau en dessous des onglet prenne toute la largeur de la PA ... Mais ça me fait ça :
http://instants-magiques.forumactif.com/
Et j'aimerait centré mes onglets aussi, mais je n'ai pas trouvé non plus :S

[Invité]

Bonjour,

J'arrive à faire en sorte que le contenu tienne toute la page en modifiant une partie du CSS. Je remplace

Code:

.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 100px;
        margin: -1px;       
}
#mes_contenus, #mes_onglets{
  width: 600px;
}

Par

Code:

.mon_contenu{
  color: #666;
  background: #E6D1A1;
  border: 2px solid #DBB764;
  padding: 2px;
  margin-left: -40px;         
  height: 400px;}

#mes_contenus, #mes_onglets{
  width: 100%;
  }

Par contre je n'arrive pas a trouver comment centrer les onglets ...

Cordialement.

[La-Pouic-Team]

Hum ... J'ai téléchargé notepadd++ comme vous me l'aviez conseillez dans un autre topic, mais une fois qu'on a mis notre code, comment on fait pour s'en servir quoi ? xD * Gourde pro est de retour x) *

[* Flowine]

Bonjour.
J'ai donc tout suivi, mais quand je mets le code sur la page d'accueil, le code n'apparaît pas, il s'affiche comme un code...