Le Deal du moment :
Jeux, jouets et Lego : le deuxième à ...
Voir le deal

   :: Espace invités :: Intruders :: Résolus Voir le sujet précédent Voir le sujet suivant Aller en bas

Petit problème avec le QEEL N°3.

Akira.
Petit problème avec le QEEL N°3. Empty Dim 25 Oct - 18:19
Bonsoir Skaemp,

Tout d’abord, je tiens à vous remercier de votre générosité concernant le codage et le graphisme, c’est tout à fait magnifique, grâce à vous, j’ai découvert des codes que je ne connaissais pas encore et vos œuvres concernant le graphisme sont juste fabuleux !  Je vous remercie vraiment nous faire partager de tels œuvres.


Excusez mon égarement, voici donc la raison de ma visite. Comme dit dans le titre, mon soucis proviens du QEEL N°3 (qui est magnifique au passage).

Voici donc un Screen:
Spoiler:

La fondatrice du forum et moi-même n'avions pas réellement de problème, cependant en rajoutant des groupes, cela a commencé à faire buger le QEEL, ce n'est pas voyant ici, mais sur votre exemple, quand nous passons la souris sur le nom d'un groupe, nous pouvons apercevoir l'image et une description, cependant maintenant quand on passe la souris sur les groupes, rien ne se passe. C’est-à-dire que la description du groupe et l’image pour le groupe n’apparaissent plus du tout.

Depuis quelques heures j’essaye de voir d’où provient le problème, là où on aurait commis une erreur, mais je dois vous avouer que je n’arrive pas à voir. C’est pourquoi je me suis dit que la meilleure solution était de vous expliquer le problème.

Voici la partie CSS :
Code:
/* QEEL */
.QEEL {
height:auto; width:850px;
}
/* MEMBRES CONNECTES & 24 H QEEL */
#ondayQEEL {
display:inline-block; width:250px;
background:#191919; /* MODIFIABLE */
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
margin:auto; margin-top:20px;
width:200px; height:75px; padding:5px; overflow:hidden;
background:#e8e7e9; color:black; /* MODIFIABLE */
font-size:10px;
}
.onlineQEEL:hover {
overflow:auto;
}
/* 24H QEEL */
.dayQEEL {
margin:20px auto;
height:120px; width:200px; padding:5px; overflow:hidden;
background-color:#e8e7e9; color:black; /* MODIFIABLE */
font-size:10px;
}
.dayQEEL:hover {
overflow:auto;
}
/* TITRE / STATISTIQUES / DESCRIPTIFS GROUPES / ANNIVERSAIRES QEEL */
.blocQEEL {
display:inline-block; vertical-align:top; width:600px;
}
/* TITRE QEEL */
.tleQEEL {
width:575px; height:35px; padding:25px 25px 25px 0;
background:#191919; /* MODIFIABLE */
text-transform:uppercase; text-align:right; text-shadow:1px 1px 0px black;
}
.tleQEEL a{
font-size:24px;
color:white; /* MODIFIABLE */
}
/* BLOC DESCRIPTIFS GROUPES QEEL */
.blocGQEEL {
display:inline-block; vertical-align:top;
background-color:#dddddd; /* MODIFIABLE */
width:400px; height:150px; text-align:center;
}
/* DESCRIPTIFS GROUPES QEEL */
.contenu_onglet {
display:none;
background-color:#dddddd; color:black; /* MODIFIABLE */
width:390px; height:140px; padding:5px; overflow:auto;
font-size:10px; text-align:justify;
}
/* IMAGES DESCRIPTIFS GROUPES QEEL */
.contenu_onglet img {
position:absolute; margin-left:395px; margin-top:-5px;
width:200px; height:150px;
}
/* STATISTIQUES QEEL */
.stsQEEL {
display:inline-block;
width:180px; height:130px; padding:10px;
background:#e8e7e9; /* MODIFIABLE */
text-align:center; font-size:11px;
}
.stsQEEL div {
margin:5px 0;
text-transform:uppercase; text-align:right;
color:black; border-bottom:1px solid black; /* MODIFIABLE */
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
width:580px; height:20px; padding:10px;
background:#191919; /* MODIFIABLE */
font-family:Arial; text-transform:uppercase; text-align:left;
color:white; /* MODIFIABLE */
}
.anvQEEL div {
position:absolute; z-index:2;
margin-top:-180px; margin-left:-10px;
width:0px; height:130px; padding:10px; overflow:hidden;
background:#dddddd; color:black; /* MODIFIABLE */
text-align:justify !important;
opacity:0; transition:all .45s linear; -webkit-transition:all .45s linear;
}
.anvQEEL:hover div{
width:380px; overflow:auto;
opacity:1;
}
/* BLOC NOMS DES GROUPES QEEL */
.GQEEL {
margin-top:15px;
width:850px; padding:10px 0;
text-align:center;
background:#191919; /* MODIFIABLE */
}
/* BLOC NOM DU GROUPE QEEL */
.onglet {
display:inline-block;
margin:0 10px; padding:10px;
text-align:center; font-size:12px; text-transform:uppercase;
color:black; text-shadow:1px 1px 0 rgba(0,0,0,0.2); /* MODIFIABLE */
transition:all 0.45s linear; -webkit-transition:all 0.45s linear;
}
/* SURVOLEMENT NOM DU GROUPE QEEL */
.onglet_1 {
box-shadow:inset 0 0 25px rgba(0,0,0,0.4); letter-spacing:1px; /* MODIFIABLE */
}

