Page d'accueil problème onglet/defilement des contenus

[Wiver Blades]

Bonjour/Bonsoir

J'ouvre ce topic dans l'espoir de trouver une solution à mon problème qui est le suivant.
J'ai suivis les conseils de forum actif ici même pour pouvoir avoir une page d'accueil originale ( un topic avait déjà été crée ).
Suivant à la lettre les indications les codages pour moi étaient tout à fais parfait mais mon principale soucis fut qu'une finalisée aucun onglets ne fonctionnais, je ne pouvais donc pas passé de l'onglet 1 à l'onglet 2 et ainsi de suite ne pouvant voir les contenus de ces onglets respectifs.

Voici donc le codage de la page d'accueil dans les " généralités ":

Code:

<script src="http://hikutsutainushi.forumperso.com/h1-htm"></script>
 <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Onglet 5</li>
        </ul>
        <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 id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
</div></div></div>

Voici le code Css qu'on retrouve dans la catégorie " couleurs ":

Code:

.mon_onglet{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 18%;
  list-style: none;}
   
.mon_onglet_selected{
  float: left;
  padding: 2px;
  margin-right: 4px;
  margin-bottom: -1px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: none !important;
  -moz-border-radius-topleft: 8px;
  -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  cursor: pointer;
  width: 18%;
  list-style: none;}

.mon_onglet:hover{
  background: #b8efa1;}
       
.clear{
  clear: both;}

.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  list-style: none;}

#mes_contenus, #mes_onglets{
  width: 100%;}

Enfin la dernière étape le code à mettre dans la page HTML j'ai bien fais attention à cocher les deux " non " comme on me l'avait demandé en créant la page HTML.

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }       
}

Cela me donne donc la forme de la page d'accueil mais rien ne fonctionne malheureusement si dessous le lien de mon forum ou vous pourrez vous même constatez le problème.Alors aurais je peut être fais une erreur dans la modification finale de la première ligne du codage de la page de généralités ? J'ai tout de même fais très attention à bien marqué le même numéro si dessous:

Code:

http://hikutsutainushi.forumperso.com/h1-htm

Lien de la page d'accueil du forum: http://hikutsutainushi.forumperso.com/

Merci d'avance à ceux qui pourrons m'aider à réglé ce problème.

[Invité]

Bonjour,

Le soucis se situe dans votre message d'accueil, tout est bon pour le reste, il ne manque qu'un petit bout de code au début:<div id="mes_onglets"> qui se place juste à la suite de</script>.

Code:

<script src="http://hikutsutainushi.forumperso.com/h1-htm"></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>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);">Onglet 5</li>
        </ul>
        <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 id="co_5" class="mon_contenu" style="display: none;">Mon contenu 5</div>
</div></div></div>

Cordialement.

[Wiver Blades]

Merci Beaucoup =]