[Résolu] Organisation par Onglets Bouton_active[Résolu] Organisation par Onglets Bouton_hover[Résolu] Organisation par Onglets Fb-hover[Résolu] Organisation par Onglets Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
[Résolu] Organisation par Onglets EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
[Résolu] Organisation par Onglets EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
[Résolu] Organisation par Onglets EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
[Résolu] Organisation par Onglets EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
[Résolu] Organisation par Onglets EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
[Résolu] Organisation par Onglets EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
[Résolu] Organisation par Onglets EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
[Résolu] Organisation par Onglets EmptyMar 07 Fév 2023, 08:40 par Oxtran

-39%
Le deal à ne pas rater :
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
399 € 649 €
Voir le deal

Partagez
 

[Résolu] Organisation par Onglets

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://reve-inverness.forumactif.com/
Abysse Yclette
Abysse Yclette
{ Membre }
{ Membre }

Féminin Messages : 152



[Résolu] Organisation par Onglets Empty
Bonjour,

J'ai voulu utiliser ce tutoriel pour créer une organisation en onglets. Mais j'ai rencontré un petit problème : quand on clique sur les onglets, le contenu de ceux-ci ne s'affichent pas (hormis le premier, qui s'affiche par défaut).

J'ai bien créé la page html comme indiqué et je l'ai mise dans une balise script dans le head de mon template "overall_header". J'ai copié le code html et j'ai commencé à le personnaliser. Et je viens juste de me rendre compte que le contenu de mes deux autres onglets ne veut pas s'afficher.

Je vous donne le code html (le css étant guère modifié, je ne pense pas que ce soit ça qui pose problème) :
Code:
<div style="width:937px;background-color:#D6DDE3;padding:10px;margin-bottom:-2px;" align="center"><span style="font-family: Marcellus SC; font-size:18px; letter-spacing:1px;">Carte - Lexique - Chatbox</span></div>
<table style=";margin: auto;" ><tr><td style="padding-bottom: 4px; padding-top:90px; padding-left:15px;background-color:#9DB0E8;width:190px;height:300px;" " align="left" ><div id="mes_onglets">
        <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Introduction</span><br /><br />
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Personnages</span><br /><br />
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff & Crédits</span><br /><br />
      </td>
  <td style="background-color:#E4EBF2; width:747px;height:300px;overflow:auto;"><div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><div align="center"><span style="font-family:Marcellus SC; font-size:24px;letter-spacing:1px;color:#FFFFFF; text-shadow: #4F4F4F 0px 0px 5px;">Bienvenue dans les Rêves d'Inverness</span><br>

<font color="#757575"><i>Forum Roleplay fantastique - Rp libre sans contrainte de lignes</i></font></div><br><div align="right"><img src="http://img15.hostingpics.net/pics/964037histoirebon.png" style="margin-bottom:-25px;padding-right:15px;"  /></div><div style=" border-left:solid 3px white; border-right:solid 3px white; margin-left: 30px; margin-right: 15px;background-image: url('http://img15.hostingpics.net/pics/757220histoirefond.png');background-repeat: repeat;height:280px; overflow:auto;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px;"><blockquote><div align="justify"><span style="font-size: 12px; line-height: normal"><br>
Vous venez de pénétrer dans les rêves d’Inverness. Enfant malade et misanthrope, vivant reclus, il s’est construit une réalité toute autre en s’évadant dans le monde des rêves. Débordant d’imagination, l’enfant finit par écrire ses inventions dans un carnet tenu secret. A sa mort, le carnet ne fut jamais retrouvé. Sombrant dans un sommeil éternel, l’enfant donna vie à ses rêves.<br><br>
Ainsi est né l’univers d’Inverness. On raconte qu’à sa mort, son âme s’est fragmentée, éparpillée à travers le Royaume. La légende veut que celui qui réunira les Fragments d’âme devienne alors le nouveau Maître du Royaume. Cependant, nombreux sont ceux qui ont disparus à la recherche de ces Fragments.
<br><br>
Plongez dans un univers complexe et mystérieux où magies et  conspirations s'entremêlent. Vous, rêveur tout juste embarqué dans ce monde, saurez-vous y forger votre légende et retrouver les Fragments ?
<br><br><div align="right">Contexte librement inspiré de l'univers de Dune de F.Herbert † <a href="http://reve-inverness.forumactif.com/t1-l-histoire-d-inverness-contexte?tid=f9d59f932222d9611d619b9b70c098b8" class="postlink">En savoir plus ?</a></div></span></div></div>

    <div id="co_2" class="mon_contenu" style="display: none;"><a href="http://reve-inverness.forumactif.com/f7-predefinis" alt= "Les Prédéfinis" class="postlink"><img src="http://img4.hostingpics.net/pics/660290predefpres.png" alt="Les Prédéfinis" border="0" /></a>
<br><br><div id="cadrestaff"><div class="staffcach"><img src="http://img11.hostingpics.net/pics/943918accinverness.png"/></div><div class="descriptionstaff"><br><strong>INVERNESS</strong><br>Fondateur<br><br><a href="http://reve-inverness.forumactif.com/privmsg?mode=post&u=1" class="postlink" target="_blank" rel="nofollow">MP</a>
</div></div>

</div>

    <div id="co_3" class="mon_contenu" style="display: none;">Pouet</div>

</div></div></div></td></tr></table><div style="width:937px;background-color:#D6DDE3;padding:10px;margin-top:-2px;" align="left"><img src="http://img11.hostingpics.net/pics/133416fav.png" style="margin-top:-20px;"/><br><br>
blablabla</div>

Le code est un peu brouillon, pour l'instant, et je m'en excuse. J'étais dans une phase de test.

Voici justement le lien de mon forum test : http://cavenecadas.forums-actifs.net/

Merci d'avance !


Dernière édition par Abysse Yclette le Sam 26 Jan 2013, 15:26, édité 1 fois
MessageSujet: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptyDim 13 Jan 2013, 07:20
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[Résolu] Organisation par Onglets Empty
Bonjour Abysse !

Et bien et bien, ton problème est assez limpide en fait, du fait que ton code ne l'est pas Wink

Le manque d'indentation et le mélange CSS/HTML dans ta structure HTML rend ton code peu lisible et contribue à créer des erreurs de structure basiques qui expliquent le fait que ton code JS ne donne pas l'effet que tu souhaite.

Je te suggère fortemment donc de retravailler un peu ton code pour :
  • L'indenter
  • Retirer le CSS du HTML
  • Ne plus utiliser les balises obsolètes (<font> ou <center> notamment)
  • Corriger la syntaxe des balises orphelines (<br /> et non <br>)


Normalement, rien qu'avec le premier point on voit très rapidement d'où vient le problème. Je me suis rapidement servi d'un beautifier en ligne pour indenter rapidement ton code, et le problème de structure saute aux yeux non ?

Code:
<div style="width:937px;background-color:#D6DDE3;padding:10px;margin-bottom:-2px;" align="center">
   <span style="font-family: Marcellus SC; font-size:18px; letter-spacing:1px;">Carte - Lexique - Chatbox</span>