Voici la partie de la template :
Code:
<!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    <tr><td><div class="QEEL"><!-- MEMBRES CONNECTES & 24 H --><div id="ondayQEEL"><!-- MEMBRES CONNECTES --><div class="onlineQEEL"><table>{LOGGED_IN_USER_LIST}</table></div><!-- 24H --><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div></div><!-- TITRE --><div class="blocQEEL"><!-- BEGIN switch_viewonline_link --><div class="tleQEEL"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div><!-- END switch_viewonline_link --><div class="blocGQEEL"><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script><!-- DESCRIPTIFS GROUPES --><div class="contenu_onglets">

<!-- CONTENU GROUPE 1 --> <div class="contenu_onglet" id="contenu_onglet_PNJ"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/378e.png" />Personnage non jouable, seul les administrateurs les jouent pour vous aidez dans vos RP.</div><!-- CONTENU GROUPE 2 --><div class="contenu_onglet" id="contenu_onglet_Asgard"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/4rgv.png" />Les Asgard son de vaillant guerrier Aliens, qui vivent au moins 5000 ans. Ils ressemblent a des humains ordinaire, la seul chose qui les différencies c'est leurs vêtements et leurs attitudes très barbare.</div><!-- CONTENU GROUPE 3 --><div class="contenu_onglet" id="contenu_onglet_Kemonomimi"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/4vgc.png" />Contenu groupe Kemonomimi.</div><!-- CONTENU GROUPE 4  --><div class="contenu_onglet" id="contenu_onglet_Serpentaria"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/res3.png" />Contenu groupe Serpentaria.</div><!-- CONTENU GROUPE 5  --><div class="contenu_onglet" id="contenu_onglet_Ephinea"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/5y12.png" />Contenu groupe Ephinea.</div><!-- CONTENU GROUPE 6  --><div class="contenu_onglet" id="contenu_onglet_Ignis"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/02vs.png" />Contenu groupe Ignis.</div><!-- CONTENU GROUPE 7  --><div class="contenu_onglet" id="contenu_onglet_Jötunheim"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/xzdh.png" />Contenu groupe Jötunheim.</div><!-- GROUPE 8 --><div class="contenu_onglet" id="contenu_onglet_Morphic"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/ce48.png" />Contenu groupe Morphic.</div><!-- GROUPE 9 --><div class="contenu_onglet" id="contenu_onglet_Cyborg"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/apof.png" />Contenu groupe Cyborg.</div><!-- GROUPE 10 --><div class="contenu_onglet" id="contenu_onglet_Androïde"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/s2ve.png" />Contenu groupe Androïde.</div><!-- GROUPE 11 --><div class="contenu_onglet" id="contenu_onglet_Terre"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/ee4z.png" />Contenu groupe Terre.</div>

            </div>
        <script type="text/javascript">
            //<!--
                    var anc_onglet = 'eins';
                    change_onglet(anc_onglet);
            //-->
            </script>
    </div>
    <!-- STATISTIQUES --><div class="stsQEEL"><!-- DERNIER INSCRIT --><div>Dernier inscrit :</div><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script><br/><!-- TOTAL MEMBRES --><div>Membres :</div><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script><br/><!-- TOTAL MESSAGES --><div>Messages :</div><span id="tPOSTS">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script></div><!-- ANNIVERSAIRES --><div class="anvQEEL">Anniversaires<div><table>{L_WHOSBIRTHDAY_TODAY} {L_WHOSBIRTHDAY_WEEK}</table></div></div></div>

    <!-- GROUPES --><div class="GQEEL"><div class="onglets"><!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_PNJ" onmouseover="javascript:change_onglet('PNJ');" style="background:#635151;">PNJ</span><!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_Asgard" onmouseover="javascript:change_onglet('Asgard');" style="background:#8F8300;">Asgard</span><!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_Kemonomimi" onmouseover="javascript:change_onglet('Kemonomimi');" style="background:#9E397E">Kemonomimi</span><!-- GROUPE 4 --><span class="onglet_0 onglet" id="onglet_Serpentaria" onmouseover="javascript:change_onglet('Serpentia');" style="background:#389900">Serpentaria</span><!-- GROUPE 5 --><span class="onglet_0 onglet" id="onglet_Ephinea" onmouseover="javascript:change_onglet('Ephinea');" style="background:#E6E6E6;">Ephinea</span><!-- GROUPE 6 --><span class="onglet_0 onglet" id="onglet_Ignis" onmouseover="javascript:change_onglet('Ignis');" style="background:#850000;">Ignis</span><!-- GROUPE 7 --><span class="onglet_0 onglet" id="onglet_Jötunheim" onmouseover="javascript:change_onglet('Jötunheim');" style="background:#4A89B3;">Jötunheim</span><!-- GROUPE 8 --><span class="onglet_0 onglet" id="onglet_Morphic" onmouseover="javascript:change_onglet('Morphic');" style="background:#FA5858;">Morphic</span><!-- GROUPE 9 --><span class="onglet_0 onglet" id="onglet_Cyborg" onmouseover="javascript:change_onglet('Cyborg');" style="background:#5C4200;">Cyborg</span><!-- GROUPE 10 --><span class="onglet_0 onglet" id="onglet_Androïde" onmouseover="javascript:change_onglet('Androïde');" style="background:#3742B3;">Androïde</span><!-- GROUPE 11 --><span class="onglet_0 onglet" id="onglet_Terre" onmouseover="javascript:change_onglet('Terre');" style="background:#9C9C9C;">Terre</span>

    </div></div></div></td></tr></table>
    <!-- END disable_viewonline -->

