mettre des onglets

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

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

Résolu mettre des onglets

Message par Moagi-misaki Dim 10 Juil 2011 - 5:27

Bonjour,
j'aimerais recevoir votre aide pour instaurer des onglets
sur la page accueille de mon forum.

J'ai essayer les codes se trouvant sur cette page-ci:ici

je voulais d'abord essayer si tout allait bien bien avec cela, cependant j'ai rencontrer quelques petits ennuis visibles sur mon forum : mon forum

Voici le codage complet que jai inseree
Code:
<<script src="http://mecania-academy.canadian-forum.com/"></script><div id="mes_onglets">
   <ul><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>
      <li class="mon_onglet"><a href="http://www.google.fr" target="_blank">Lien</a></li>
      <div class="clear"></div>
   </ul>
</div><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>

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

peut-etre l'ais-je mal fait, auquel cas, veuiller me pardonner. Donc voila si quelqu'un voudrais bien me montrer comment faire, j'apprecierais.

Jai bien sure mis le deuxieme code dans la feuille CSS machin :
Code:
*{
   margin: 0px;
   padding: 0px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
}
body{
   width: 400px;
   margin: 10px auto;
}
a{
   text-decoration: none;
   color: #666;
}
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;            
}
#mes_contenus, #mes_onglets{
   width: 400px;
}

Et j'ai essayer de me referer aux explications provenant d'ici : ici

Probleme identifies:
1)c'est pas comme ca que sa doit etre, si ?
2)ca reste toujours sur : Mon contenu 1
3)aller savoir pourquoi jai des codes en supplements ?

Autre infos:
-Internet Explorer
-fondateurs
-j'ai rien toucher du theme deja proposer par hitskin machin...


J'ai egalement consulter cette page-ci pour voir si mon internet posait probleme et je n'ai malheureusement pas compris grand choses, pardon -_-'


Dernière édition par Moagi-misaki le Dim 10 Juil 2011 - 16:05, édité 1 fois
avatar

Moagi-misaki
Nouveau membre

Messages : 10
Inscrit(e) le : 10/07/2011

http://mecania-academy.canadian-forum.com/
Moagi-misaki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre des onglets

Message par Horatio Dim 10 Juil 2011 - 7:10

Bonjour en effet votre code pose un problème, je vous propose d'utiliser celui-ci à personnaliser en fonction de vos gouts :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]" xml:lang="fr" lang="fr" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PA avec Onglets par [url=http://www.atelier-forum.com/title]www.atelier-forum.com</title[/url]>
<style type="text/css">
.onglet{
color: #DD6900;
background-color:#;
display:inline-block;
margin-left:10px;
margin-right:0px;
margin-bottom:-3px;
margin-top:5px;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
letter-spacing:-1px;
font-size:13px;
font-style:normal;
width: 120px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border:1px solid #3F484D;
}
.contenu_onglet{
background-color:#;
margin-top:0px;
margin-bottom:5px;
margin-right:2px;
margin-left:2px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:10px;
font-size:12px;
font-style:normal;
display:none;
height:200px;
width:800px;
overflow:auto;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
border:1px solid #3F484D;
text-align:justify;
}
</style></head>
<body>
<table width="800"><tr><td width="800" vAlign="top"><br><div class="gensmall"><script language="Javascript" type="text/javascript" SRC="[url=http://www.atelier-forum.com/Script-onglet-survol-h23.htm"/scriptdiv]http://www.atelier-forum.com/Script-onglet-survol-h23.htm"></script><div[/url]>
 <center>
