Probleme de texte dans un onglet

[Moagi-misaki]

Bonjour,
Hier j'ai instauré une présentation avec onglet sur mon forum, ici , tout allait bien avec le texte jusqu'à ce que j'y mette une image. Comme démontrer, le texte sort de l'onglet et depuis que l'image est mis, ou le texte, je ne peut plus changer d'onglet, si je clique sur un onglet différent sa ne fait rien, c'est reste au premier onglet.

Voici le code avec tout le texte et l'image

Code:


<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" #nclick="changeOnglet#this#;">Contexte</li>
        <li id="o_2" class="mon_onglet" #nclick="changeOnglet#this#;">Important</li>
        <li id="o_3" class="mon_onglet" #nclick="changeOnglet#this#;">Staff / Règlement</li>
        <li id="o_4" class="mon_onglet" #nclick="changeOnglet#this#;">Membre / Partenariat</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><p align="justify">
<center><img src="http://img94.imageshack.us/img94/2986/contexte01.jpg" /></center>
<br>
<br>
Mecania Academy ouvrit ses portes pour la première fois  en octobre 1961 alors que l’on prévoyait déjà une troisième guerre mondiale pour les années 2000 Cependant, alors que la planète sortait arme et artillerie, un traité  fut signé par tout les représentants des états qui ne se voyaient pas déjà anéantis par la guerre précédente : Le traiter Mecania. Il stipulait, rouge sang sur blanc que la guère cesserait pendant cent ans, le temps que les villes se reconstruisent et que la paix revienne# Pour stimuler le tout, plusieurs choses changèrent : une union scientifique vit le jour et créa les Banges</p>
<br>
<br>
<p align="justify">Les Banges étaient des robots sofistiqués pouvant être contrôlés manuellements et automatiquements. Ils facilitaient ainsi la vie des gens et procuraient un meilleur randement économiques aux états. Mais, toute bonne chose en amenant une autre, un mécanicien en alliance avec quelques scientifiques créa des Banges de guerre et c’est là que, 135 années plus tard, nous apparaissons, nous , Les Bangers !</p>
<br>
<br>
<p align="justify">Les machines ne guerre ne pouvaient être contrôlées que par l’homme et après l’apparition des Bangers – ceux qui contrôle cette artillerie scientifique et lourde en savoir et malfaisance – l’ère de la mécanique fit son chemin. Les avancés technologiques au niveau de l’armement créa des tensions dans plusieurs pays et pour le bien de l’humanité on choisit de rouvrir la Mecania Academy, une armée secrète veillant sur le bien de l’humanité. Ils divisèrent une seconde fois les étudiants en trois groupes distincts : Les AirBangers, les MarineBangers et les EartBangers. Chacun avait sa spécialité à s’avoir, le ciel, la mer et la terre.</p>
<br>
<br>
<p align="justify">Aujourd’hui, la Mecania Academy regroupe des jeunes gens de partout à travers le monde qui possède des capacités spéciales, voir innimaginables.</p>
</p>
</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>



[Invité]

Bonjour,

Vous avez des # qui se sont glissés un peu partout dans le code, c'est étrange.
Pour votre problème de texte qui dépasse j'ai essayé quelquechose:
j'ai placé une div qui justifie le texte, donne une hauteur maximale et ajoute une barre de défilement à coté du texte.
Votre code corrigé:

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Contexte</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Important</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Staff / Règlement</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Membre / Partenariat</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">
<center><img src="http://img94.imageshack.us/img94/2986/contexte01.jpg" /></center>
<br>
<br><div style="height: 200px; overflow-y: auto;text-align:justify;">Mecania Academy ouvrit ses portes pour la première fois  en octobre 1961 alors que l’on prévoyait déjà une troisième guerre mondiale pour les années 2000 Cependant, alors que la planète sortait arme et artillerie, un traité  fut signé par tout les représentants des états qui ne se voyaient pas déjà anéantis par la guerre précédente : Le traiter Mecania. Il stipulait, rouge sang sur blanc que la guère cesserait pendant cent ans, le temps que les villes se reconstruisent et que la paix revienne# Pour stimuler le tout, plusieurs choses changèrent : une union scientifique vit le jour et créa les Banges
<br>
<br>
Les Banges étaient des robots sofistiqués pouvant être contrôlés manuellements et automatiquements. Ils facilitaient ainsi la vie des gens et procuraient un meilleur randement économiques aux états. Mais, toute bonne chose en amenant une autre, un mécanicien en alliance avec quelques scientifiques créa des Banges de guerre et c’est là que, 135 années plus tard, nous apparaissons, nous , Les Bangers !
<br>
<br>
Les machines ne guerre ne pouvaient être contrôlées que par l’homme et après l’apparition des Bangers – ceux qui contrôle cette artillerie scientifique et lourde en savoir et malfaisance – l’ère de la mécanique fit son chemin. Les avancés technologiques au niveau de l’armement créa des tensions dans plusieurs pays et pour le bien de l’humanité on choisit de rouvrir la Mecania Academy, une armée secrète veillant sur le bien de l’humanité. Ils divisèrent une seconde fois les étudiants en trois groupes distincts : Les AirBangers, les MarineBangers et les EartBangers. Chacun avait sa spécialité à s’avoir, le ciel, la mer et la terre.
<br>
<br>
Aujourd’hui, la Mecania Academy regroupe des jeunes gens de partout à travers le monde qui possède des capacités spéciales, voir innimaginables.</div>
</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></ul></div>

Cordialement.

[Moagi-misaki]

Merci beaucoup Madame Isolde