Sujets similaires

Sujet: Quelques problèmes avec mon qeel Sam 03 Nov 2012, 09:22

Bonjouuuuur,
Je reviens toujours vers Cssactif pour résoudre mes ptits problèmes, donc merci d'avance à celui/celle qui m'aidera.

Mon problème concerne le qeel, je vous montre ce que j'ai :

1. Tout d'abord il y'a les infobulles qui ne marchent que lorsque l'onglet "Ils étaient là" est actif... Sinon les infobulles ne s'affichent pas. Comment faire en sorte que les infobulles s'affichent tout le temps ?

2. Je n'arrive pas à mettre les membres connectés les dernières 24h, quand je met la variable ça décale tout ! Pareil pour l'infobulle qui comporte les anniversaires; que vous pouvez voir en passant la souris sur la lanterne.

Voilà mes codes :

Css:

Java:

Merci d'avance Rolling Eyes

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 07:09

Et bien et bien et bien, je retrousse mes manches et je viens me pencher sur ton problème.

En fait, le gros problème de ton QEEL (ce qui est le cas de 90% des codes d'ailleurs), c'est qu'il est quasiment illisible.
Sérieusement, comment veux-tu pouvoir trouver d'où viennent les problèmes (et les résoudre) dans un tel fouilli de code spaghetti ?

C'est assez simple à voir, il suffit de se poser ces simples question :

Est-ce-que j'arrive à voir clairement la structure de mon code (quel élément est dans lequel) ?
Est-ce-que mon CSS se trouve bien dans un fichier CSS ?
Est-ce-que mon JS se trouve bien dans un fichier JS ?
Est-ce-que mon code HTML ne contient QUE du HTML ?

Il est clair que non car, pour le moment, tu as du Javascript, du CSS et du HTML mélangé dans ton template (style="pleins de propriétés CSS" est à bannir par exemple). Et enfin, le code n'est pas assez clairement indenté pour qu'on puisse s'y repérer, et tu risque donc de faire plus facilement des erreurs (il y en a une d'ailleurs Wink

).

On va donc, dans un premier temps et si tu le veux bien, nettoyer ton code pour avoir quelque chose de propre/pro sur lequel on pourra travailler.
Et on va se répartir la tâche : je m'occupe de la partie Javascript (il faut des connaissances donc je te l'accorde et te donne la réponse directement) ainsi que de l'indentation du code pour te montrer.

Ensuite, tu t'occupera du CSS et de corriger les erreurs qu'on aura soulevé.
Enfin, la solution à ton problème apparaîtra de manière évidente !

Espeon - Séparer le JS du HTML

Il faut que tu bannisse tous les codes Javascript inclus directement dans ton template.

Une raison simple à cela est que si tu dois venir modifier un script dans 1 an, ou que quelqu'un d'autre doit le faire, bon courage pour le retrouver s'il est perdu dans un template quelconque (et bonne chance pour ne pas faire d'erreur en risquant de modifier le template autour par mégarde).

Pour cela, FA a créé une partie où on peut mettre son Javascript (tout comme le CSS) :