</div>
<table style=";margin: auto;">
<tr>
   <td style="padding-bottom: 4px; padding-top:90px; padding-left:15px;background-color:#9DB0E8;width:190px;height:300px;" " align="left">
      <div id="mes_onglets">
         <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Introduction</span><br/><br/>
         <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Personnages</span><br/><br/>
         <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff & Crédits</span><br/><br/>
      </td>
      <td style="background-color:#E4EBF2; width:747px;height:300px;overflow:auto;">
         <div class="clear">
            <div id="mes_contenus">
               <div id="co_1" class="mon_contenu">
                  <div align="center">
                     <span style="font-family:Marcellus SC; font-size:24px;letter-spacing:1px;color:#FFFFFF; text-shadow: #4F4F4F 0px 0px 5px;">Bienvenue dans les Rêves d'Inverness</span><br>
                     <font color="#757575"><i>Forum Roleplay fantastique - Rp libre sans contrainte de lignes</i></font>
                  </div>
                  <br>
                  <div align="right">
                     <img src="http://img15.hostingpics.net/pics/964037histoirebon.png" style="margin-bottom:-25px;padding-right:15px;"/>
                  </div>
                  <div style=" border-left:solid 3px white; border-right:solid 3px white; margin-left: 30px; margin-right: 15px;background-image: url('http://img15.hostingpics.net/pics/757220histoirefond.png');background-repeat: repeat;height:280px; overflow:auto;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px;">
                     <blockquote>
                        <div align="justify">
                           <span style="font-size: 12px; line-height: normal"><br>
                            Vous venez de pénétrer dans les rêves d’Inverness. Enfant malade et misanthrope, vivant reclus, il s’est construit une réalité toute autre en s’évadant dans le monde des rêves. Débordant d’imagination, l’enfant finit par écrire ses inventions dans un carnet tenu secret. A sa mort, le carnet ne fut jamais retrouvé. Sombrant dans un sommeil éternel, l’enfant donna vie à ses rêves.<br>
                           <br>
                            Ainsi est né l’univers d’Inverness. On raconte qu’à sa mort, son âme s’est fragmentée, éparpillée à travers le Royaume. La légende veut que celui qui réunira les Fragments d’âme devienne alors le nouveau Maître du Royaume. Cependant, nombreux sont ceux qui ont disparus à la recherche de ces Fragments. <br>
                           <br>
                            Plongez dans un univers complexe et mystérieux où magies et conspirations s'entremêlent. Vous, rêveur tout juste embarqué dans ce monde, saurez-vous y forger votre légende et retrouver les Fragments ? <br>
                           <br>
                           <div align="right">
                              Contexte librement inspiré de l'univers de Dune de F.Herbert † <a href="http://reve-inverness.forumactif.com/t1-l-histoire-d-inverness-contexte?tid=f9d59f932222d9611d619b9b70c098b8" class="postlink">En savoir plus ?</a>
                           </div>
                           </span>
                        </div>
                     </div>
                     <div id="co_2" class="mon_contenu" style="display: none;">
                        <a href="http://reve-inverness.forumactif.com/f7-predefinis" alt "les s prédéfinis" class="postlink"><img src="http://img4.hostingpics.net/pics/660290predefpres.png" alt="Les Prédéfinis" border="0"/></a>
                        <br>
                        <br>
                        <div id="cadrestaff">
                           <div class="staffcach">
                              <img src="http://img11.hostingpics.net/pics/943918accinverness.png"/>
                           </div>
                           <div class="descriptionstaff">
                              <br>
                              <strong>INVERNESS</strong><br>
                              Fondateur<br>
                              <br>
                              <a href="http://reve-inverness.forumactif.com/privmsg?mode=post&u=1" class="postlink" target="_blank" rel="nofollow">MP</a>
                           </div>
                        </div>
                     </div>
                     <div id="co_3" class="mon_contenu" style="display: none;">
                        Pouet
                     </div>
                  </div>
               </div>
            </div>
         </td>
      </tr>
      </table>
      <div style="width:937px;background-color:#D6DDE3;padding:10px;margin-top:-2px;" align="left">
         <img src="http://img11.hostingpics.net/pics/133416fav.png" style="margin-top:-20px;"/><br>
         <br>
          blablabla
      </div>


Dis moi si tu trouve le soucis, sinon je t'explique un peu plus ce qu'il en est Wink
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptyLun 14 Jan 2013, 05:41
Revenir en haut Aller en bas
http://reve-inverness.forumactif.com/
Abysse Yclette
Abysse Yclette
{ Membre }
{ Membre }

Féminin Messages : 152