<span class="onglet_0 onglet" id="onglet_drh" onmouseover="javascript:change_onglet('drh');">Onglet 1</span>
<span class="onglet_0 onglet" id="onglet_drh1" onmouseover="javascript:change_onglet('drh1');">Onglet 2</span>
<span class="onglet_0 onglet" id="onglet_drh2" onmouseover="javascript:change_onglet('drh2');">Onglet 3</span>
<span class="onglet_0 onglet" id="onglet_drh3" onmouseover="javascript:change_onglet('drh3');">Onglet 4</span>
<span class="onglet_0 onglet" id="onglet_drh4" onmouseover="javascript:change_onglet('drh4');">Onglet 5</span> </center>
</td></tr>
<tr><td width="800"><div class="contenu_onglet" id="contenu_onglet_drh"><div align="center">
<br>Contenu onglet 1</div></div><div class="contenu_onglet" id="contenu_onglet_drh1"><div align="center">
<br>Contenu onglet 2</div></div><div class="contenu_onglet" id="contenu_onglet_drh2"><div align="center">
<br>Contenu onglet 3</div></div><div class="contenu_onglet" id="contenu_onglet_drh3"><div align="center">
<br>Contenu onglet 4</div></div><div class="contenu_onglet" id="contenu_onglet_drh4"><div align="center">
<br>Contenu onglet 5</div></div>
<script type="text/javascript">
//<!--
var anc_onglet = 'drh';
change_onglet(anc_onglet);
//-->
</script>
</div>
</div>
</td></tr>
</table>
</body>
</html>

Il n'y a plus qu'a ajuster la taille et les cours, ainsi que le contenu.

Cordialement
Horatio

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre des onglets

Message par Invité Dim 10 Juil 2011 - 12:04

Bonjour,

Vous pouvez tout à fait faire fonctionner le code que vous avez choisi.
Placez d'abord le code javascript dans: panneau d'admin > Modules > gestion des codes Javascript. Donnez lui un titre,cochez " Sur l'index" et collez cette partie :
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 direction la feuille de style CSS, où vous placez ceci:
Code:

a{
  text-decoration: none;
  color: #666;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  cursor: pointer;
  margin-bottom: -1px;
    list-style: none} 
.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;
    list-style: none}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  padding: 10px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}
Et enfin, vous placez le code html dans le message d'accueil:
Code:
<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></div></ul></div>

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: mettre des onglets

Message par Moagi-misaki Dim 10 Juil 2011 - 15:46

D'accord merci,
sa fonctionne maintenant Isolde et merci a vous Horatio, j'ai neanmoins une seconde question, est-ce que je peut modifier la largeur et tout ? et si oui dans lequel des codes ? (jai suivi les instruction de isolde, sa a donner sa = ici , c'est parfais en soi, mais un peu petit ^^)

Ha pour celui d'Horatio j'ai pas reussis a le mettre, une partie du code restait afficher.
avatar

Moagi-misaki
Nouveau membre

Messages : 10
Inscrit(e) le : 10/07/2011

http://mecania-academy.canadian-forum.com/
Moagi-misaki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre des onglets

Message par Invité Dim 10 Juil 2011 - 15:57

Les dimensions se modifient dans la partie CSS.
#mes_contenus, #mes_onglets{
width: 400px;
}
Si vous souhaitez que votre boite à onglet prenne toute la largeur de la page d'accueil, remplacez "400px" par "100%" . Mais vous pouvez aussi simplement augmenter le nombre de px Wink .

Si vous voulez une hauteur fixe, il faut l'ajouter dans la class "mon_contenu":
.mon_contenu{
color: #666;
background: #b8efa1;
border: 1px solid #68ce3e;
padding: 10px;
height: 150px;
}

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: mettre des onglets

Message par Moagi-misaki Dim 10 Juil 2011 - 15:59

Parfait j'ai tout compris, merci
Une derniere question, connaissez-vous un endroit ou ils donnent toutes les couleurs et leur code? pour si jamais jai envie de changer de couleur ?
avatar

Moagi-misaki
Nouveau membre

Messages : 10
Inscrit(e) le : 10/07/2011

http://mecania-academy.canadian-forum.com/
Moagi-misaki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: mettre des onglets

Message par Invité Dim 10 Juil 2011 - 16:02

Vous en trouverez quelques uns sur cette page:
> Liste des couleurs

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: mettre des onglets

Message par Moagi-misaki Dim 10 Juil 2011 - 16:05

Merci mon probleme est resolu!
Un grand merci a vous deux ^^
avatar

Moagi-misaki
Nouveau membre

Messages : 10
Inscrit(e) le : 10/07/2011

http://mecania-academy.canadian-forum.com/
Moagi-misaki a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum