Problème code page d'accueil avec des onglets

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

Résolu Problème code page d'accueil avec des onglets

Message par Sora65 le Mer 29 Juin 2011 - 15:46

Bonjour, je rencontre un problème avec ma page d'accueil qui a des onglets. En fait quand je clique sur "onglet2" par exemple rien ne change ça reste toujours avec le texte de l'onglet 1 Razz . Je comprends pourquoi ça me fait ça ...

Voici le code que j'ai mis dans ma page d'accueil :
Code:
<script src="http://eternal-star.forumactif.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>

Mon code css que j'ai dans la page css :
Code:
.mon_onglet{
  float: left;
  padding: 3px;
  margin-right: 1px;
  margin-bottom: -1px;
  color: #C6E1E5;
  background: #EFF4F7;
  border: 0px solid #ff0000;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  cursor: pointer;
  width: 200px;
  list-style: none;}
     
.mon_onglet_selected{
  float: left;
  padding: 3px;
  margin-right: 1px;
  margin-bottom: -1px;
  color: #C6E1E5;
  background:#EFF4F7;
  border-top: 0px solid #ff0000;
  border-right: 0px solid #ff0000;
  border-left: 0px solid #ff0000;
  border-bottom: none !important;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  cursor: pointer;
  width: 200px;
  list-style: none;}

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

.mon_contenu{
  color: #C6E1E5;
  background: #FFFFFF;
  border: 0px solid #ff0000;
  padding: 20px;
  list-style: none;}

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

Le code que j'ai mis dans la page html où j'ai coché non aux 2 questions :
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';
            }
        }
    }         
}

Voici l'adresse de mon forum test : http://eternal-star.forumactif.org/
Je précise que je me suis aidé du message de Isolde qui se trouve ici : http://forum.forumactif.com/t302694-page-daccueil-original?highlight=css+pour+page+d+acceuil . J'espere que j'ai le droit d'utiliser les codes ?

Je vous remercie d'avance. =)


Dernière édition par Sora65 le Mer 29 Juin 2011 - 17:21, édité 1 fois

Sora65
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 20/08/2010

http://sunasia.forumactif.com/
Sora65 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code page d'accueil avec des onglets

Message par Invité le Mer 29 Juin 2011 - 15:56

Bonjour,

Le problème vient d'internet explorer, je ne sais pas pourquoi, il n'accepte pas les scripts venant d'une page Html.
Remplacez:
Code:
<script src="http://eternal-star.forumactif.com/h1-htm"></script>
par:
Code:
<script src="http://sd-5.archive-host.com/membres/up/86411517957321821/onglet.js"></script>
J'ai hébergé le fichier en .js, et normalement , ça fonctionne sous IE9 aussi.

Cordialement.

Invité
Invité


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

Résolu Re: Problème code page d'accueil avec des onglets

Message par Sora65 le Mer 29 Juin 2011 - 16:02

Tout d'abord merci pour votre réponse. Je viens d'essayé et ça change pas Crying or Very sad . J'ai même essayé de voir sur chrome c'est pareil ça ne bouge pas.

Code:
Voici mon code :
<script src="http://sd-5.archive-host.com/membres/up/86411517957321821/onglet.js"></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>

Sora65
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 20/08/2010

http://sunasia.forumactif.com/
Sora65 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code page d'accueil avec des onglets

Message par Invité le Mer 29 Juin 2011 - 16:15

Effectivement, il a un soucis. lorsque je clique sur http://eternal-star.forumactif.org/ , j'ai le contenu de votre page Html qui s'affiche. J'accède au forum à cette adresse http://eternal-star.forumactif.org/forum . N'auriez vous pas mis "oui" à l'une des deux questions lors de la création de la page html? Non doit être coché pour les 2 questions.

J'ai effectivement remarqué que vos onglets ne fonctionnent pas, mais dans votre second code vous avez supprimé <div id="mes_onglets"> en même temps que le script contenant votre page Html Wink .
Essayez comme ceci:
Code:

<script src="http://sd-5.archive-host.com/membres/up/86411517957321821/onglet.js"></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>

Cordialement.

Invité
Invité


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

Résolu Re: Problème code page d'accueil avec des onglets

Message par Sora65 le Mer 29 Juin 2011 - 16:29

Merci ça marche sur eternal-star. J'ai par contre essayé de tester sur le forum où il doit vraiment y avoir cette page d'accueil et là ça ne marche pas ! J'ai pourtant fais pareil ...
Je suis vraiment pas douée ^_^

Code:
<script src="http://sd-5.archive-host.com/membres/up/86411517957321821/onglet.js"></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>


Sora65
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 20/08/2010

http://sunasia.forumactif.com/
Sora65 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code page d'accueil avec des onglets

Message par Invité le Mer 29 Juin 2011 - 16:33

Quel est le lien du second forum? il a peut-être un autre script qui fait conflit.

Cordialement.

Invité
Invité


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

Résolu Re: Problème code page d'accueil avec des onglets

Message par Sora65 le Mer 29 Juin 2011 - 16:35

Voici le lien : http://sunasia.forumactif.com/

Sora65
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 20/08/2010

http://sunasia.forumactif.com/
Sora65 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème code page d'accueil avec des onglets

Message par Invité le Mer 29 Juin 2011 - 16:36

Vous avez ajouté la partie CSS? J'ai l'impression qu'elle est manquante.

Cordialement.

Invité
Invité


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

Résolu Re: Problème code page d'accueil avec des onglets

Message par Sora65 le Mer 29 Juin 2011 - 16:38

Oui je l'ai ajouté , enfin je l'ai peut être mal placé vu que j'ai d'autres codes dans ma page css ?
Voici le code entier de ma page css
Code:
a{
text-decoration: none !important;
}
 
body {
background-repeat: no-repeat;
  background-position: none;
}

body
{background-position: top center;
}


.bodylinewidth {width:50%;}


function insertChatBoxNew(chatbox_id, chatbox_url)
{
document.getElementById(chatbox_id).innerHTML = '';
}
function cbac() { if(!window.fc.connected) window.fc.CB_disconnect(); }
jQuery(window).load(cbac);


.mon_onglet{
  float: left;
  padding: 3px;
  margin-right: 1px;
  margin-bottom: -1px;
  color: #C6E1E5;
  background: #EFF4F7;
  border: 0px solid #ff0000;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  cursor: pointer;
  width: 200px;
  list-style: none;}
     
.mon_onglet_selected{
  float: left;
  padding: 3px;
  margin-right: 1px;
  margin-bottom: -1px;
  color: #C6E1E5;
  background:#EFF4F7;
  border-top: 0px solid #ff0000;
  border-right: 0px solid #ff0000;
  border-left: 0px solid #ff0000;
  border-bottom: none !important;
  -moz-border-radius-topleft: 0px;
  -moz-border-radius-topright: 0px;
  -webkit-border-top-right-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  cursor: pointer;
  width: 200px;
  list-style: none;}

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

.mon_contenu{
  color: #C6E1E5;
  background: #FFFFFF;
  border: 0px solid #ff0000;
  padding: 20px;
  list-style: none;}

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

EDIT : Le problème venait bien du css j'ai inversé le sens de mes codes et ça marche !!!

Merci 1000 fois pour m'avoir aidé !

Off Topic

Sora65
Nouveau membre

Féminin
Messages : 17
Inscrit(e) le : 20/08/2010

http://sunasia.forumactif.com/
Sora65 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