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

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
avatar

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
avatar

_backdraft_
Membre habitué(e)

Masculin
Messages : 1509
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... ^^'
avatar

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


EN PRÉSENCE RÉDUITE LA SEMAINE - RÉPOND AUX MP
avatar

Lixyr
Aidactive
Aidactive

Féminin
Messages : 6183
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 ! =)
avatar

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