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

mettre des onglets

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

Résolu mettre des onglets

Message par Moagi-misaki le 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

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 le 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
avatar

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é le 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.
avatar

Invité
Invité


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

Résolu Re: mettre des onglets

Message par Moagi-misaki le 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.

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é le 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.
avatar

Invité
Invité


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

Résolu Re: mettre des onglets

Message par Moagi-misaki le 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 ?

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é le Dim 10 Juil 2011 - 16:02

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

Cordialement.
avatar

Invité
Invité


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

Résolu Re: mettre des onglets

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

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

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


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