Sujets similaires

Dernière édition par Sara_y le Sam 22 Sep 2012, 13:22, édité 1 fois

Bonjour ^^

A peine arrivée et déjà avec des questions ^^" *PasTaper*
Voilà, je suis administratrice d'un forum de graphisme assez original; j'entends par là que lorsque nous réalisons un thème complet nous réalisons également le codage. Hors, je bloque complètement sur le codage d'un QEEL original...

Voici à quoi il devrait ressembler une fois fini :

Visuel:

J'ai essayé de le réaliser en suivant ce tutoriel [ici] mais je n'y parviens absolument pas :/

Voici mon début de code... en hide ^^"

Une âme charitable pour m'aider? Mise en place d'un QEEL un peu spécial [Résolu ^^] 1779901633

Mise en place d'un QEEL un peu spécial [Résolu ^^] 1779901633

Merci

Bonjour,

Etant au travail je ne peux pas trop me pencher sur ton problème mais je vais d'abord m'attaquer aux erreurs de structure ^^'

Il te faudrait étudier les bases du HTML, en attendant je te suggère d'aller lire ce tutoriel qui te donnera quelques règles à connaitre.

Ici nous sommes supposés travailler sur le Qui Est en Ligne de ton forum, donc entre les deux commentaires :
 et 
Qui se trouvent dans ton template index_body.

Ce template est lui même inclus dans un squelette composé de templates qui constituent, une fois assemblés, une page HTML complète.

En l’occurrence ici, tu dois te débarrasser de toute la partie "déclaration de document", "corps de document" et "fermeture de document", sans quoi tu crées une grave erreur structurelle dans ton code.

C'est à dire qu'il te faut retirer ceci :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>"QEEL"</title>

<style type="text/css">

/* Le CSS sera ici */

/*--- Mise en page de la page ---*/
body{
background: url(http://img4.hostingpics.net/pics/521493fondqeel.png);
width: 1093px;
height: 547px;
color:#666666;
font-family:Verdana;
font-size:12px;
}

/*--- Mise en page des textes d꤬ancheurs ---*/
p#eltDeclancheur aff1, aff2, aff3, aff4{
position: absolute;
margin-top: 5px;
margin-bottom: 10px;
}

/*---Mise en page du bloc ---*/
table#contenu{
background: url(http://img4.hostingpics.net/pics/521493fondqeel.png);
width: 1093px;
height: 547px;
}
/*--- Mise en page des titres ---*/
tr#contenu h1{
background: url(http://img11.hostingpics.net/pics/484756qeeltexte01.png);
max-width:80px;
max-height: 100px;
}
tr#contenu h1:hover{
background: url(http://img11.hostingpics.net/pics/982544qeeltexteselect01.png);
max-width: 80px;
max-height: 100px;
}
tr#contenu h1_actif{
background: url(http://img11.hostingpics.net/pics/484756qeeltexte01.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h2{
background: url(http://img11.hostingpics.net/pics/589139qeeltexte02.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h2:hover{
background: url(http://img11.hostingpics.net/pics/826755qeeltexteselect02.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h2_actif{
background: url(http://img11.hostingpics.net/pics/589139qeeltexte02.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h3{
background: url(http://img11.hostingpics.net/pics/514118qeeltexte04.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h3:hover{
background: url(http://img11.hostingpics.net/pics/880687qeeltexteselect04.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h3_actif{
background: url(http://img11.hostingpics.net/pics/514118qeeltexte04.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h4{
background: url(http://img11.hostingpics.net/pics/843209qeeltexte03.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h4:hover{
background: url(http://img11.hostingpics.net/pics/480100qeeltexteselect03.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h4_actif{
background: url(http://img11.hostingpics.net/pics/843209qeeltexte03.png);
max-width: 80px;
max-height: 100px;
}

/*--- Mise en page des contenus ---*/
div#contenu div#contenu1, div#contenu div#contenu2, div#contenu div#contenu3, div#contenu div#contenu4{
width:500px;
margin:auto;
margin-bottom:10px;
height:100px;
overflow-y:auto;
}

</style>
<script type="text/javascript" src="http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" >

</script>

</head>
<body>

Et ceci :

Code:: </body>
</html>

Ton code "effacé" contient aussi un script javascript, et du CSS. Il te faut récupérer ces codes pour les mettre ailleurs.

La partie CSS doit être placée dans ton panneau admin, onglet affichage » couleurs » feuille de style CSS :

Code:: /*--- Mise en page de la page ---*/
body{
background: url(http://img4.hostingpics.net/pics/521493fondqeel.png);
width: 1093px;
height: 547px;
color:#666666;
font-family:Verdana;
font-size:12px;
}

/*--- Mise en page des textes d꤬ancheurs ---*/
p#eltDeclancheur aff1, aff2, aff3, aff4{
position: absolute;
margin-top: 5px;
margin-bottom: 10px;
}

/*---Mise en page du bloc ---*/
table#contenu{
background: url(http://img4.hostingpics.net/pics/521493fondqeel.png);
width: 1093px;
height: 547px;
}
/*--- Mise en page des titres ---*/
tr#contenu h1{
background: url(http://img11.hostingpics.net/pics/484756qeeltexte01.png);
max-width:80px;
max-height: 100px;
}
tr#contenu h1:hover{
background: url(http://img11.hostingpics.net/pics/982544qeeltexteselect01.png);
max-width: 80px;
max-height: 100px;
}
tr#contenu h1_actif{
background: url(http://img11.hostingpics.net/pics/484756qeeltexte01.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h2{
background: url(http://img11.hostingpics.net/pics/589139qeeltexte02.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h2:hover{
background: url(http://img11.hostingpics.net/pics/826755qeeltexteselect02.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h2_actif{
background: url(http://img11.hostingpics.net/pics/589139qeeltexte02.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h3{
background: url(http://img11.hostingpics.net/pics/514118qeeltexte04.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h3:hover{
background: url(http://img11.hostingpics.net/pics/880687qeeltexteselect04.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h3_actif{
background: url(http://img11.hostingpics.net/pics/514118qeeltexte04.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h4{
background: url(http://img11.hostingpics.net/pics/843209qeeltexte03.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h4:hover{
background: url(http://img11.hostingpics.net/pics/480100qeeltexteselect03.png);
max-width: 80px;
max-height: 100px;
}
div#contenu h4_actif{
background: url(http://img11.hostingpics.net/pics/843209qeeltexte03.png);
max-width: 80px;
max-height: 100px;
}

/*--- Mise en page des contenus ---*/
div#contenu div#contenu1, div#contenu div#contenu2, div#contenu div#contenu3, div#contenu div#contenu4{
width:500px;
margin:auto;
margin-bottom:10px;
height:100px;
overflow-y:auto;
}

Tu dois ensuite aller dans l'onglet modules de ton panneau admin puis "gestion des codes javascripts" (vérifie que les codes javascript sont activés sur ton forum) et créer deux nouveaux fichiers (en ne cochant que la case "sur l'index")

Le premier devra contenir LE CONTENU de ce fichier : http://s3.archive-host.com/membres/up/1696114791/java/accordeon_effet.js

Le deuxième devra contenir ceci :

Code:: function changeInfos(elem){
var info_element = elem;

if(info_element == "aff1"){ /* J'affiche le contenu 1 */
document.getElementById("contenu1").style.display = "inline";
document.getElementById("contenu2").style.display = "none";
document.getElementById("contenu3").style.display = "none";
document.getElementById("contenu4").style.display = "none";
}else if(info_element == "aff2"){ /* J'affiche le contenu 2 */
document.getElementById("contenu1").style.display = "none";
document.getElementById("contenu2").style.display = "inline";
document.getElementById("contenu3").style.display = "none";
document.getElementById("contenu4").style.display = "none";
}else if(info_element == "aff3"){ /* J'affiche le contenu 3 */
document.getElementById("contenu1").style.display = "none";
document.getElementById("contenu2").style.display = "none";
document.getElementById("contenu3").style.display = "inline";
document.getElementById("contenu4").style.display = "none";
}
}else if(info_element == "aff4"){ /* J'affiche le contenu 4 */
document.getElementById("contenu1").style.display = "none";
document.getElementById("contenu2").style.display = "none";
document.getElementById("contenu3").style.display = "none";
document.getElementById("contenu4").style.display = "inline";
}
}

Une fois que tu auras fait tout ça, donne nous ton template index_body qui devrait maintenant être un peu plus correct, et on pourra t'aider à corriger tes soucis.

Zioup ^^
Milles mercis de te pencher sur mon problème ^^"

En faite, je n'ai pas mis mon template ci-dessus il s'agissait d'une page HTML réalisée sur NotePad++

Donc, sur le forum test, j'ai mis le CSS à sa place, le Java à sa place... par contre je ne suis absolument pas sûre d'avoir rédiger le template correctement :/

Voilà ce que ça donne :

Code:: 
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" id="qeel">
<p id="eltDeclancheur">
<span onmouseover="changeInfos('aff1');this.style.cursor='pointer'"><img src="http://img11.hostingpics.net/pics/484756qeeltexte01.png"/></span> - <span onmouseover="changeInfos('aff2');this.style.cursor='pointer'"><img src="http://img11.hostingpics.net/pics/589139qeeltexte02.png"/></span> - <span onmouseover="changeInfos('aff3');this.style.cursor='pointer'"><img src="http://img11.hostingpics.net/pics/514118qeeltexte04.png"/></span> - <span onmouseover="changeInfos('aff4');this.style.cursor='pointer'"><img src="http://img11.hostingpics.net/pics/843209qeeltexte03.png"/></span>
</p>
<table id="contenu">
<tr>
<td id="contenu1">

<h1>Statistiques</h1>
<p>{TOTAL_POSTS}<br />
   {TOTAL_USERS}<br />
   {RECORD_USERS}<br />
   <br />
   {LOGGED_IN_USER_LIST}<br/>
   {L_CONNECTED_MEMBERS}</p>
   </td>
<td id="contenu2" style="display:none;">

<h2>Qui est en ligne?</h2>
<p>{TOTAL_USERS_ONLINE}</p>
   </td>
<td id="contenu3" style="display:none;">

<h3>Anniversaires</h3>
<p>{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}</p>
</td>
<td id="contenu4" style="display:none;">

<h4>Nouveaux membres</h4>
<p>{NEWEST_USER}</p>
   </td>
   </tr>
</table>
<tr>
   <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
</tr>

<tr>
   <td class="row1">
      <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
         
         <div id="chatbox_popup"></div>
         <script type="text/javascript">
         //<![CDATA[
         insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
         //]]>
         </script>
         
      </span>
   </td>
</tr>

</table>

Et voilà le forum test sous hide

-> En faite, je ne parviens pas à dire au code que telle image doit se trouver à telle place et que tel texte doit apparaître quand on clique sur telle image... Embarassed

Encore merci pour ton aide Very Happy

Bonjour !
Est-ce que cela signifie que le problème est résolu ? Merci de le signaler en ajoutant "Résolu" au titre du sujet ou encore, en le signalant directement. Smile

Bonne journée, Mise en place d'un QEEL un peu spécial [Résolu ^^] 926145

Hou là Melone il faudrait quand même lire le contenu du sujet avant de poster ton message XD

Sara > Désolée du coup pour mon superbe enfonçage de porte ouverte, je croise rarement des membres qui prennent la peine de préparer leur code sur une page HTML à part XD (cela dit j'approuve ta démarche)

Pour ton test est ce que tu as essayé, toujours sur une page à part, de tenter de coder une version "simple" de ton QEEL ? Genre juste deux onglets, un contenu au hasard, et tenter de mettre en application ton idée ?

D'ailleurs, ce sont des onglets que tu veux, ou bien des infobulles ?

Sinon, il va te falloir revoir ton HTML (et un cours sur les tableaux HTML), toute la partie entre le premier <table ... > et le premier </table> est 'fausse' : tu as mis du contenu en dehors d'une cellule ^^'

@Melone : nop l'aide n'est pas terminée elle ne fait que commencer x)
@Christa' : aucuns soucis lol ^^ je dois remercier Miettes pour l'initiative de la page HTML à part ^^

Bref, pour en revenir à notre QEEL : la graphiste qui a eu l'idée de ce codage voyait plus un système d'infobulles... le truc c'est que je n'en ai jamais fait ^^"
Du coup, je ne sais absolument pas comment faire en sorte que quand je passe ma souris sur "Anniversaires" une infobulle s'ouvre sur le dessus avec les informations demandées :/

Oui oui on a des idées assez tordues sur notre forum Embarassed

Donc si je veux des infobulles il faut que je revoies toute la partie HTML?

En fait la difficulté réside surtout sur le positionnement des différents textes, moi je te suggèrerais de procéder par étapes. Pour commencer, les infobulles. Tu trouveras un tutoriel à ce sujet par ici (ne t'occupe pas de la deuxième partie du tutoriel sur les images réactives)

Pour le moment contente toi d'un truc basique, (et accessoirement fais des images plus petites, elles sont pleines de vide autour du texte et tu n'en auras plus besoin - de ce vide - après que je t'aurai expliqué ma technique), qui ressemble grosso modo à ça :

Code:: <div class="MonQeel">
<div class="ImageInfobulle"> Ici l'image statistiques et l'effet infobulle </div>
<div class="ImageInfobulle"> Ici l'image anniversaires et l'effet infobulle </div>
<div class="ImageInfobulle"> Ici l'image qui est en ligne et l'effet infobulle </div>
<div class="ImageInfobulle"> Ici l'image nouveaux membres et l'effet infobulle </div>
</div>

Pas de placement d'images ni de CSS particulier, juste une image -> une infobulle, ensuite on verra ^^

Oki donc là pour l'instant chez moi ça donne ceci :

Template:

&&

CSS:

Attention, le position: center; est faux, c'est position:absolute; (et tu n'étais pas sensée y toucher). Si tu veux centrer le contenu de l'infobulle c'est text-align:center; qu'il te faudra rajouter.

Tu n'as pas non plus besoin de mettre un tableau vu que toutes les cellules sont les unes en dessous des autres '_' Tu n'as qu'à utiliser des div, ça sera plus propre.

Par contre, ATTENTION, la variable {TOTAL_USERS_ONLINE} ainsi que les deux pour l'affichage des anniversaires doivent impérativement être encadrées par des balises <table>, je t'invite à aller lire ce sujet pour comprendre pourquoi.

En faite, avec le "position" je voulais surtout que le QEEL en lui-même sois centré et pas nécessairement le texte.

Pour le tableau c'est parce que si on regarde après mes variables on voit un tr suivi d'un td... du coup je me suis dit qu'il fallait bien que le tableau commence quelque part ^^"

Bref, je vais modifier tout cela de ce pas Embarassed

Je t'expliquerai plus tard comment centrer ton QEEL c'est pas en inventant des valeurs CSS que tu y arriveras XD

J'attends de voir le résultat de tes bidouillages Wink

Zioup ^^

Voici donc le

Template:

&& le

CSS:

Plop !

Une semaine plus tard, me revoici pour me pencher sur la question (en semaine je n'ai pas toujours le temps de me pencher sur de gros trucs)

Alors déjà ça me semble mieux. Je ne vais pas trop épiloguer, je suis fatiguée ce soir, mais voici comment faire pour positionner tes différents "boutons" :

• En premier lieu, rajoute un position:relative; à la classe .qeel (tu peux retirer le div dans div.qeel, il n'est pas utile ici). Tu peux aussi en profiter pour fixer la hauteur à 547px vu que c'est la hauteur de l'image. Accessoirement, même si ce n'est pas très utile ici, pour centrer un bloc, plutôt que <center>, il faut rajouter des marges automatiques margin:auto (ou margin : 5px auto si tu veux rajouter des marges en haut et en bas)

• En second lieu, tu dois mettre le sélecteur div.infobulle en position absolue (remplacer relative par absolute, bien sûr)

• Partant de là, tu vas devoir faire un truc un peu plus technique. Prenons l'exemple du premier bloc infobulle (Statistiques) :

Code:: <div class="infobulle">
<img src="http://img11.hostingpics.net/pics/488243484756qeeltexte01.png" alt="Statistiques" />
<div>{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}<br/>
<table>{L_CONNECTED_MEMBERS}</table></div>
</div>

Tu vas lui attribuer une nouvelle classe en plus de "infobulle", par exemple infoStats :

Code:: <div class="infobulle infoStats">
<img src="http://img11.hostingpics.net/pics/488243484756qeeltexte01.png" alt="Statistiques" />
<div>{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}<br/>
<table>{L_CONNECTED_MEMBERS}</table></div>
</div>

Comme on peut associer plusieurs classes, tu la mets juste après infobulle dans le code.

Il te faut une nouvelle classe de ce genre par bloc infobulle, pour pouvoir les distinguer les uns des autres. Une fois que c'est fait, il va falloir les positionner par rapport au bloc de classe .qeel. Pour ça, tu as besoin des propriétés css top (ou bottom) et left (ou right). Ca permettra de positionner ton bloc au pixel près par rapport aux bords du bloc "conteneur" (par rapport aux bords de ton image de qeel au final).

Dans le cas de l'image des statistiques, ce sera donc :

Code:: .infoStats {
top:190px;
left:250px;
}

Je te laisse faire la suite maintenant Wink

Mille fois merci pour ton aide qui m'a été d'un grand secours!
Tout est en place Very Happy

Je te laisse juger par toi-même :

CSS:

Template:

Encore un énorme merci Very Happy

Heu, non, je t'avais dit de mettre les infobulles en absolu :

Code:: div.infobulle {
position: relative; /* on définit le bloc comme élément de référence */
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/;
}

qui devient :

Code:: div.infobulle {
position: absolute; /* on définit le bloc comme élément de référence */
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/;
}

Ca marche presque malgré tout, mais du coup les infobulles apparaissent même quand tu ne mets pas ta souris au dessus du texte, ce qui peut être très handicapant.

Mouarf j'avais oublié ce détail, c'est modifié Very Happy

Le sujet portant l'indication "Résolu", je me permets de déplacer. Very Happy

Si jamais tu en avais toujours besoin, n'hésite pas à MP un modérateur pour le replacer.

Merci. Smile

Mise en place d'un QEEL un peu spécial [Résolu ^^]

Mise en place d'un QEEL un peu spécial [Résolu ^^]

Sujets similaires

Sujets similaires

Partenaires Or