Va dans Panneau d'Administration > Modules > Gestion des codes javascript. Ici tu pourra créer une nouvelle feuille de code.
Nomme-la qeel par exemple (c'est plus parlant et intuitif) et veille bien à la mettre sur les pages nécessaires où apparaît ton QEEL (index du forum ou toutes les pages selon, à toi de voir).

Ensuite, ce qu'il faut savoir, c'est que FA charge une librairie que l'on appelle jQuery. En fait, retiens juste qu'elle met à ta disposition un certain nombre de fonctions qui permettent de coder plus vite et plus simplement. document.getElementById() devient $() par exemple, ...

Donc, copie-colle le code JS suivant dans ta feuille :

Code:: function change_onglet(name) {
$('#onglet_' + anc_onglet).className = 'onglet_0 onglet';
$('#onglet_' + name).className = 'onglet_1 onglet';
$('#contenu_onglet_' + anc_onglet).css('display','none');
$('#contenu_onglet_' + name).css('display','block');
anc_onglet = name;
}

// Traitement texte #delf
var texte = $('#delf').html();
texte = texte.replace(/Nos membres ont posté un total de/, "Nos grapheurs ont envoyé");
texte = texte.replace(/messages/, "commentaires.");
texte = texte.replace(/Nous avons/, "Dans cette charmante communauté graphique, nous avons au total,");
texte = texte.replace(/membres enregistrés/, "grapheurs.");
texte = texte.replace(/L'utilisateur enregistré le plus récent est/, "La dernière personne qui a franchi notre portail est :");
$('#delf').html(texte);

// Traitement texte #delf2
var texte = $('#delf2').html();
texte = texte.replace(/utilisateur/, "grapheur");
texte = texte.replace(/Enregistré/, "graph perlien");
texte = texte.replace(/Invisible et/, "espion,");
texte = texte.replace(/Invisibles et/, "espions,");
texte = texte.replace(/Invité/, "anonyme");
$('#delf2').html(texte);

// Traitement de texte #connecte
var texte = $('#connecte').html();
text = texte.replace(/Utilisateurs enregistrés/, "Grapheurs enregistrés ");
$('#connecte').html(texte);

Partant de là, je supprime donc tous les scripts inutiles du template, ça va alléger la lecture.

Tu notera que je n'ai pas encore modifié la fonction change_onglet(). On risque probablement de le faire après car je trouve qu'elle est bien compliquée/mal faîte pour son rôle. Mais nous verrons cela à la fin, pour l'instant nous ne faisons que remettre en forme ton code.

Espeon - Indentation du HTML

En retirant donc le javascript désormais inutile, puis en indentant correctement le code, voici ce à quoi doit ressembler ton nouveau QEEL :

Code:: 
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
   <td>
      <div style="z-index: 0; position:relative; width:700px; height:560px; margin: auto; background-image: url(http://img11.hostingpics.net/pics/500819qeel22.png);">
         <span class="onglet_0 onglet" id="onglet_onglet1" onclick="javascript:change_onglet('onglet1');">
            <div class="qeel-now">
               <img src="http://imagesup.org/images10/1342194591-now.gif"/>
            </div>
         </span>

      <div class="qeel-stat">
         <div style="overflow: auto; width: auto; height: 80px; padding: 2px;">
            <span id="delf">Bienvenue sur Graph Perle ! Vous êtes passionné de graphisme ? Vous cherchez des tutos ? C'est par ici ! {TOTAL_POSTS} {TOTAL_USERS} {NEWEST_USER}. Nous lui souhaitons tous la bienvenue !</span>
         </div>
      </div>

      <div class="contenu_onglet" id="contenu_onglet_onglet1">
         <div class="qeel-co">
            <div style="overflow: auto; width: auto; height: 86px; padding: 2px;">
               <span id="delf2">{TOTAL_USERS_ONLINE}.</span>
               <div class="qeel-cosépa"></div>
               <span id="connecte">{LOGGED_IN_USER_LIST}</span>
            </div>
         </div>
      </div>

      <div style="background-color:none;">
         <span class="onglet_0 onglet" id="onglet_onglet2" onclick="javascript:change_onglet('onglet2');">
            <div class="qeel-before">
               <img src="http://imagesup.org/images10/1342194791-before.gif"/>
            </div>
         </span>
      </div>

      <div class="contenu_onglet2" id="contenu_onglet_onglet2" display="none">
         <div class="qeel-co">
            <div style="overflow: auto; width: auto; height: 86px; padding: 2px;">24heures</div>
         </div>
         <div style="left: 87px; top: 121px; width: 229px; height: 149px; position: absolute;">
         <table margin="0" border="0" cellspacing="0">
            <tr>
               <td>
                  <div style="margin-left: 10px; margin-top: 32px;">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                           <img src="http://imagesup.org/images10/1342170582-bl.png"/>
                        </a>
                        <span class="qeel-bulle">
                           <span class="nom-bulle" style="color: #cecece; text-shadow: #cecece 0px 0px 2px;">
                              <div align="center">Débutant</div>
                           </span>
                           <div class="qeel-cosépa"></div>
                           Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis.
                        </span>
                     </div>
                  </div>
               </td>
               <td>
                  <div style="margin-left: 10px; margin-top: 32px;">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                           <img src="http://imagesup.org/images10/1342181464-br.png"/>
                        </a>

                        <span class="qeel-bulle">
                           <span class="nom-bulle" style="color: #cecece; text-shadow: #cecece 0px 0px 2px;">
                              <div align="center">Futur Grapheur</div>
                           </span>
                           <div class="qeel-cosépa"></div>
                           Maîtrise des bases. Fond, inscrutation et écritures bien réalisées,
mais pouvant êtreamélioré.
                        </span>
                     </div>
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div style="margin-left: 10px; margin-top: 10px;">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                           <img src="http://imagesup.org/images10/1342170582-bl.png"/>
                        </a>

                        <span class="qeel-bulle">
                           <span class="nom-bulle" style="color: #cecece; text-shadow: #cecece 0px 0px 2px;">
                              <div align="center">Futur Apprenti</div>
                           </span>
                           <div class="qeel-cosépa"></div>
                           Des bases manquant de travail, aucun approfondissement et pas de finitions.
                        </span>
                     </div>
                  </div>
               </td>
               <td>
                  <div style="margin-left: 10px; margin-top: 10px;">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                           <img src="http://imagesup.org/images10/1342181464-br.png"/>
                        </a>

                        <span class="qeel-bulle">
                           <span class="nom-bulle" style="color: #cecece; text-shadow: #cecece 0px 0px 2px;">
                           <div align="center">Grapheur</div>
                        </span>
                        <div class="qeel-cosépa"></div>
                        Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions.
                        </span>
                     </div>
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div style="margin-left: 10px; margin-top: 10px;">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                           <img src="http://imagesup.org/images10/1342170582-bl.png"/>
                        </a>

                        <span class="qeel-bulle">
                           <span class="nom-bulle" style="color: #cecece; text-shadow: #cecece 0px 0px 2px;">
                           <div align="center">Apprenti</div>
                        </span>
                        <div class="qeel-cosépa"></div>
                        Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades.
                        </span>
                     </div>
                  </div>
               </td>
               <td>
                  <div style="margin-left: 10px; margin-top: 10px;">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                           <img src="http://imagesup.org/images10/1342181464-br.png"/>
                        </a>

                        <span class="qeel-bulle">
                           <span class="nom-bulle" style="color: #cecece; text-shadow: #cecece 0px 0px 2px;">
                           <div align="center">Professionnel</div>
                        </span>
                        <div class="qeel-cosépa"></div>
                        Perfection (Incrustation, Typographie, Finitions, Originalité, Travail
...)
                        </span>
                     </div>
                  </div>
               </td>
            </tr>
         </table>
      </div>
      <div style="left: 465px; top: 286px; width: 208px; height: 199px; position: absolute;">
         <div style="margin-left: 40px; margin-top: 45;">
            <div class="qeel-infobulle2">
               <img src="http://imagesup.org/images10/1342184550-qeel-transpa.png" />
               <span class="qeel-bulle2"> Anniversaires ! <br/><br/><br/><br/></span>
            </div>
         </div>
      </div>
   
   <tr>
      <td class="row1" colspan="2">
         <span class="gensmall"><br />
            <div style="text-align:center;">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}</div>
         </span>

      </td>
   </tr>

Vérifie à présent que le rendu soit le même.
Si tu as un problème à ce stade là, signale-le moi. Sinon, poursuivons...

Xibition - Séparer le CSS du HTML

C'est à toi de jouer.

Si tu regarde bien, tu utilise à de nombreux endroits des style="..." dans ton HTML. Il faut les enlever.

Remplace les par un class="classe_de_ton_choix" et stylise ces classes dans ton CSS ainsi :

Code:: .classe_de_ton_choix {
...
}

Tu remarquera donc qu'en faisant cela, tu va simplifier ton HTML car il y a beaucoup d'éléments qui ont le même style -> ils auront la même classe. La grosse différence notable, c'est que si tu veux changer le style de ces éléments, tu n'aura qu'à changer la propriété de la classe plutôt que de te taper tous les éléments dans le template.

Et enfin, on va pouvoir y voir plus clair (parce-qu'actuellement, ça prend pas mal de place et on a du mal à distinguer la structure).

Enfin, comme je t'en avais parlé, tu devrais pouvoir repérer qu'il y a un problème dans la structure HTML de ton tableau (une balise qui s'ouvre et ne se ferme pas, qui te crée donc potentiellement des soucis de structure, voire de design).

Je t'en dis pas plus pour le moment, je te laisse faire les modifications que je t'ai indiqué et me donner ta nouvelle structure nettoyée de tout ce CSS (avec le CSS correspondant).
N'hésites pas si tu as un soucis pour faire ça, je reste à disposition Wink

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 08:21

Bonjour Espeon, déjà merci beaucoup de te pencher sur mon énorme problème. Mes codes sont toujours pourris, donc je ne suis pas choquée de savoir qu'il est illisible, et un nettoyage me ferait vraiment trop plaisir !

Bref, c'est vraiment très sympa de ta part de me corriger le JS, je n'y comprend absolument rien du tout (ce que vous avez remarqué) Donc merci de m'avoir fourni le code Rolling Eyes

Pour ce qui est du html, je sais très bien qu'il ne faut pas mélanger CSS et HTML... mais je le fais quand même x) D'ailleurs je ne sais pas pourquoi c'est vrai que c'est plus compliqué et plus bazar. Donc voilà mon nouveau css :

Code:: /*===== QUI EST EN LIGNE (new) =========*/
.onglet
{
cursor:pointer;
background-color: none;
}

.onglet_0
{
background-color: none;
}

.onglet_1
{
background-color: none;
}

.contenu_onglet
{
background-color: none;

}

.contenu_onglet2 { display:none ;background-color: none;}

.qeel-before {
position: absolute;
left: 582px;
top: 154px;
background-color:none;
width: 68px;
height: 35px;
}

.qeel_connect .row1 {
background-color:transparent;
line-height:100%;
font-family:arial;
font-size:7pt;}

.qeel-now {
width: 60px;
height: 41px;
position: absolute;
left: 571px;
background-color:none;
top: 106px;
}

.qeel-stat {
left: 81px;
top: 321px;
width: 353px;
height: 80px;
font-size: 7pt;

font-family: arial;
text-align: justify;
z-index:2;
position: absolute;
}

.nom-bulle {
font-family: time new roman;
text-transform: uppercase;
font-size:15px;
text-align:center;
letter-spacing: 2px;
}

.qeel-co {
left: 352px;
top: 165px;
width: 176px;
height: 86px;
font-size: 7pt;
font-family: arial;
text-align: justify;
z-index:2;
position: absolute;
}

.qeel-cosépa {
border-bottom: #622b2b 4px dotted;
width: auto;
margin-top: 3px;
margin-bottom: 3px;
}

.fondqeel{z-index: 0; position:relative; width:700px; height:560px; margin: auto; background-image: url(http://img11.hostingpics.net/pics/500819qeel22.png);}

.part1{overflow: auto; width: auto; height: 80px; padding: 2px;}
.part2{overflow: auto; width: auto; height: 86px; padding: 2px;}
.part3{left: 87px; top: 121px; width: 229px; height: 149px; position: absolute;}
.infobu{margin-left: 10px; margin-top: 32px;}
.infobu2{margin-left: 10px; margin-top: 10px;}
.bulletitle{color: #cecece; text-shadow: #cecece 0px 0px 2px;}
.part4{left: 465px; top: 286px; width: 208px; height: 199px; position: absolute;}
.infobu3{margin-left: 40px; margin-top: 45;}

/*===== INFOBULLE 1 =========*/
/* INFOBULLE - TRANSITION */
.qeel-infobulle{
width: 100px;
margin: auto;
padding: 0;
float: left;
font-size:11px;
position: relative;
}

.qeel-bulle{
background: #090700;
border: 0px solid #1c1706;
width: 0;
height: 0;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
position: absolute;
top: 10px;
left: 50px;
width:150px;
overflow: hidden;
z-index: 20;
text-align: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity:0.65;
/*transform*/
-webkit-transform:scale(0) rotateZ(-12deg);
-moz-transform:scale(0) rotate(-12deg);
-ms-transform:scale(0) rotateZ(-12deg);
-o-transform:scale(0) rotate(-12deg);
transform:scale(0) rotateZ(-12deg);
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs rÃcents */
}

.qeel-infobulle:hover .qeel-bulle{
width: 150px;
height: auto;
padding: 5px;
box-shadow: black 1px 1px 2px;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
opacity:0.90;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
-moz-transform:scale(1) rotate(0);
-ms-transform:scale(1) rotateZ(0);
-o-transform:scale(1) rotate(0);
transform:scale(1) rotateZ(0);
}

/*===== INFOBULLE 2 =========*/
.qeel-infobulle2{
width: 180px;
margin: auto;
padding: 0;
float: left;
font-size:11px;
position: relative;
}

.qeel-bulle2{
background: #090700;
border: 0px solid #1c1706;
width: 0;
height: 0;
position: absolute;
left: -30px;
overflow: hidden;
z-index: 20;
text-align: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity:0.65;
/*transform*/
-webkit-transform:scale(0) rotateZ(-12deg);
-moz-transform:scale(0) rotate(-12deg);
-ms-transform:scale(0) rotateZ(-12deg);
-o-transform:scale(0) rotate(-12deg);
transform:scale(0) rotateZ(-12deg);
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs rÃcents */
}

.qeel-infobulle2:hover .qeel-bulle2{
width: 180px;
height: auto;
padding: 5px;
left: -30px;
box-shadow: black 1px 1px 2px;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
opacity:0.90;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
-moz-transform:scale(1) rotate(0);
-ms-transform:scale(1) rotateZ(0);
-o-transform:scale(1) rotate(0);
transform:scale(1) rotateZ(0);
}

/*===== FIN DU QEEL ======*/

Et la partie HTML (je crois que c'est pour mieux voir les changements ?) :

Code:: 
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<div class="fondqeel">
<span class="onglet_0 onglet" id="onglet_onglet1" onclick="javascript:change_onglet('onglet1');">
<div class="qeel-now">
<img src="http://imagesup.org/images10/1342194591-now.gif" />
</div>
</span>
<div class="qeel-stat">
<div class="part1">
<span id="delf">Bienvenue sur Graph Perle ! Vous êtes passionné de graphisme ? Vous cherchez des tutos ? C'est par ici ! {TOTAL_POSTS} {TOTAL_USERS} {NEWEST_USER}. Nous lui souhaitons tous la
bienvenue !</span>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_onglet1">
<div class="qeel-co">
<div class="part2">
<span id="delf2">{TOTAL_USERS_ONLINE}.</span>
<div class="qeel-cosépa"></div>
<span id="connecte">{LOGGED_IN_USER_LIST}</span>
</div>
</div>
</div>
<div style="background-color:none;">
<span class="onglet_0 onglet" id="onglet_onglet2" onclick="javascript:change_onglet('onglet2');">
<div class="qeel-before">
<img src="http://imagesup.org/images10/1342194791-before.gif" />
</div>
</span>
</div>
<div class="contenu_onglet2" id="contenu_onglet_onglet2" display="none">
<div class="qeel-co">
<div class="part2">24heures</div>
</div>
<div class="part3">
<table margin="0" border="0" cellspacing="0">
<tr>
<td>
<div class="infobu">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342170582-bl.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">Débutant</div>
</div>
</span>
<div class="qeel-cosépa"></div>Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis.</span>
</div>
</div>
</td>
<td>
<div class="infobu">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342181464-br.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">Futur Grapheur</div>
</div>
</span>
<div class="qeel-cosépa"></div>Maîtrise des bases. Fond, inscrutation et écritures bien réalisées, mais pouvant être amélioré.</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="infobu2">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342170582-bl.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">Futur Apprenti</div>
</div>
</span>
<div class="qeel-cosépa"></div>Des bases manquant de travail, aucun approfondissement et pas de finitions.</span>
</div>
</div>
</td>
<td>
<div class="infobu2">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342181464-br.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">Grapheur</div>
</div>
</span>
<div class="qeel-cosépa"></div>Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions.</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="infobu2">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342170582-bl.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">Apprenti</div>
</div>
</span>
<div class="qeel-cosépa"></div>Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades.</span>
</div>
</div>
</td>
<td>
<div class="infobu2">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342181464-br.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">Professionnel</div>
</div>
</span>
<div class="qeel-cosépa"></div>Perfection (Incrustation, Typographie, Finitions, Originalité, Travail ...)</span>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="part4">
<div class="infobu3">
<div class="qeel-infobulle2">
<img src="http://imagesup.org/images10/1342184550-qeel-transpa.png" />
<span class="qeel-bulle2">Anniversaires !
<br />
<br />
<br />
<br /></span>
</div>
</div>
</div>

<tr>
<td class="row1" colspan="2">
<span class="gensmall">
<br />
<div style="text-align:center;">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}</div>
</span>
</td>
</tr>

J'ai essayé de repérer la balise non fermée.. je ne sais pas si je l'ai trouvé, mais en tout cas j'ai essayé de corriger l'html. Mais là, l'onglet ne s'ouvre même plus Quelques problèmes avec mon qeel 40601244

Quelques problèmes avec mon qeel 40601244

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 09:38

C'est normal, comme je le disais, nous allons à présent nous occuper de cette fonction de changement d'onglets qui est très... bancale Smile

Remplace la fonction suivante :

Code:: function change_onglet(name) {
$('#onglet_' + anc_onglet).className = 'onglet_0 onglet';
$('#onglet_' + name).className = 'onglet_1 onglet';
$('#contenu_onglet_' + anc_onglet).css('display','none');
$('#contenu_onglet_' + name).css('display','block');
anc_onglet = name;
}

Par le code suivant :

Code:: $('.onglet').click(function() {
var cible = $(this).attr('class'); // Récupère la classe de l'onglet cliqué
var regexp = /onglet_(\d+)/i; // Expression régulière qui repère le numéro de l'onglet cible
cible = cible.match(regexp); // Récupère le numéro de l'onglet cible (correspondant à l'onglet cliqué)

$('.contenu_onglet').hide(); // Cache tous les contenus
$('#contenu_onglet_' + cible[1]).show(); // Affiche le contenu qui correspond au numéro de l'onglet cible (cliqué)
});

// Simule un clic sur le premier onglet lors du chargement de la page
$('.onglet_1').trigger('click');

La grosse différence entre ces deux codes, c'est que le deuxième gère l'évènement du clic uniquement du côté javascript. Plus besoin de onclick="javascript:change_onglet('onglet1');" dans le HTML déjà (ça allège encore plus notre template). D'ailleurs, ça ne devrait même plus exister ^_^

Ensuite, c'est vachement plus flexible et ça va alléger encore un peu plus les classes/identifiants dont tu as besoin pour faire ton menu.

Maintenant, j'ai adapté le script à ton utilisation pour que ça fonctionne avec des classes du genre .onglet_X où X est un nombre entier (0, 1, 273, ...). Si jamais tu change cela, il faudra modifier un chouïa la variable regexp (mais c'est un peu du charabia pour que tu puisse y toucher seule je te l'accorde).

Concrètement, tu pourras rajouter autant d'onglets que tu veux sans modifier le script, juste dans le HTML.
Dès que tu va cliquer sur un élément qui aura pour classe .onglet_X, le script affichera le conteneur qui aura pour identifiant #contenu_onglet_X. Tout simplement !

Donc, on peut simplifier ton template en retirant les éléments inutiles, ce qui donne :

Code:: 
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
   <div class="fondqeel">
      <span class="onglet_1 onglet">
      <div class="qeel-now">
         <img src="http://imagesup.org/images10/1342194591-now.gif" />
      </div>
      </span>
      <div class="qeel-stat">
         <div class="part1">
            <span id="delf">Bienvenue sur Graph Perle ! Vous êtes passionné de graphisme ? Vous cherchez des tutos ? C'est par ici ! {TOTAL_POSTS} {TOTAL_USERS} {NEWEST_USER}. Nous lui souhaitons tous la bienvenue !</span>
         </div>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_1">
         <div class="qeel-co">
            <div class="part2">
               <span id="delf2">{TOTAL_USERS_ONLINE}.</span>
               <div class="qeel-cosépa">
               </div>
               <span id="connecte">{LOGGED_IN_USER_LIST}</span>
            </div>
         </div>
      </div>
      <div style="background-color:none;">
         <span class="onglet_2 onglet">
         <div class="qeel-before">
            <img src="http://imagesup.org/images10/1342194791-before.gif" />
         </div>
         </span>
      </div>
      <div class="contenu_onglet" id="contenu_onglet_2">
         <div class="qeel-co">
            <div class="part2">
               24heures
            </div>
         </div>
         <div class="part3">
            <table margin="0" border="0" cellspacing="0">
            <tr>
               <td>
                  <div class="infobu">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342170582-bl.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Débutant
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis.</span>
                     </div>
                  </div>
               </td>
               <td>
                  <div class="infobu">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342181464-br.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Futur Grapheur
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Maîtrise des bases. Fond, inscrutation et écritures bien réalisées, mais pouvant être amélioré.</span>
                     </div>
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div class="infobu2">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342170582-bl.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Futur Apprenti
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Des bases manquant de travail, aucun approfondissement et pas de finitions.</span>
                     </div>
                  </div>
               </td>
               <td>
                  <div class="infobu2">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342181464-br.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Grapheur
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions.</span>
                     </div>
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div class="infobu2">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342170582-bl.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Apprenti
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades.</span>
                     </div>
                  </div>
               </td>
               <td>
                  <div class="infobu2">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342181464-br.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Professionnel
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Perfection (Incrustation, Typographie, Finitions, Originalité, Travail ...)</span>
                     </div>
                  </div>
               </td>
         </div>
         <div class="part4">
            <div class="infobu3">
               <div class="qeel-infobulle2">
                  <img src="http://imagesup.org/images10/1342184550-qeel-transpa.png" />
                  <span class="qeel-bulle2">Anniversaires !
                  </span>
               </div>
            </div>
         </div>
         
         <tr>
            <td class="row1" colspan="2">
               <span class="gensmall">
                  <div style="text-align:center;">
                     {TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}
                  </div>
               </span>
            </td>
         </tr>

Et ton CSS peut se passer des classes .onglet_0, .onglet_1, .contenu_onglet2 (tu peux les supprimer de ton CSS).

A présent, l'onglet devrait s'ouvrir et se fermer correctement.
Si ça ne marche pas, dis-le moi. Si ça fonctionne, passons à la suite.

En ce qui concerne ton problème de balise, il y a deux erreurs déjà :

Tu commence un tableau qui ne se termine jamais : où est la balise </table> ?
Tu commence une deuxième ligne sans fermer la première : où est la balise </tr> ?

J'ai vu qu'effectivement tu as bien essayé de fermer les 2 balises, mais bien trop tôt, ce qui provoque des problèmes (parce-que du coup tu te retrouve avec une nouvelle ligne de tableau... alors que tu n'es plus dans un tableau).
Fais donc bien attention à ne fermer le tableau qu'après la dernière balise </tr>, et de ne rien mettre entre </tr> et <tr> (ferme ta ligne juste avant d'ouvrir la suivante).

J'attends de voir ce que ça donne et ton retour.
Une fois que ce sera corrigé, il ne nous restera plus qu'à corriger les infobulles (le problème venant du fait que tes infobulles sont dans le conteneur de l'onglet 2, donc elles n'apparaissent pas quand tu es sur l'onglet 1).

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 10:58

Voilà ce que j'ai fais (j'espère que c'est ça) Donc j'ai fermé la table, et j'ai fermé un certain <.tr> :

Code:: 
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<div class="fondqeel">
<span class="onglet_1 onglet">
<div class="qeel-now">
<img src="http://imagesup.org/images10/1342194591-now.gif" />
</div>
</span>
<div class="qeel-stat">
<div class="part1">
<span id="delf">Bienvenue sur Graph Perle ! Vous êtes passionné de graphisme ? Vous cherchez des tutos ? C'est par ici ! {TOTAL_POSTS} {TOTAL_USERS} {NEWEST_USER}. Nous lui souhaitons tous la bienvenue !</span>
</div>
</div>
<div class="contenu_onglet" id="contenu_onglet_1">
<div class="qeel-co">
<div class="part2">
<span id="delf2">{TOTAL_USERS_ONLINE}.</span>
<div class="qeel-cosépa">
</div>
<span id="connecte">{LOGGED_IN_USER_LIST}</span>
</div>
</div>
</div>
<div style="background-color:none;">
<span class="onglet_2 onglet">
<div class="qeel-before">
<img src="http://imagesup.org/images10/1342194791-before.gif" />
</div>
</span>
</div>
<div class="contenu_onglet" id="contenu_onglet_2">
<div class="qeel-co">
<div class="part2">
24heures
</div>
</div>
<div class="part3">
<table margin="0" border="0" cellspacing="0">
<tr>
<td>
<div class="infobu">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342170582-bl.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">
Débutant
</div>
</div>
</span>
<div class="qeel-cosépa">
</div>
Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis.</span>
</div>
</div>
</td>
<td>
<div class="infobu">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342181464-br.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">
Futur Grapheur
</div>
</div>
</span>
<div class="qeel-cosépa">
</div>
Maîtrise des bases. Fond, inscrutation et écritures bien réalisées, mais pouvant être amélioré.</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="infobu2">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342170582-bl.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">
Futur Apprenti
</div>
</div>
</span>
<div class="qeel-cosépa">
</div>
Des bases manquant de travail, aucun approfondissement et pas de finitions.</span>
</div>
</div>
</td>
<td>
<div class="infobu2">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342181464-br.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">
Grapheur
</div>
</div>
</span>
<div class="qeel-cosépa">
</div>
Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions.</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="infobu2">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342170582-bl.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">
Apprenti
</div>
</div>
</span>
<div class="qeel-cosépa">
</div>
Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades.</span>
</div>
</div>
</td>
<td>
<div class="infobu2">
<div class="qeel-infobulle">
<a href="http://www.graph-perle.com/forum#profil">
<img src="http://imagesup.org/images10/1342181464-br.png" />
</a>
<span class="qeel-bulle">
<span class="nom-bulle">
<div class="bulletitle">
<div align="center">
Professionnel
</div>
</div>
</span>
<div class="qeel-cosépa">
</div>
Perfection (Incrustation, Typographie, Finitions, Originalité, Travail ...)</span>
</div>
</div>
</td>
</tr>
<div class="part4">
<div class="infobu3">
<div class="qeel-infobulle2">
<img src="http://imagesup.org/images10/1342184550-qeel-transpa.png" />
<span class="qeel-bulle2">Anniversaires !
</span>
</div>
</div>
</div>

<tr>
<td class="row1" colspan="2">
<span class="gensmall">
<div style="text-align:center;">
{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}
</div>
</span>
</td>
</tr></table>

Et j'ai bien remplacer la fonction par l'autre code mais là l'onglet ne s'ouvre plus ! Et au fait les infobulles ça marche, parce que maintenant onglet1=onglet2

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 11:18

Erf, ma faute, autant pour moi : il faut que tu entoure ton code JS avec $(function() { ... }); (place ton script à la place des ...

Normalement ça devrait fonctionner (sinon c'est que l'erreur est ailleurs Smile

).

A noter que là ça fonctionne surtout parce-qu'aucun onglet n'est caché (le clic se déclenche avant que les éléments soient chargés).

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 11:22

C'est bon ça marche pour les onglets Very Happy

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 11:32

Bon, en ce qui concerne ton dernier soucis, c'est pas bien compliqué.

Je suppose que c'est cette partie qui correspond aux "infobulles" :

Code:: <div class="part3">
            <table margin="0" border="0" cellspacing="0">
            <tr>
               <td>
                  <div class="infobu">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342170582-bl.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Débutant
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis.</span>
                     </div>
                  </div>
               </td>
               <td>
                  <div class="infobu">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342181464-br.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Futur Grapheur
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Maîtrise des bases. Fond, inscrutation et écritures bien réalisées, mais pouvant être amélioré.</span>
                     </div>
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div class="infobu2">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342170582-bl.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Futur Apprenti
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Des bases manquant de travail, aucun approfondissement et pas de finitions.</span>
                     </div>
                  </div>
               </td>
               <td>
                  <div class="infobu2">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342181464-br.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Grapheur
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions.</span>
                     </div>
                  </div>
               </td>
            </tr>
            <tr>
               <td>
                  <div class="infobu2">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342170582-bl.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Apprenti
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades.</span>
                     </div>
                  </div>
               </td>
               <td>
                  <div class="infobu2">
                     <div class="qeel-infobulle">
                        <a href="http://www.graph-perle.com/forum#profil">
                        <img src="http://imagesup.org/images10/1342181464-br.png" />
                        </a>
                        <span class="qeel-bulle">
                        <span class="nom-bulle">
                        <div class="bulletitle">
                           <div align="center">
                              Professionnel
                           </div>
                        </div>
                        </span>
                        <div class="qeel-cosépa">
                        </div>
                        Perfection (Incrustation, Typographie, Finitions, Originalité, Travail ...)</span>
                     </div>
                  </div>
               </td>
            </tr>
            </table>
         </div>
         <div class="part4">
            <div class="infobu3">
               <div class="qeel-infobulle2">
                  <img src="http://imagesup.org/images10/1342184550-qeel-transpa.png" />
                  <span class="qeel-bulle2">Anniversaires !
                  </span>
               </div>
            </div>
         </div>

Or cette partie, elle est incluse dans le conteneur <div class="contenu_onglet" id="contenu_onglet_2"> que tu n'as pas fermé avant d'ouvrir le bloc <div class="part3">.

En fait, ce conteneur n'est jamais fermé.
Or il est caché quand on est sur l'onglet 1. C'est ce qui explique que les infobulles n'apparaissent que lorsque tu te trouve sur le deuxième onglet.

Pour règler le problème, il faut fermer le conteneur avec une balise </div> avant de créer le conteneur <div class="part3">.

Essaie et dis moi ce que ça donne (et là, magie, ton problème doit être résolu) Wink

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 11:52

Ouiii ça marche ! Very Happy

Alors là quand j'ajoute la variable {L_CONNECTED_MEMBERS} à la place du texte "24heures" ça décale tout.. :/

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 12:02

Tu aurais un screenshot de ce que ça te fait ?

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 12:07

ça me fait ça :

Spoiler:

Tout est déplacé vers le bas, y compris les infobulles.

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 12:14

C'est que cette variable cache bien son jeu et doit générer un bloc.

Pourrais-tu le mettre en pratique sur ton forum que je puisse analyser ça en live (remplace 24heures par la variable et dis moi quand c'est bon/publié). Ca sera plus simple pour moi ^_^

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 12:16

C'est publié Very Happy

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 12:29

Effectivement ça casse tout dans le rendu...

Alors, d'après le topic Décryptage de index_body, cette variable crée une ligne de tableau contenant les infos sur les derniers membres connectés.

Or l'apparition soudaine de cette ligne de tableau dans ton conteneur casse ta structure car elle rentre en conflit avec.

Essaie donc plutôt d'insérer ta variable comme ceci :

Code:: <table>{L_CONNECTED_MEMBERS}</table>

Cela devrait déjà isoler la ligne dans un nouveau tableau et ainsi éviter les conflits de structure (je ne sais pas encore si ça résout le problème, mais c'est une piste).

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 12:47

Ouiiiiiii ça marche !! Smack Smack

Juste une petite question encore Embarassed

Je voudrais mettre les anniversaires dans l'infobulle près de la lanterne mais ça ne marche pas, ça ce met en dehors de l'infobulle.

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 12:53

Même raison, les deux variables constituent une ligne de tableau (je te renvoie vers le topic que j'ai cité précédemment, tout est détaillé).

Il faut donc que tu l'implémente ainsi :

Code:: <table>
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</table>

Normalement ça devrait fonctionner sans tout casser également Wink

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 12:59

Oui c'est ce que je me suis dit, et j'ai déjà essayé mais ça ce met quand même en dehors de l'infobulle :/

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 13:22

Salut x)

Pour votre science à tous deux, on a justement un tutoriel à ce sujet : Par ici

(edit : bon j'ai quatre messages de retard, désolée XD)

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 13:41

Toutafé !

Merci 'Christa Smile

Sujet: Re: Quelques problèmes avec mon qeel Lun 05 Nov 2012, 14:25

voilà ce que j'ai fais

Code:: <div class="part4">
<div class="infobu3">
<div class="qeel-infobulle2">
<img src="http://imagesup.org/images10/1342184550-qeel-transpa.png" />
<span class="qeel-bulle2">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br/><br/>
<table>
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</table>
</span>
</div>
</div>
</div>

cela ne marche toujours pas.. ça reste en dehors de l'infobulle

Sujet: Re: Quelques problèmes avec mon qeel Mar 06 Nov 2012, 05:02

Hmmmm en fait je me demande si le problème n'est pas dû au fait que tu essaie de mettre un tableau (élément de type block) dans un span (élément de type inline).

Normalement, le conteneur d'une infobulle et une <div>, je te conseille d'ailleurs ce tutoriel qui reprend la création d'une infobulle de A à Z.

Essaie d'ajouter la propriété display: block; à la classe de ton span, à savoir .qeel-bulle2, dans ton CSS.

D'ailleurs ça me fait remarquer que ton CSS est affreusement compliqué pour rien.
La différence fondamentale entre une classe et un identifiant est que tu peux appliquer la même classe à autant d'éléments que tu le souhaite. Avoir une notion d'identification unique dans le nom d'une classe n'a donc pas de sens : pourquoi est-ce-que tu as .info-bulle et info-bulle2 ?

En fait, tu peux simplifier ton CSS en fusionant ces deux classes en une seule.
Si ta deuxième infobulle à quelques propriétés différentes/supplémentaires, il te suffit de rajouter une classe (voir un identifiant dans ce cas, si c'est vraiment spécifique et non générique), avec ces propriétés.

Là aussi, on a un très bon tuto (tout refait et validé) sur la distinction entre classe et identifiant auquel je te propose de jeter un oeil car c'est quelque chose qui va te simplifier la vie (et ton code) Wink

D'ailleurs, il me semble qu'il y a une coquille dans ton CSS. Est-ce-que je peux avoir la version actuelle de ton CSS (je ne sais pas si tu l'as modifié par rapport à la version que j'ai actuellement) ?
Merci Smile

Sujet: Re: Quelques problèmes avec mon qeel Mar 06 Nov 2012, 08:45

Alors j'ai lu les tutos, donc je met la même classe pour les infobulles, et s'il y'en a une qui est un peu différente j'ajoute un id, le code va donc être comme ça ?

Code:: <div class="qeel-infobulle">
INFOBULLE 1
</div>
<div class="qeel-infobulle">
INFOBULLE2 (similaire à 1)
</div>
<div id="qeel-infobulle1" class="qeel-infobulle">
INFOBULLE3
</div>

sachant que la 3 est celle qui diffère des autres ?

.info-bulle et .info-bulle2 n'existent pas dans mon CSS... tu parles de .qeel-infobulle et .qeel-infobulle2 ?

Pour le moment j'ai ça :

Code:: /*===== QUI EST EN LIGNE (new) =========*/
.onglet
{
cursor:pointer;
background-color: none;
}

.contenu_onglet
{
background-color: none;

}

.qeel-before {
position: absolute;
left: 582px;
top: 154px;
background-color:none;
width: 68px;
height: 35px;
}

.qeel_connect .row1 {
background-color:transparent;
line-height:100%;
font-family:arial;
font-size:7pt;}

.qeel-now {
width: 60px;
height: 41px;
position: absolute;
left: 571px;
background-color:none;
top: 106px;
}

.qeel-stat {
left: 81px;
top: 321px;
width: 353px;
height: 80px;
font-size: 7pt;

font-family: arial;
text-align: justify;
z-index:2;
position: absolute;
}

.nom-bulle {
font-family: time new roman;
text-transform: uppercase;
font-size:15px;
text-align:center;
letter-spacing: 2px;
}

.qeel-co {
left: 352px;
top: 165px;
width: 176px;
height: 86px;
font-size: 7pt;
font-family: arial;
text-align: justify;
z-index:2;
position: absolute;
}

.qeel-cosépa {
border-bottom: #622b2b 4px dotted;
width: auto;
margin-top: 3px;
margin-bottom: 3px;
}

.fondqeel{z-index: 0; position:relative; width:700px; height:560px; margin: auto; background-image: url(http://img11.hostingpics.net/pics/500819qeel22.png);}

.part1{overflow: auto; width: auto; height: 80px; padding: 2px;}
.part2{overflow: auto; width: auto; height: 86px; padding: 2px;}
.part3{left: 87px; top: 121px; width: 229px; height: 149px; position: absolute;}
.infobu{margin-left: 10px; margin-top: 32px;}
.infobu2{margin-left: 10px; margin-top: 10px;}
.bulletitle{color: #cecece; text-shadow: #cecece 0px 0px 2px;}
.part4{left: 465px; top: 286px; width: 208px; height: 199px; position: absolute;}
.infobu3{margin-left: 40px; margin-top: 45;}
/*===== INFOBULLE 1 =========*/
/* INFOBULLE - TRANSITION */
.qeel-infobulle{
width: 100px;
margin: auto;
padding: 0;
float: left;
font-size:11px;
position: relative;
}

.qeel-bulle{
background: #090700;
border: 0px solid #1c1706;
width: 0;
height: 0;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
position: absolute;
top: 10px;
left: 50px;
width:150px;
overflow: hidden;
z-index: 20;
text-align: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity:0.65;
/*transform*/
-webkit-transform:scale(0) rotateZ(-12deg);
-moz-transform:scale(0) rotate(-12deg);
-ms-transform:scale(0) rotateZ(-12deg);
-o-transform:scale(0) rotate(-12deg);
transform:scale(0) rotateZ(-12deg);
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs rÃ©cents */
}

.qeel-infobulle:hover .qeel-bulle{
width: 150px;
height: auto;
padding: 5px;
box-shadow: black 1px 1px 2px;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
opacity:0.90;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
-moz-transform:scale(1) rotate(0);
-ms-transform:scale(1) rotateZ(0);
-o-transform:scale(1) rotate(0);
transform:scale(1) rotateZ(0);
}

/*===== INFOBULLE 2 =========*/
.qeel-infobulle2{
width: 180px;
margin: auto;
padding: 0;
float: left;
font-size:11px;
position: relative;
}

.qeel-bulle2{
background: #090700;
border: 0px solid #1c1706;
width: 0;
height: 0;
position: absolute;
left: -30px;
overflow: hidden;
z-index: 20;
text-align: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity:0.65;
/*transform*/
-webkit-transform:scale(0) rotateZ(-12deg);
-moz-transform:scale(0) rotate(-12deg);
-ms-transform:scale(0) rotateZ(-12deg);
-o-transform:scale(0) rotate(-12deg);
transform:scale(0) rotateZ(-12deg);
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs rÃ©cents */
display: block;
}

.qeel-infobulle2:hover .qeel-bulle2{
width: 180px;
height: auto;
padding: 5px;
left: -30px;
box-shadow: black 1px 1px 2px;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
opacity:0.90;
/*transform*/
-webkit-transform:scale(1) rotateZ(0);
-moz-transform:scale(1) rotate(0);
-ms-transform:scale(1) rotateZ(0);
-o-transform:scale(1) rotate(0);
transform:scale(1) rotateZ(0);
}

/*===== FIN DU QEEL ======*/

Et non merci à toi !

Sujet: Re: Quelques problèmes avec mon qeel Mar 06 Nov 2012, 09:10

Oui je parlais de .qeel-bulle en fait (qui est décliné).

Sinon oui c'est exactement le principe, ça devrait alléger ton CSS et te simplifier la vie (surtout si tu veux changer le style de ton forum plus tard). Smile

Bon, préoccupons-nous d'abord d'arranger/corriger ton CSS.
Je me suis permis de le nettoyer/ré-indenter/corriger un micro-chouïa sans toucher sa structure :

Code:: /*===== QUI EST EN LIGNE (new) =========*/
.onglet {
cursor: pointer;
background-color: none;
}

.contenu_onglet {
background-color: none;
}

.qeel-before {
position: absolute;
left: 582px;
top: 154px;
background-color: none;
width: 68px;
height: 35px;
}

.qeel_connect .row1 {
background-color: transparent;
line-height: 100%;
font-family: arial;
font-size: 7pt;
}

.qeel-now {
width: 60px;
height: 41px;
position: absolute;
left: 571px;
background-color: none;
top: 106px;
}

.qeel-stat {
left: 81px;
top: 321px;
width: 353px;
height: 80px;
font-size: 7pt;
font-family: arial;
text-align: justify;
z-index: 2;
position: absolute;
}

.nom-bulle {
font-family: time new roman;
text-transform: uppercase;
font-size: 15px;
text-align: center;
letter-spacing: 2px;
}

.qeel-co {
left: 352px;
top: 165px;
width: 176px;
height: 86px;
font-size: 7pt;
font-family: arial;
text-align: justify;
z-index: 2;
position: absolute;
}

.qeel-cosépa {
border-bottom: #622b2b 4px dotted;
width: auto;
margin-top: 3px;
margin-bottom: 3px;
}

.fondqeel {
z-index: 0;
position: relative;
width: 700px;
height: 560px;
margin: auto;
background-image: url(http://img11.hostingpics.net/pics/500819qeel22.png);
}

.part1 {
overflow: auto;
width: auto;
height: 80px;
padding: 2px;
}

.part2 {
overflow: auto;
width: auto;
height: 86px;
padding: 2px;
}

.part3 {
left: 87px;
top: 121px;
width: 229px;
height: 149px;
position: absolute;
}

.infobu {
margin-left: 10px;
margin-top: 32px;
}

.infobu2 {
margin-left: 10px;
margin-top: 10px;
}

.bulletitle {
color: #cecece;
text-shadow: #cecece 0 0 2px;
}

.part4 {
left: 465px;
top: 286px;
width: 208px;
height: 199px;
position: absolute;
}

.infobu3 {
margin-left: 40px;
margin-top: 45;
}

/*===== INFOBULLE 1 =========*/
/* INFOBULLE - TRANSITION */
.qeel-infobulle {
width: 100px;
margin: auto;
padding: 0;
float: left;
font-size: 11px;
position: relative;
}

.qeel-bulle {
background: #090700;
border: 0 solid #1c1706;
width: 0;
height: 0;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
position: absolute;
top: 10px;
left: 50px;
width: 150px;
overflow: hidden;
z-index: 20;
text-align: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity: 0.65;
/*transform*/
-webkit-transform: scale(0) rotateZ(-12deg);
-moz-transform: scale(0) rotate(-12deg);
-ms-transform: scale(0) rotateZ(-12deg);
-o-transform: scale(0) rotate(-12deg);
transform: scale(0) rotateZ(-12deg);
-webkit-transition: all 1.5s ease;
/* pour navigateur webkit */
-moz-transition: all 1.5s ease;
/* pour navigateur mozilla */
-o-transition: all 1.5s ease;
/* pour navigateur opera */
transition: all 1.5s ease;
/* pour les navigateurs récents */;
}

.qeel-infobulle:hover .qeel-bulle {
width: 150px;
height: auto;
padding: 5px;
box-shadow: black 1px 1px 2px;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
opacity: 0.9;
/*transform*/
-webkit-transform: scale(1) rotateZ(0);
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotateZ(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotateZ(0);
}

/*===== INFOBULLE 2 =========*/
.qeel-infobulle2 {
width: 180px;
margin: auto;
padding: 0;
float: left;
font-size: 11px;
position: relative;
}

.qeel-bulle2 {
background: #090700;
border: 0 solid #1c1706;
width: 0;
height: 0;
position: absolute;
left: -30px;
overflow: hidden;
z-index: 20;
text-align: left;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
opacity: 0.65;
/*transform*/
-webkit-transform: scale(0) rotateZ(-12deg);
-moz-transform: scale(0) rotate(-12deg);
-ms-transform: scale(0) rotateZ(-12deg);
-o-transform: scale(0) rotate(-12deg);
transform: scale(0) rotateZ(-12deg);
-webkit-transition: all 1.5s ease;
/* pour navigateur webkit */
-moz-transition: all 1.5s ease;
/* pour navigateur mozilla */
-o-transition: all 1.5s ease;
/* pour navigateur opera */
transition: all 1.5s ease;
/* pour les navigateurs rÃcents */
display: block;
}

.qeel-infobulle2:hover .qeel-bulle2 {
width: 180px;
height: auto;
padding: 5px;
left: -30px;
box-shadow: black 1px 1px 2px;
font-size: 7pt;
color: #a1a1a1;
font-family: arial;
text-align: justify;
opacity: 0.90;
/*transform*/
-webkit-transform: scale(1) rotateZ(0);
-moz-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotateZ(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotateZ(0);
}

/*===== FIN DU QEEL ======*/

Partant de là il faut déjà qu'on corrige impérativement 3 erreurs :

background-color: none; n'existe pas. Je suppose que tu veux utiliser transparent comme valeur. Il faut corriger ça (il y en a 4)
Dans .qeel-bulle, tu as déclaré 2 fois la propriété width
Dans .qeel-bulle, tu as déclaré 2 fois la propriété text-align

Je te laisse faire ça + simplifier tes classes (et donc ton HTML) pour le moment. Bravo !

Dis moi ce que ça te donne (et veille bien à ce que le rendu soit toujours le même, ça doit pas changer ça).

Sujet: Re: Quelques problèmes avec mon qeel Mar 06 Nov 2012, 16:58

D'accord je fais ça dès que je reprends mon ordi, merci ! Smile

Sujet: Re: Quelques problèmes avec mon qeel Dim 11 Nov 2012, 13:51

Hello !
Le problème est-il toujours d'actualité ?
Si nous n'obtenons pas de réponse sous 4 jours, il sera considéré comme résolu !
Merci de ta compréhension Quelques problèmes avec mon qeel 926145

Quelques problèmes avec mon qeel

Espeon - Séparer le JS du HTML

Espeon - Indentation du HTML

Xibition - Séparer le CSS du HTML

Quelques problèmes avec mon qeel

Sujets similaires

Sujets similaires

Partenaires Or