Je vous remercie d’avance et je m’excuse du dérangement.
Bonne soirée.

Cordialement,
Akira.
Revenir en haut Aller en bas
Skaemp
Petit problème avec le QEEL N°3. Empty Lun 26 Oct - 0:25
Bonsoir,

Ne pouvant m'inscrire que d'un remerciement banal en écho aux vôtres, je tâcherai donc de pallier à ce cruel manque de créativité en la résolution de votre problème :
Code:
<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><td><div class="QEEL"><!-- MEMBRES CONNECTES & 24 H --><div id="ondayQEEL"><!-- MEMBRES CONNECTES --><div class="onlineQEEL"><table>{LOGGED_IN_USER_LIST}</table></div><!-- 24H --><div class="dayQEEL"><table>{L_CONNECTED_MEMBERS}</table></div></div><!-- TITRE --><div class="blocQEEL"><!-- BEGIN switch_viewonline_link --><div class="tleQEEL"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div><!-- END switch_viewonline_link --><div class="blocGQEEL"><script type="text/javascript" src="http://sd-1.archive-host.com/membres/up/211183412958130190/onglets.js"></script><!-- DESCRIPTIFS GROUPES --><div class="contenu_onglets">

<!-- CONTENU GROUPE 1 --> <div class="contenu_onglet" id="contenu_onglet_PNJ"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/378e.png" />Personnage non jouable, seul les administrateurs les jouent pour vous aidez dans vos RP.</div><!-- CONTENU GROUPE 2 --><div class="contenu_onglet" id="contenu_onglet_Asgard"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/4rgv.png" />Les Asgard son de vaillant guerrier Aliens, qui vivent au moins 5000 ans. Ils ressemblent a des humains ordinaire, la seul chose qui les différencies c'est leurs vêtements et leurs attitudes très barbare.</div><!-- CONTENU GROUPE 3 --><div class="contenu_onglet" id="contenu_onglet_Kemonomimi"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/4vgc.png" />Contenu groupe Kemonomimi.</div><!-- CONTENU GROUPE 4  --><div class="contenu_onglet" id="contenu_onglet_Serpentaria"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/res3.png" />Contenu groupe Serpentaria.</div><!-- CONTENU GROUPE 5  --><div class="contenu_onglet" id="contenu_onglet_Ephinea"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/5y12.png" />Contenu groupe Ephinea.</div><!-- CONTENU GROUPE 6  --><div class="contenu_onglet" id="contenu_onglet_Ignis"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/02vs.png" />Contenu groupe Ignis.</div><!-- CONTENU GROUPE 7  --><div class="contenu_onglet" id="contenu_onglet_Jötunheim"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/xzdh.png" />Contenu groupe Jötunheim.</div><!-- GROUPE 8 --><div class="contenu_onglet" id="contenu_onglet_Morphic"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/ce48.png" />Contenu groupe Morphic.</div><!-- GROUPE 9 --><div class="contenu_onglet" id="contenu_onglet_Cyborg"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/apof.png" />Contenu groupe Cyborg.</div><!-- GROUPE 10 --><div class="contenu_onglet" id="contenu_onglet_Androïde"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/s2ve.png" />Contenu groupe Androïde.</div><!-- GROUPE 11 --><div class="contenu_onglet" id="contenu_onglet_Terre"><!-- IMAGE 200*150 --><img src="http://zupimages.net/up/15/43/ee4z.png" />Contenu groupe Terre.</div>

                </div>
            <script type="text/javascript">
                //<!--
                        var anc_onglet = 'PNJ';
                        change_onglet(anc_onglet);
                //-->
                </script>
        </div>
