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

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

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

Message par Wiver Blades le Mer 27 Avr 2011 - 13:34

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.



Dernière édition par Wiver Blades le Mer 27 Avr 2011 - 18:44, édité 1 fois

Wiver Blades
Nouveau membre

Masculin
Messages : 20
Inscrit(e) le : 26/04/2011

http://hikutsutainushi.forumperso.com/
Wiver Blades a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil problème onglet/defilement des contenus

Message par Invité le Mer 27 Avr 2011 - 17:05

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.

Invité
Invité


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

Résolu Re: Page d'accueil problème onglet/defilement des contenus

Message par Wiver Blades le Mer 27 Avr 2011 - 18:43

Merci Beaucoup =]

Wiver Blades
Nouveau membre

Masculin
Messages : 20
Inscrit(e) le : 26/04/2011

http://hikutsutainushi.forumperso.com/
Wiver Blades a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum