Onglet dans message

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

Résolu Onglet dans message

Message par Masaru le Lun 29 Juil 2013 - 19:32

Bonjour à tous et à toutes !

Alors voilà, je voulais insérer un tableau à onglet dans un post, pour ça j'ai trouvé un sujet sur forumactif expliquant comment faire ( Cliquez-ici ).

J'ai fait comme c'était expliqué, dans une page HTML j'ai posté le code suivant :

Spoiler:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
<!--
     
     .mon_onglet{
       float: left;
       padding: 2px 10px;
       margin-right: 5px;
         color: #000;
         background: #fff;
       border: 1px solid #000;
       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: #000;
       background: #fff;
       border-top: 1px solid #000;
       border-right: 1px solid #000;
       border-left: 1px solid #000;
       border-bottom: 1px solid #fff;
       cursor: pointer;
       margin-bottom: -1px;
       list-style: none;}        
     .clear{
       clear: both;
     }
     .mon_contenu{
       color: #000;
       background: #fff;
       border: 1px solid #000;
       padding: 10px;
       line-height: normal;
       font-size: 11px;}
     #mes_contenus, #mes_onglets{
       width: 400px;
       margin: auto;}
-->
</style></head>

<body>
<script>
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';
           }
         }
         }        
   }
   </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></div></ul></div>
</body>
</html>

Et dans mon message le code suivant en variant la taille du tableau :

Spoiler:

Code:
<IFRAME src="LIEN DE LA PGE HTML" width=xxx height=xxx scrolling=no frameborder=0 > </IFRAME>


Ce qui me donne ceci :

Spoiler:

C'est donc normal. Seulement lorsque je modifie le titre des Onglets (à savoir Onglet 1 etc), ça me déforme le tableau et j'obtiens quelque chose du genre :

Spoiler:

J'ai quand même essayé de modifier auparavant la taille du tableau pour voir si mes onglets s'alignaient, mais non.

Je fait donc appel à votre aide pour savoir comment je peux faire pour que mes onglets restent tous alignés et ne se positionne pas les uns sous les autres ^^.

Merci à vous !!


Dernière édition par Masaru le Lun 29 Juil 2013 - 23:53, édité 1 fois

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

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

Résolu Re: Onglet dans message

Message par _backdraft_ le Lun 29 Juil 2013 - 22:44

Bonsoir,

Je pense qu'il faut augmenter la largeur de l'iframe et non du tableau.

Cordialement
Backdraft

_backdraft_
# Tropactif #

Masculin
Messages : 1505
Inscrit(e) le : 04/03/2010

http://www.caserne35.com
_backdraft_ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet dans message

Message par Masaru le Lun 29 Juil 2013 - 23:32

Bonsoir,

Tout d'abord merci pour votre aide ^^!

Justement, je me suis mal exprimé, désolé, c'est la largeur de l'iframe que je modifie et ça déforme uniquement le forum, sans résoudre le soucis. Dans le html si je rajoute " width " dans la div "mon onglet" ça modifie la largeur du cadre de l'onglet mais ça ne les aligne toujours pas... ^^'

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

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

Résolu Re: Onglet dans message

Message par Lixyr le Lun 29 Juil 2013 - 23:40

Bonsoir.

Le problème vient du fait que la largeur que doit prendre au total vos onglets est égale à 400 :

Code:
#mes_contenus, #mes_onglets{
      width: 400px;
      margin: auto;}

la valeur est trop petite, et donc comme les onglets prennent trop de places, ils se mettent les uns sous les autres. Augmentez cette valeur jusqu'à ce que ça rentre. ^^





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5647
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet dans message

Message par Masaru le Lun 29 Juil 2013 - 23:53

Ah oui en effet ! Je n'avais pas essayé de modifier cette valeur, et tout s'aligne lorsque je l'augmente.

Merci beaucoup ! =)

Masaru
Nouveau membre

Messages : 16
Inscrit(e) le : 26/07/2013

Masaru 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