<!-- STATISTIQUES --><div class="stsQEEL"><!-- DERNIER INSCRIT --><div>Dernier inscrit :</div><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script><br/><!-- TOTAL MEMBRES --><div>Membres :</div><span id="tUSERS">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script><br/><!-- TOTAL MESSAGES --><div>Messages :</div><span id="tPOSTS">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script></div><!-- ANNIVERSAIRES --><div class="anvQEEL">Anniversaires<div><table>{L_WHOSBIRTHDAY_TODAY} {L_WHOSBIRTHDAY_WEEK}</table></div></div></div>

<!-- GROUPES --><div class="GQEEL"><div class="onglets"><!-- GROUPE 1 --><span class="onglet_0 onglet" id="onglet_PNJ" onmouseover="javascript:change_onglet('PNJ');" style="background:#635151;">PNJ</span><!-- GROUPE 2 --><span class="onglet_0 onglet" id="onglet_Asgard" onmouseover="javascript:change_onglet('Asgard');" style="background:#8F8300;">Asgard</span><!-- GROUPE 3 --><span class="onglet_0 onglet" id="onglet_Kemonomimi" onmouseover="javascript:change_onglet('Kemonomimi');" style="background:#9E397E">Kemonomimi</span><!-- GROUPE 4 --><span class="onglet_0 onglet" id="onglet_Serpentaria" onmouseover="javascript:change_onglet('Serpentaria');" style="background:#389900">Serpentaria</span><!-- GROUPE 5 --><span class="onglet_0 onglet" id="onglet_Ephinea" onmouseover="javascript:change_onglet('Ephinea');" style="background:#E6E6E6;">Ephinea</span><!-- GROUPE 6 --><span class="onglet_0 onglet" id="onglet_Ignis" onmouseover="javascript:change_onglet('Ignis');" style="background:#850000;">Ignis</span><!-- GROUPE 7 --><span class="onglet_0 onglet" id="onglet_Jötunheim" onmouseover="javascript:change_onglet('Jötunheim');" style="background:#4A89B3;">Jötunheim</span><!-- GROUPE 8 --><span class="onglet_0 onglet" id="onglet_Morphic" onmouseover="javascript:change_onglet('Morphic');" style="background:#FA5858;">Morphic</span><br/><br/><!-- GROUPE 9 --><span class="onglet_0 onglet" id="onglet_Cyborg" onmouseover="javascript:change_onglet('Cyborg');" style="background:#5C4200;">Cyborg</span><!-- GROUPE 10 --><span class="onglet_0 onglet" id="onglet_Androïde" onmouseover="javascript:change_onglet('Androïde');" style="background:#3742B3;">Androïde</span><!-- GROUPE 11 --><span class="onglet_0 onglet" id="onglet_Terre" onmouseover="javascript:change_onglet('Terre');" style="background:#9C9C9C;">Terre</span>

</div></div></div></td></tr></table>
        <!-- END disable_viewonline -->

Votre unique erreur fut l'oubli de quelques lettres en l'appellation de l'onglet n°4 – corrigée en la présentation du code ci-dessus. L'immobilité se justifiait de l'oubli de la modification du code Javascript et je ne saurai à présent que me répandre d'excuses pour la perte de temps que vous éprouvâtes à la seule raison d'une négligence de ma part.

Petit problème avec le QEEL N°3. QEEL3JAV

Ces rectifications effectuées, vous constaterez par ailleurs l'ajout de balises entre les deux lignes de noms des groupes permettant un espacement plus conséquent entre ces dernières. Dusse l'esthétique vous disconvenir, il vous suffirait alors de supprimer les br disposés à l'avant du groupe 9.

Vous remerciant de votre signalement.
Revenir en haut Aller en bas
Akira..
Petit problème avec le QEEL N°3. Empty Mar 27 Oct - 12:59
Bonjour,

Je vous remercie de m'avoir aidé, de ce fait je comprends mieux mon erreur.
Cela marche parfaitement maintenant.

Je vous remercie encore une fois de votre aide précieuse.

Bonne journée.
Cordialement,

Akira.
Revenir en haut Aller en bas
Contenu sponsorisé
Petit problème avec le QEEL N°3. Empty
Revenir en haut Aller en bas
Page 1 sur 1
Vous ne pouvez pas répondre aux sujets dans ce forum