[Résolu] Organisation par Onglets Empty
Merci Espeon pour ta réponse =) Je ne peux malheureusement pas essayer de corriger le code avant ce week end, la semaine étant très chargée. Normalement, lorsque je touche aux templates ou que je bricole un code déjà indenté, je fais attention à garder une bonne indentation. Pour ce code, je l'ai testé en le mettant dans la pa et l'affichage pour éditer n'est pas pratique du tout. Bref, je vais indenté le code, c'est sûr, ca sera plus pratique. D'ailleurs je suis curieuse de connaître l'adresse de ce "beautifier" =)
Je crois avoir une petite idée de mon erreur mais je ne pourrais essayer que ce week end. Oh et puis je ne suis pas sûre de saisir la subtilité entre le < br > et le < br /> en fait. Etant une balise dite "orpheline" (comme la balise < img. . > c'est ça ?) il faut forcément ajouter le slash à la fin pour l'indiquer ? Dans ce cas pourquoi voit-on beaucoup de < br > sur des codes ?


Dernière édition par Abysse Yclette le Mer 16 Jan 2013, 16:15, édité 1 fois
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptyMar 15 Jan 2013, 16:03
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[Résolu] Organisation par Onglets Empty
En ce qui concerne les beautifier, y'en a des tonnes sur Internet. Par exemple celui-ci me paraît très bien : http://www.freeformatter.com/html-formatter.html

Pour la question des balises orphelines, il s'agit des balises qui n'ont pas de pair (comme effectivement br ou img). La règle étant que toutes les balises doivent être "fermées", on rajoute un /> à la fin de ces balises orphelines pour les fermer justement.

Quant au fait que l'on voit beaucoup de <br> sur les codes, c'est parce-que ces codes ne sont pas vraiment propres et valides. D'ailleurs sur CSSActif on reprend petit à petit les anciens codes pour les nettoyer (voire les corriger complètement) et les remettre aux normes. Mais il en reste encore un certain nombre qui n'ont pas été traités pour l'heure Smile

J'attends donc la correction de ton code ce week-end si tu trouve où est la faille (elle est dans la structure si ça peut t'aider, d'où l'intérêt de l'indentation) Wink
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptyMer 16 Jan 2013, 05:01
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



[Résolu] Organisation par Onglets Empty
Je viens préciser un petit point de détail sur les balises orphelines.
Espeon a écrit:
Pour la question des balises orphelines, il s'agit des balises qui n'ont pas de pair (comme effectivement br ou img). La règle étant que toutes les balises doivent être "fermées", on rajoute un /> à la fin de ces balises orphelines pour les fermer justement.
C'est une convention XHTML, qui doit être impérativement utilisée sur ForumActif car les forums de FA sont codés en XHTML. Cette convention n'est plus impérative en HTML5 (je précise avant qu'un petit malin ne me le fasse remarquer) mais vu qu'il ne faut pas coder en HTML5 sur FA... On continuera à vous dire que c'est faux x)
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptyMer 16 Jan 2013, 05:48
Revenir en haut Aller en bas
http://reve-inverness.forumactif.com/
Abysse Yclette
Abysse Yclette
{ Membre }
{ Membre }

Féminin Messages : 152



[Résolu] Organisation par Onglets Empty
Merci beaucoup pour ces compléments. Je comprends beaucoup mieux.

Bon j'ai passé du temps à refaire le code proprement. Il y avait beaucoup, beaucoup, d'erreurs et j'en ai corrigé quelques unes. A présent, la navigation par onglet fonctionne mais j'ai encore un petit souci : J'ai un léger décalage avec mon image en bas, je n'en trouve pas la raison.
Bon, je vois bien qu'il y a des soucis dans mon code et que ce n'est pas optimal du tout. Des balises mal fermées ou pas bien positionnées mais là je suis perdue, je n'arrive plus à m'en sortir.

Voici donc mon code :
Code:
<img src="http://img15.hostingpics.net/pics/906585toppetit.png" align="center" />
<div style="width:937px;background-color:#D6DDE3;">

  <div id="mes_onglets" style="padding:10px; margin-bottom:-2px;" align="center">
        <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Introduction </span> †
        <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Personnages </span> †
        <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff & Crédits</span>
   
          <img src="http://img11.hostingpics.net/pics/625457separation.png" border="0" alt="" /><br />
  </div>
     
    <table align="center">
      <tr> 
  <td style="padding:10px;width:150px;height:300px;" align="center" >
<a href="http://reve-inverness.forumactif.com/t2-reglement-du-forum" class="postlink">
  <img src="http://img15.hostingpics.net/pics/304418boncontexte.png" border="0" alt="Reglement" /></a><br />

<a href="http://reve-inverness.forumactif.com/t74-lexique-quesaquo" class="postlink">
  <img src="http://img15.hostingpics.net/pics/670216bonlexique.png" border="0" alt="Lexique" /></a><br />

<a href="http://reve-inverness.forumactif.com/f14-questions-propositions" class="postlink">
<img src="http://img15.hostingpics.net/pics/862229bonquest.png" border="0" alt="Questions" /></a>   
      </td>
 
      <td style="width:787px;height:350px;overflow:auto;">
        <div class="clear">
            <div id="mes_contenus">
              <div id="co_1" class="mon_contenu" style="height:350px;overflow:auto;">
                  <div align="center">
                    <span style="font-family:Marcellus SC; font-size:24px;letter-spacing:1px;color:#FFFFFF; text-shadow: #4F4F4F 0px 0px 5px;">
                      Bienvenue dans les Rêves d'Inverness</span><br />

                    <span style="color:#949494;"><i>Forum Roleplay fantastique - Rp libre sans contrainte de lignes.</i> </span><br />
                  </div>
                <br />
                 
                <div align="right"><img src="http://img15.hostingpics.net/pics/964037histoirebon.png" style="margin-bottom:-25px;padding-right:15px;" /></div>
                <div style="border-left:solid 3px white; border-right:solid 3px white; margin-left: 25px; margin-right: 25px;background-image: url('http://img15.hostingpics.net/pics/757220histoirefond.png');background-repeat: repeat;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px; padding:20px;font-size:12px;" align="justify">
                             
                   
                      Vous venez de pénétrer dans les Rêves d’Inverness. Enfant malade et misanthrope, vivant reclu, il s’est construit une réalité toute autre en s’évadant dans le monde des rêves. Débordant d’imagination, l’enfant finit par écrire ses inventions dans un carnet tenu secret. A sa mort, le carnet ne fut jamais retrouvé. Sombrant dans un sommeil éternel, l’enfant donna vie à ses rêves.
                      <br /><br />
Ainsi est né l’univers d’Inverness. On raconte qu’à sa mort, son âme s’est fragmentée, éparpillée à travers le Royaume. La légende veut que celui qui réunira les Fragments d’âme devienne alors le nouveau Maître du Royaume. Cependant, nombreux sont ceux qui ont disparus à la recherche de ces Fragments.
                    <br/ ><br/ >
Plongez dans un univers complexe et mystérieux où magies et  conspirations s'entremêlent. Vous, rêveur tout juste embarqué dans ce monde, saurez-vous y forger votre légende et retrouver les Fragments ?
                      <br/ ><br/ >
                        <div align="right">Contexte librement inspiré de l'univers de Dune de F.Herbert † <a href="http://reve-inverness.forumactif.com/t1-l-histoire-d-inverness-contexte" class="postlink">En savoir plus ?</a>
                        </div>
                       
                      </div>
                     
                      </div>

                    <div id="co_2" class="mon_contenu" style="display: none;height:350px;overflow:auto;">                                                   
                      <div align="center">                               
                        <a href="http://reve-inverness.forumactif.com/f7-predefinis" alt="les prédéfinis" class="postlink" target="_blank" rel="nofollow">
                          <img src="http://img4.hostingpics.net/pics/660290predefpres.png" alt="Les Prédéfinis" border="0" /> </a>                     
                        <br />
                        <br />
                        <table align="center">
                          <tr>
                            <td style="padding-right:5px;">                                                         
                              <div id="cadrestaff">                         
                                <div class="staffcach">
                                  <img src="http://img15.hostingpics.net/pics/823945aurahv.png" />                         
                                </div>
                                <div class="descriptionstaff">                           
                                  <br/ >                             
                                    <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                      <a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#7" class="groupe4" target="_blank">
                                      Aurah</a></span>
                                    <br/ ><br/ >
                                      <span style="font-size:10px;"><strong>Espionne d'Inverness</strong>
                                    <br/ >
                                      Rêveuse                                       
                                      <br/ > 
                                        </span>
                                      </div>                       
                                    </div>
                                    </td>
                                   
                                    <td style="padding-right:5px;">                             
                                    <div id="cadrestaff">                         
                                <div class="staffcach">
                                  <img src="http://img11.hostingpics.net/pics/396981marekpetit.png"/>                         
                                </div>
                                <div class="descriptionstaff">                           
                                  <br/ >                             
                                  <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                    <a href="http://reve-inverness.forumactif.com/t49-ordres-predefinis#126" class="groupe3" target="_blank">
                                      Marek</a></span>
                                    <br/ ><br/ >
                                      <span style="font-size:10px;"><strong>Maître Lame</strong>
                                    <br/ >
                                      Originaire 
                                      <br/ >                                                       
                                      </div>                       
                                    </div>
                                    </td>
                                   
                                    <td style="padding-right:5px;">                             
                                    <div id="cadrestaff">                         
                                <div class="staffcach">
                                  <img src="http://img11.hostingpics.net/pics/424367silvir.png"/>                         
                                </div>
                                <div class="descriptionstaff">                           
                                  <br/ >                             
                                    <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                    <a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#125" class="groupe5" target="_blank">
                                      Sylvir</a></span>
                                    <br/ ><br/ >
                                      <span style="font-size:10px;"><strong>Comtesse Norn</strong>
                                    <br/ >
                                      Originaire
                                      <br/ >                                                       
                                      </div>                       
                                    </div>                                   
                              </td>
                                   
                                    <td>                             
                                    <div id="cadrestaff">                         
                                <div class="staffcach">
                                  <img src="http://img11.hostingpics.net/pics/532821teg.png"/>                         
                                </div>
                                <div class="descriptionstaff">                           
                                  <br/ >                             
                                    <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#7" class="groupe4" target="_blank">
                                      Miles Teg
                                      </a></span><br/ ><br/ >
                                    <span style="font-size:10px;"><strong>Général Sardaukar</strong>
                                    <br/ >
                                      Originaire
                                      <br/ >
                                        </span>
                                      </div>                       
                                    </div>                                   
                              </td>
                                   
                            </tr>                                                             
                              </table>                                     
                                      <br />
                                      <br />
                                      <br />
                                      <div align="center" class="vignettes"> Nous recherchons activement des Lames et des Sorcières Bene Gesserit.
                                        <br />
                                        Par ailleurs, nous avons encore un grand nombre de rôles importants libres.
                                        <br />
                                        <a href="http://reve-inverness.forumactif.com/t4-roles-predefinis" alt="les rôles prédéfinis" class="postlink" target="_blank" rel="nofollow">Voir les Rôles Prédéfinis</a>.                                     
                                      </div>
                    </div>
 
                    <div id="co_3" class="mon_contenu" style="display: none; height:350px; overflow:auto;">
                        <table align="center">
                          <tr>
                            <td style="padding-right:5px;">                                                                                       
                                    <div id="cadrestaff">
                                      <div class="staffcach">
                                        <img src="http://r29.imgfast.net/users/2915/62/48/82/avatars/10902-27.jpg"/>
                                      </div>
                                      <div class="descriptionstaff">
                                        <br /><span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;" class="groupe4">INVERNESS</span>
                                          <br />
                                          Fondateur
                                          <br /><br />
                                          <a href="http://reve-inverness.forumactif.com/privmsg?mode=post&u=1" class="postlink" target="_blank" rel="nofollow">
                                            MP</a>
                                        </div>
                                      </div>                               
                              </td>
                                   
                                    <td>                             
                                    <div id="cadrestaff">                         
                                <div class="staffcach">
                                  <img src="http://img11.hostingpics.net/pics/532821teg.png"/>                         
                                </div>
                                <div class="descriptionstaff">                           
                                  <br/ >                             
                                    <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#7" class="groupe4" target="_blank">
                                      Miles Teg
                                      </a></span><br/ ><br/ >
                                    <span style="font-size:10px;"><strong>Général Sardaukar</strong>
                                    <br/ >
                                      Originaire
                                      <br/ >
                                        </span>
                                      </div>                       
                                    </div>                                   
                              </td>
                                   
                            </tr>                                                             
                              </table>
                    </div>
                 
                           
              </div>
            </div>
 
                          </td>
                       


<table>
  <tr>
    <td>
      <a href="http://reve-inverness.forumactif.com/h2-chatbox" target="_blank">
<img src="http://img15.hostingpics.net/pics/143348boutoncb.png" border="0" alt="" /></a>
    </td>

<td style="width:700px;background-color:#D6DDE3;padding:10px;margin-left:25px;" align="left">
  <img src="http://img11.hostingpics.net/pics/133416fav.png"/>
  <br /><br />
  <table>
    <tr>
      <td>
        <div class="cssactif_tableaupartenaire" style="margin-left:20px;">
          <a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/913325logo10035.png" target="_blank" /></a>
           
            <a href="http://nideyleforum.free.fr/" target="_blank"><img src="http://nideyleforum.free.fr/logos/boutonnideyle.jpg" border="0" target="_blank" /></a>

            <a href="http://lindorm.forum2ouf.com/" target="_blank"><img src="http://nsm08.casimages.com/img/2012/12/18//12121811422710018110679025.png" /></a>

          <a href="http://olide.forumactif.com/"  target="_blank"><img src="http://img15.hostingpics.net/pics/347695LE10035.png#.UKO7ueTWjjs" border="0" alt="" /></a>
 
          <a href="http://lessixduches.forumactif.com/" target="_blank"><img src="http://i48.servimg.com/u/f48/16/28/14/94/sans_t16.jpg" border="0" alt="" /></a>
 
          <a href="http://no-exit.forum-actif.net/forum" target="_blank"><img src="http://img11.hostingpics.net/pics/266758metropolis.png" /></a>
 
            <a href="http://ag-program.bbfr.net" target="_blank"><img src="http://img15.hostingpics.net/pics/316457partmy.png" /></a>
 
          <a href="http://ep-0.forumotion.com/"  target="_blank"><img src="http://img15.hostingpics.net/pics/384088Sanstitre4.png" border="0" alt="" /></a>
 
          <a href="http://reve-inverness.forumactif.com/"  target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" border="0" alt="" /></a>
 
          <a href="http://reve-inverness.forumactif.com/"  target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" border="0" alt="" /></a>
 
          <a href="http://reve-inverness.forumactif.com/"  target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" border="0" alt="" /></a>
 
          <a href="http://reve-inverness.forumactif.com/"  target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" border="0" alt="" /></a>
 
            </div>
      </td>
      <td align="center">
|  <span style="font-family: Marcellus SC ; color: #FFFFFF; letter-spacing: 2px; font-size: 18px ; text-shadow: #000000 0px 0px 4px;">
        <a href="http://reve-inverness.forumactif.com/t12-nos-partenaires" >PLUS</a></span>
        † 
        <span style="font-family: Marcellus SC ; text-align: center; color: #FFFFFF; letter-spacing: 2px; font-size: 18px ; text-shadow: #000000 0px 0px 4px;">
          <a href="http://reve-inverness.forumactif.com/t14-devenir-amis">VOUS ?</a>
        </span> | 
        <br />
<span style="letter-spacing: 1px;text-shadow: #471F1B 0px 0px 3px;font-family: Marcellus SC;font-size: 18px;color:#FFFFFF">
  Topsites : </span>
        <a href="http://www.root-top.com/topsite/ed/in.php?ID=1028" target="_blank">
          <img src="http://hitskin.com/themes/13/75/50/i_icon_minipost_participate.png" alt="" /></a>
        <a href="http://en.root-top.com/toplist/velusia/in.php?ID=5142" target="_blank">
          <img src="http://hitskin.com/themes/13/75/50/i_icon_minipost_participate.png" alt="" /></a>
        <a href="http://www.root-top.com/topsite/filetdudiable/in.php?ID=349" target="_blank">
          <img src="http://hitskin.com/themes/13/75/50/i_icon_minipost_participate.png" alt="" /></a>
      </td>
    </tr>
  </table>
    </td>
  </tr>
    </table>

    <br />  <br />
   
                        </tr>
      </table>
                      </div>

                      <img src="http://img15.hostingpics.net/pics/674682bott.png" />

Et le forum test :
http://cavenecadas.forums-actifs.net/

Et merci d'avance !

Edit : j'ai aussi un souci pour l'affichage du 3e onglet. Ca vient du code du contenu du deuxième onglet, j'en suis quasiment sûre mais je n'arrive pas à trouver le problème.
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptySam 19 Jan 2013, 14:57
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[Résolu] Organisation par Onglets Empty
Hmmmm je ne suis pas sûr que tu ai corrigé toutes les erreurs... En fait, je constate qu'il y a toujours un problème dans la structure (= une balise mal fermée qui fait tout planter).

Ton code proprement indenté donne :
Code:
<img src="http://img15.hostingpics.net/pics/906585toppetit.png" align="center" />
<div style="width:937px;background-color:#D6DDE3;" />
<div id="mes_onglets" style="padding:10px; margin-bottom:-2px;" align="center">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Introduction </span> †
    <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Personnages </span> †
    <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff & Crédits</span>
    <img src="http://img11.hostingpics.net/pics/625457separation.png" border="0" alt="" /><br />
</div>
<table align="center">
    <tr>
        <td style="padding:10px;width:150px;height:300px;" align="center">
            <a href="http://reve-inverness.forumactif.com/t2-reglement-du-forum" class="postlink">
            <img src="http://img15.hostingpics.net/pics/304418boncontexte.png" border="0" alt="Reglement" /></a><br />
            <a href="http://reve-inverness.forumactif.com/t74-lexique-quesaquo" class="postlink">
            <img src="http://img15.hostingpics.net/pics/670216bonlexique.png" border="0" alt="Lexique" /></a><br />
            <a href="http://reve-inverness.forumactif.com/f14-questions-propositions" class="postlink">
            <img src="http://img15.hostingpics.net/pics/862229bonquest.png" border="0" alt="Questions" /></a>   
        </td>
        <td style="width:787px;height:350px;overflow:auto;">
            <div class="clear">
                <div id="mes_contenus">
                    <div id="co_1" class="mon_contenu" style="height:350px;overflow:auto;">
                        <div align="center">
                            <span style="font-family:Marcellus SC; font-size:24px;letter-spacing:1px;color:#FFFFFF; text-shadow: #4F4F4F 0px 0px 5px;">
                            Bienvenue dans les Rêves d'Inverness</span><br />
                            <span style="color:#949494;"><i>Forum Roleplay fantastique - Rp libre sans contrainte de lignes.</i> </span><br />
                        </div>
                        <br />
                        <div align="right"><img src="http://img15.hostingpics.net/pics/964037histoirebon.png" style="margin-bottom:-25px;padding-right:15px;" /></div>
                        <div style="border-left:solid 3px white; border-right:solid 3px white; margin-left: 25px; margin-right: 25px;background-image: url('http://img15.hostingpics.net/pics/757220histoirefond.png');background-repeat: repeat;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px; padding:20px;font-size:12px;" align="justify">
                            Vous venez de pénétrer dans les Rêves d’Inverness. Enfant malade et misanthrope, vivant reclu, il s’est construit une réalité toute autre en s’évadant dans le monde des rêves. Débordant d’imagination, l’enfant finit par écrire ses inventions dans un carnet tenu secret. A sa mort, le carnet ne fut jamais retrouvé. Sombrant dans un sommeil éternel, l’enfant donna vie à ses rêves.
                            <br /><br />
                            Ainsi est né l’univers d’Inverness. On raconte qu’à sa mort, son âme s’est fragmentée, éparpillée à travers le Royaume. La légende veut que celui qui réunira les Fragments d’âme devienne alors le nouveau Maître du Royaume. Cependant, nombreux sont ceux qui ont disparus à la recherche de ces Fragments.
                            <br/ ><br/ >
                            Plongez dans un univers complexe et mystérieux où magies et  conspirations s'entremêlent. Vous, rêveur tout juste embarqué dans ce monde, saurez-vous y forger votre légende et retrouver les Fragments ?
                            <br/ ><br/ >
                            <div align="right">Contexte librement inspiré de l'univers de Dune de F.Herbert † <a href="http://reve-inverness.forumactif.com/t1-l-histoire-d-inverness-contexte" class="postlink">En savoir plus ?</a>
                            </div>
                        </div>
                    </div>
                    <div id="co_2" class="mon_contenu" style="display: none;height:350px;overflow:auto;">
                        <div align="center">
                            <a href="http://reve-inverness.forumactif.com/f7-predefinis" alt="les prédéfinis" class="postlink" target="_blank" rel="nofollow">
                            <img src="http://img4.hostingpics.net/pics/660290predefpres.png" alt="Les Prédéfinis" border="0" /> </a>                     
                            <br />
                            <br />
                            <table align="center">
                                <tr>
                                    <td style="padding-right:5px;">
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img15.hostingpics.net/pics/823945aurahv.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                                <a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#7" class="groupe4" target="_blank">
                                                Aurah</a></span>
                                                <br/ ><br/ >
                                                <span style="font-size:10px;"><strong>Espionne d'Inverness</strong>
                                                <br/ >
                                                Rêveuse                                       
                                                <br/ > 
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding-right:5px;">
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img11.hostingpics.net/pics/396981marekpetit.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                                <a href="http://reve-inverness.forumactif.com/t49-ordres-predefinis#126" class="groupe3" target="_blank">
                                                Marek</a></span>
                                                <br/ ><br/ >
                                                <span style="font-size:10px;" /><strong>Maître Lame</strong>
                                                <br/ >
                                                Originaire 
                                                <br/ >                                                       
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding-right:5px;">
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img11.hostingpics.net/pics/424367silvir.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                                <a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#125" class="groupe5" target="_blank">
                                                Sylvir</a></span>
                                                <br/ ><br/ >
                                                <span style="font-size:10px;" /><strong>Comtesse Norn</strong>
                                                <br/ >
                                                Originaire
                                                <br/ >                                                       
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img11.hostingpics.net/pics/532821teg.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#7" class="groupe4" target="_blank">
                                                Miles Teg
                                                </a></span><br/ ><br/ >
                                                <span style="font-size:10px;"><strong>Général Sardaukar</strong>
                                                <br/ >
                                                Originaire
                                                <br/ >
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <br />
                            <br />
                            <br />
                            <div align="center" class="vignettes"> Nous recherchons activement des Lames et des Sorcières Bene Gesserit.
                                <br />
                                Par ailleurs, nous avons encore un grand nombre de rôles importants libres.
                                <br />
                                <a href="http://reve-inverness.forumactif.com/t4-roles-predefinis" alt="les rôles prédéfinis" class="postlink" target="_blank" rel="nofollow">Voir les Rôles Prédéfinis</a>.                                     
                            </div>
                        </div>
                        <div id="co_3" class="mon_contenu" style="display: none; height:350px; overflow:auto;">
                            <table align="center">
                                <tr>
                                    <td style="padding-right:5px;">
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://r29.imgfast.net/users/2915/62/48/82/avatars/10902-27.jpg" />
                                            </div>
                                            <div class="descriptionstaff">
                                                <br /><span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;" class="groupe4">INVERNESS</span>
                                                <br />
                                                Fondateur
                                                <br /><br />
                                                <a href="http://reve-inverness.forumactif.com/privmsg?mode=post&u=1" class="postlink" target="_blank" rel="nofollow">
                                                MP</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img11.hostingpics.net/pics/532821teg.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#7" class="groupe4" target="_blank">
                                                Miles Teg
                                                </a></span><br/ ><br/ >
                                                <span style="font-size:10px;"><strong>Général Sardaukar</strong>
                                                <br/ >
                                                Originaire
                                                <br/ >
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
        </td>
        <table>
        <tr>
        <td>
        <a href="http://reve-inverness.forumactif.com/h2-chatbox" target="_blank">
        <img src="http://img15.hostingpics.net/pics/143348boutoncb.png" border="0" alt="" /></a>
        </td>
        <td style="width:700px;background-color:#D6DDE3;padding:10px;margin-left:25px;" align="left">
        <img src="http://img11.hostingpics.net/pics/133416fav.png" />
        <br /><br />
        <table>
        <tr>
        <td>
        <div class="cssactif_tableaupartenaire" style="margin-left:20px;">
        <a href="http://shutdown.forums-actifs.com/"><img src="http://img15.hostingpics.net/pics/913325logo10035.png" target="_blank" /></a>
        <a href="http://nideyleforum.free.fr/" target="_blank"><img src="http://nideyleforum.free.fr/logos/boutonnideyle.jpg" border="0" target="_blank" /></a>
        <a href="http://lindorm.forum2ouf.com/" target="_blank"><img src="http://nsm08.casimages.com/img/2012/12/18//12121811422710018110679025.png" /></a>
        <a href="http://olide.forumactif.com/" target="_blank"><img src="http://img15.hostingpics.net/pics/347695LE10035.png#.UKO7ueTWjjs" border="0" alt="" /></a>
        <a href="http://lessixduches.forumactif.com/" target="_blank"><img src="http://i48.servimg.com/u/f48/16/28/14/94/sans_t16.jpg" border="0" alt="" /></a>
        <a href="http://no-exit.forum-actif.net/forum" target="_blank"><img src="http://img11.hostingpics.net/pics/266758metropolis.png" /></a>
        <a href="http://ag-program.bbfr.net" target="_blank"><img src="http://img15.hostingpics.net/pics/316457partmy.png" /></a>
        <a href="http://ep-0.forumotion.com/" target="_blank"><img src="http://img15.hostingpics.net/pics/384088Sanstitre4.png" border="0" alt="" /></a>
        <a href="http://reve-inverness.forumactif.com/" target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" border="0" alt="" /></a>
        <a href="http://reve-inverness.forumactif.com/" target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" border="0" alt="" /></a>
        <a href="http://reve-inverness.forumactif.com/" target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" border="0" alt="" /></a>
        <a href="http://reve-inverness.forumactif.com/" target="_blank"><img src="http://img80.xooimage.com/files/1/f/a/inverness4-347e7de.jpg" border="0" alt="" /></a>
        </div>
        </td>
        <td align="center">
        |  <span style="font-family: Marcellus SC ; color: #FFFFFF; letter-spacing: 2px; font-size: 18px ; text-shadow: #000000 0px 0px 4px;">
        <a href="http://reve-inverness.forumactif.com/t12-nos-partenaires">PLUS</a></span>
        † 
        <span style="font-family: Marcellus SC ; text-align: center; color: #FFFFFF; letter-spacing: 2px; font-size: 18px ; text-shadow: #000000 0px 0px 4px;">
        <a href="http://reve-inverness.forumactif.com/t14-devenir-amis">VOUS ?</a>
        </span> | 
        <br />
        <span style="letter-spacing: 1px;text-shadow: #471F1B 0px 0px 3px;font-family: Marcellus SC;font-size: 18px;color:#FFFFFF">
        Topsites : </span>
        <a href="http://www.root-top.com/topsite/ed/in.php?ID=1028" target="_blank">
        <img src="http://hitskin.com/themes/13/75/50/i_icon_minipost_participate.png" alt="" /></a>
        <a href="http://en.root-top.com/toplist/velusia/in.php?ID=5142" target="_blank">
        <img src="http://hitskin.com/themes/13/75/50/i_icon_minipost_participate.png" alt="" /></a>
        <a href="http://www.root-top.com/topsite/filetdudiable/in.php?ID=349" target="_blank">
        <img src="http://hitskin.com/themes/13/75/50/i_icon_minipost_participate.png" alt="" /></a>
        </td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <br />  <br />
    </tr>
</table>
</div>
<img src="http://img15.hostingpics.net/pics/674682bott.png" />

Si je ne conserve que la structure ça me donne :
Code:
<div style="width:937px;background-color:#D6DDE3;" />
<div id="mes_onglets" style="padding:10px; margin-bottom:-2px;" align="center">
    ...
</div>
<table align="center">
    <tr>
        <td style="padding:10px;width:150px;height:300px;" align="center">
            ...
        </td>
        <td style="width:787px;height:350px;overflow:auto;">
            <div class="clear">
                <div id="mes_contenus">
                    <div id="co_1" class="mon_contenu" style="height:350px;overflow:auto;">
                        <div align="center">...</div><br />
                        <div align="right">...</div>
                        <div style="border-left:solid 3px white; border-right:solid 3px white; margin-left: 25px; margin-right: 25px;background-image: url('http://img15.hostingpics.net/pics/757220histoirefond.png');background-repeat: repeat;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;-goog-ms-border-radius: 5px;border-radius: 5px; padding:20px;font-size:12px;" align="justify">
                            ...
                            <div align="right">
                                ...
                            </div>
                        </div>
                    </div>
                    <div id="co_2" class="mon_contenu" style="display: none;height:350px;overflow:auto;">
                        <div align="center">
                            ...
                            <table align="center">
                                <tr>
                                    <td style="padding-right:5px;">
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                ...
                                            </div>
                                            <div class="descriptionstaff">                           
                                                ...
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding-right:5px;">
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                ...
                                            </div>
                                            <div class="descriptionstaff">                           
                                                ...                                                       
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding-right:5px;">
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                ...                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                ...
                                                <span style="font-size:10px;" />...                                                       
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                ...                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                ...
                                                <span style="font-size:10px;">...
                                                </span>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <br /> <br /> <br />
                            <div align="center" class="vignettes">
                              ...
                            </div>
                        </div>
                        <div id="co_3" class="mon_contenu" style="display: none; height:350px; overflow:auto;">
                            <table align="center">
                                <tr>
                                    <td style="padding-right:5px;">
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                ...
                                            </div>
                                            <div class="descriptionstaff">
                                                ...
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div id="cadrestaff">
                                            <div class="staffcach">
                                                ...                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                ...
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
        </td>
        <table>
        <tr>
        <td>
            ...
        </td>
        <td style="width:700px;background-color:#D6DDE3;padding:10px;margin-left:25px;" align="left">
          ...
        <table>
        <tr>
        <td>
        <div class="cssactif_tableaupartenaire" style="margin-left:20px;">
            ...
        </div>
        </td>
        <td align="center">
          ...
        </td>
        </tr>
        </table>
        </td>
        </tr>
        </table>
        <br />  <br />
    </tr>
</table>
</div>

Bref, c'est assez éloquent. En survolant je vois déjà :
  • <div style="width:937px;background-color:#D6DDE3;" /> gné Sous le choc (j'ai vu un <span> dans le même genre)
  • Des <span> non fermées
  • Des identifiants répétés à gogo (<div id="cadrestaff"> par exemple)
  • Du CSS tout plein dans ton HTML qui le rend fichtrement illisible (alors que tu as des classes pour ça didiou Evil or Very Mad )
  • Des align="justify" et autres du même genre dans tes <div> : c'est class="justify" qu'il faut utiliser (align c'est pour les éléments de type "cellule")


Brefouille, pas mal de trucs à corriger donc. D'autant que si tu rajoute une balise fermante de trop ça risque d'interférer avec le code de ton forum et de te faire de mauvaises surprises (d'où probablement tes soucis d'affichage).

Notamment, je crois voir un tableau qui est créé dans une cellule... sauf que la cellule n'est pas créée :
Code:
        </div>
    </div>
</td>
<table>
    <tr>
        <td>
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptyLun 21 Jan 2013, 08:32
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



[Résolu] Organisation par Onglets Empty
Bonsoir !

Le problème est-il résolu ? As-tu vu la réponse d'Espeon ?
Si d'ici quatre jours nous n'avons toujours pas de nouvelles, le sujet sera considéré comme résolu et archivé.

Merci de ta compréhension !
Bonne soirée. [Résolu] Organisation par Onglets 90719
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptyVen 25 Jan 2013, 15:36
Revenir en haut Aller en bas
http://reve-inverness.forumactif.com/
Abysse Yclette
Abysse Yclette
{ Membre }
{ Membre }

Féminin Messages : 152



[Résolu] Organisation par Onglets Empty
Bonjour !

Excusez-moi pour le temps de réponse. Je ne suis malheureusement pas disponible pendant la semaine. J'ai d'une part beaucoup de travail (vive la classe prépa o/) et aucune connexion internet digne de ce nom. Je ne peux donc que répondre le week end. Bref, j'ai travaillé sur le code avec les conseils d'Espeon. Tout semble marcher pour le mieux même s'il doit rester encore une ou deux erreurs dans la structure même. En attendant, j'ai le résultat attendu.

Merci beaucoup, vraiment, Espeon. Et merci à Christa' aussi pour son intervention sur les balises orphelines. C'est un travail long et pénible et vous m'avez beaucoup aidée (et j'ai appris beaucoup de choses, par la même).

Voici mon code final si tu veux y jeter un coup d'oeil :
Code:
<img src="http://img15.hostingpics.net/pics/906585toppetit.png" align="center" />
<div style="width:937px;background-color:#D6DDE3;">
<div id="mes_onglets" class="center">
    <span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Introduction </span> †
    <span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Personnages </span> †
    <span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff et Crédits</span>
    <img src="http://img11.hostingpics.net/pics/625457separation.png" border="0" alt="" /><br />
</div>
<table align="center">
    <tr>
        <td id="lien_onglet" align="center">
            <a href="http://reve-inverness.forumactif.com/t2-reglement-du-forum" class="postlink">
            <img src="http://img15.hostingpics.net/pics/304418boncontexte.png" border="0" alt="Reglement" /></a><br />
            <a href="http://reve-inverness.forumactif.com/t74-lexique-quesaquo" class="postlink">
            <img src="http://img15.hostingpics.net/pics/670216bonlexique.png" border="0" alt="Lexique" /></a><br />
            <a href="http://reve-inverness.forumactif.com/f14-questions-propositions" class="postlink">
            <img src="http://img15.hostingpics.net/pics/862229bonquest.png" border="0" alt="Questions" /></a>   
        </td>
        <td id="contenu_onglet">
            <div class="clear">
                <div id="mes_contenus">
                    <div id="co_1" class="mon_contenu">                       
                            <span class="jolititre">
                            Bienvenue dans les Rêves d'Inverness</span><br />
                            <span style="color:#949494;"><i>Forum Roleplay fantastique - Rp libre sans contrainte de lignes.</i> </span><br />                       
                        <br />
                        <div class="right"><img src="http://img15.hostingpics.net/pics/964037histoirebon.png" style="margin-bottom:-15px;padding-right:15px;" /></div>
                        <div id="resum_histoir" class="justify">
                            Vous venez de pénétrer dans les Rêves d’Inverness. Enfant malade et misanthrope, vivant reclu, il s’est construit une réalité toute autre en s’évadant dans le monde des rêves. Débordant d’imagination, l’enfant finit par écrire ses inventions dans un carnet tenu secret. A sa mort, le carnet ne fut jamais retrouvé. Sombrant dans un sommeil éternel, l’enfant donna vie à ses rêves.
                            <br /><br />
                            Ainsi est né l’univers d’Inverness. On raconte qu’à sa mort, son âme s’est fragmentée, éparpillée à travers le Royaume. La légende veut que celui qui réunira les Fragments d’âme devienne alors le nouveau Maître du Royaume. Cependant, nombreux sont ceux qui ont disparus à la recherche de ces Fragments.
                            <br/ ><br/ >
                            Plongez dans un univers complexe et mystérieux où magies et  conspirations s'entremêlent. Vous, rêveur tout juste embarqué dans ce monde, saurez-vous y forger votre légende et retrouver les Fragments ?
                            <br/ ><br/ >
                            <div class="right">Contexte librement inspiré de l'univers de Dune de F.Herbert † <a href="http://reve-inverness.forumactif.com/t1-l-histoire-d-inverness-contexte" class="postlink">En savoir plus ?</a>
                            </div>
                        </div>
                    </div>         
                    <div id="co_2" class="mon_contenu" style="display: none;">
                        <div class="center">
                            <a href="http://reve-inverness.forumactif.com/f7-predefinis" alt="les prédéfinis" class="postlink" target="_blank" rel="nofollow">
                            <img src="http://img4.hostingpics.net/pics/660290predefpres.png" alt="Les Prédéfinis" border="0" /> </a> 
                        </div>
                            <br />
                            <br />
                            <table align="center">
                                <tr>                         
                                    <td style="padding-right:5px;">
                                      <div class="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img15.hostingpics.net/pics/823945aurahv.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                                <a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#7" class="groupe4" target="_blank">
                                                Aurah</a></span>
                                                <br/ ><br/ >
                                                  <span style="font-size:10px;"><strong>Espionne d'Inverness</strong></span>
                                                <br/ >
                                                  <span style="font-size:10px;">Rêveuse</span>                                       
                                                <br/ >                                                                                             
                                            </div>
                                      </div>
                                    </td>
                                                 
                                    <td style="padding-right:5px;">
                                      <div class="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img11.hostingpics.net/pics/396981marekpetit.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                                <a href="http://reve-inverness.forumactif.com/t49-ordres-predefinis#126" class="groupe3" target="_blank">
                                                Marek</a></span>
                                                <br/ ><br/ >
                                                  <span style="font-size:10px;"><strong>Maître Lame</strong></span>
                                                <br/ >
                                                  <span style="font-size:10px;">Originaire</span> 
                                                <br/ >                                                       
                                            </div>
                                      </div>
                                    </td>
                                                 
                                    <td style="padding-right:5px;">
                                      <div class="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img11.hostingpics.net/pics/424367silvir.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;">
                                                <a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#125" class="groupe5" target="_blank">
                                                Sylvir</a></span>
                                                <br/ ><br/ >
                                                  <span style="font-size:10px;"><strong>Comtesse Norn</strong></span>
                                                <br/ >
                                                  <span style="font-size:10px;">Originaire</span>
                                                <br/ >                                                       
                                            </div>
                                      </div>
                                    </td>
                                    <td>
                                      <div class="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img11.hostingpics.net/pics/532821teg.png" />                         
                                            </div>
                                            <div class="descriptionstaff">                           
                                                <br/ >                             
                                                <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/t5-maisons-nobles-predefinis#7" class="groupe4" target="_blank">
                                                Miles Teg
                                                </a></span><br/ ><br/ >
                                                <span style="font-size:10px;"><strong>Général Sardaukar</strong></span>
                                                <br/ >
                                                <span style="font-size:10px;">Originaire</span>
                                                <br/ >                                               
                                        </div>
                                      </div>
                                    </td>
                                </tr>
                            </table>
                            <br />
                            <br />
                            <br />
                            <div class="center">
                              <div class="vignettes"> Nous recherchons activement des <a href="http://reve-inverness.forumactif.com/t79-les-ordres#313" class="groupe3" target="_blank">Lames</a> et des <a href="http://reve-inverness.forumactif.com/t79-les-ordres#314" class="groupe2" target="_blank">Bene Gesserit</a>.
                                <br />
                                Par ailleurs, nous avons encore un grand nombre de rôles importants libres.
                                <br />
                                <a href="http://reve-inverness.forumactif.com/t4-roles-predefinis" alt="les rôles prédéfinis" class="postlink" target="_blank" rel="nofollow">Voir les Rôles Prédéfinis</a>.                                     
                              </div>
                            </div>
                        </div>
                                       
                                         
                        <div id="co_3" class="mon_contenu" style="display: none;">
                          <div class="center"><span class="jolititre">Le Staff</span> ~ <span style="font-family:Marcellus SC; font-size:14px;" ><a href="http://reve-inverness.forumactif.com/t21-les-membres-du-staff" class="postlink" target="_blank" rel="nofollow">Tout Savoir</a></span></div>
                          <br/ >
                          <table align="center">
                                <tr>
                                    <td style="padding-right:5px;">
                                        <div class="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://r29.imgfast.net/users/2915/62/48/82/avatars/10902-27.jpg" />
                                            </div>
                                            <div class="descriptionstaff">
                                                <br />
                                              <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/u1" class="groupe4" target="_blank">INVERNESS</a></span>
                                                <br />
                                                Fondateur
                                                <br /><br />
                                                <a href="http://reve-inverness.forumactif.com/privmsg?mode=post&u=1" class="postlink" target="_blank" rel="nofollow">
                                                MP</a>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="padding-right:5px;">
                                        <div class="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img15.hostingpics.net/pics/674144plumepetit.png" />
                                            </div>
                                            <div class="descriptionstaff">
                                                <br />
                                              <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/u9" class="groupe6" target="_blank">PLUME</a></span>
                                                <br />
                                                Admine
                                                <br /><br />
                                                <a href="http://reve-inverness.forumactif.com/privmsg?mode=post&u=9" class="postlink" target="_blank" rel="nofollow">
                                                MP</a>
                                            </div>
                                        </div>
                                    </td>
                                  <td style="padding-right:5px;">
                                        <div class="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img15.hostingpics.net/pics/666904aliapetit.png" />
                                            </div>
                                            <div class="descriptionstaff">
                                                <br />
                                              <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/u5" class="groupe2" target="_blank">Alia</a></span>
                                                <br />
                                                Graphiste
                                                <br /><br />
                                                <a href="http://reve-inverness.forumactif.com/privmsg?mode=post&u=5" class="postlink" target="_blank" rel="nofollow">
                                                MP</a>
                                            </div>
                                        </div>
                                    </td>
                                  <td style="padding-right:5px;">
                                        <div class="cadrestaff">
                                            <div class="staffcach">
                                                <img src="http://img15.hostingpics.net/pics/485876muadib.png" />
                                            </div>
                                            <div class="descriptionstaff">
                                                <br />
                                              <span style="font-family:Marcellus SC;font-size:16px;letter-spacing:1px;"><a href="http://reve-inverness.forumactif.com/u8" class="groupe7" target="_blank">Muad'dib</a></span>
                                                <br />
                                                Modérateur
                                                <br /><br />
                                                <a href="http://reve-inverness.forumactif.com/privmsg?mode=post&u=8" class="postlink" target="_blank" rel="nofollow">
                                                MP</a>
                                            </div>
                                        </div>
                                    </td>
                                  </tr>
                            </table>
                          <br />
                          <br />
                          <div class="center">
                            <div class="vignettes"> Le contexte et le design est l'oeuvre d'<a href="http://reve-inverness.forumactif.com/u5" class="groupe2" target="_blank">Alia</a>. L'intégralité du forum appartient à ses membres.
                              <br />
                              Toute reproduction, même partielle, est prohibée. Tous droits réservés. <a href="http://reve-inverness.forumactif.com/t48-credits-design-du-forum" target="_blank">Voir les Crédits</a>.
                              <br /> <br />
                              Le forum est optimisé pour une navigation sous Chrome, Firefox, Opéra et Safari. <br />
                              Nous ne garantissons pas la qualité d'affichage sous Internet Explorer.
                              </div>
                            </div>
                        </div>
                      </div>
                    </div>                 
                  </td>
                </tr>
              </table>                     
</div>                                         
<img src="http://img15.hostingpics.net/pics/674682bott.png" />
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptySam 26 Jan 2013, 07:09
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



[Résolu] Organisation par Onglets Empty
Abysse Yclette a écrit:
Excusez-moi pour le temps de réponse. Je ne suis malheureusement pas disponible pendant la semaine. J'ai d'une part beaucoup de travail (vive la classe prépa o/) et aucune connexion internet digne de ce nom.

Oh je sais ce que c'est la prépa, pas de soucis t'en fais pas (et bon courage, à terme ça vaut le coup et on regrette pas) Wink

Abysse Yclette a écrit:
Tout semble marcher pour le mieux même s'il doit rester encore une ou deux erreurs dans la structure même. En attendant, j'ai le résultat attendu.

Merci beaucoup, vraiment, Espeon. Et merci à Christa' aussi pour son intervention sur les balises orphelines. C'est un travail long et pénible et vous m'avez beaucoup aidée (et j'ai appris beaucoup de choses, par la même).

Pas de soucis, content qu'on ait pu résoudre ton soucis Wink

En survolant ton code je n'ai pas vu de problème particulier, il est beaucoup mieux et plus clair dans l'ensemble donc ça a porté ses fruits !

Je t'invite à indiquer dans le titre du sujet que ce dernier est résolu si c'est le cas.
Bon courage pour la suite encore Smile
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptySam 26 Jan 2013, 11:05
Revenir en haut Aller en bas
http://reve-inverness.forumactif.com/
Abysse Yclette
Abysse Yclette
{ Membre }
{ Membre }

Féminin Messages : 152



[Résolu] Organisation par Onglets Empty
Merci beaucoup What a Face
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptySam 26 Jan 2013, 15:27
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



[Résolu] Organisation par Onglets Empty
Bonsoir !

J'archive vu le que le sujet est résolu. Smile
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets EmptySam 26 Jan 2013, 17:41
Revenir en haut Aller en bas
Contenu sponsorisé




[Résolu] Organisation par Onglets Empty
MessageSujet: Re: [Résolu] Organisation par Onglets   [Résolu] Organisation par Onglets Empty
Revenir en haut Aller en bas
 

[Résolu] Organisation par Onglets

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» [Résolu] Organisation par Onglets - Effet de transition
» Les onglets, encore eux [RÉSOLU]
» Organisation par onglets.
» [Résolu]Aide Qeel en onglets
» [résolu] Profil en onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit