Mise en place d'un QEEL un peu spécial [Résolu ^^]  Bouton_activeMise en place d'un QEEL un peu spécial [Résolu ^^]  Bouton_hoverMise en place d'un QEEL un peu spécial [Résolu ^^]  Fb-hoverMise en place d'un QEEL un peu spécial [Résolu ^^]  Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 11 Fév 2023, 06:04 par Krager

-17%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS + Cellular 44mm (plusieurs ...
249 € 299 €
Voir le deal

Partagez
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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
Merci Very Happy


Dernière édition par Sara_y le Sam 22 Sep 2012, 13:22, édité 1 fois
MessageSujet: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyMer 12 Sep 2012, 09:27
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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 :
<!-- BEGIN disable_viewonline --> et <!-- END disable_viewonline -->
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" >
<!--

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";
  }
}

-->
</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.
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyJeu 13 Sep 2012, 05:01
Revenir en haut Aller en bas
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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:
<!-- BEGIN disable_viewonline -->
          <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">
      <!-- Le contenu affich顡u survol de l'element declancheur 1 -->
      <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;">
      <!-- Le contenu affich顡u survol de l'ꭥment d꤬ancheur 2 -->
      <h2>Qui est en ligne?</h2>
      <p>{TOTAL_USERS_ONLINE}</p>
     </td>
  <td id="contenu3" style="display:none;">
      <!-- Le contenu affich顡u survol de l'ꭥment d꤬ancheur 3 -->
      <h3>Anniversaires</h3>
      <p>{L_WHOSBIRTHDAY_TODAY}
   {L_WHOSBIRTHDAY_WEEK}</p>
   </td>
  <td id="contenu4" style="display:none;">
      <!-- Le contenu affich顡u survol de l'ꭥment d꤬ancheur 4 -->
      <h4>Nouveaux membres</h4>
      <p>{NEWEST_USER}</p>
     </td>
     </tr>
</table>
   <tr>
      <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->
   <tr>
      <td class="row1">
         <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <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>
            <!-- END switch_chatbox_popup -->
         </span>
      </td>
   </tr>
   <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

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
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyVen 14 Sep 2012, 03:32
Revenir en haut Aller en bas
Melone
Melone
{ Modérateur }
{ Modérateur }

Féminin Messages : 805



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyVen 14 Sep 2012, 06:04
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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 ^^'
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyVen 14 Sep 2012, 07:03
Revenir en haut Aller en bas
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
@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?
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyVen 14 Sep 2012, 13:57
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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 ^^
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyVen 14 Sep 2012, 15:41
Revenir en haut Aller en bas
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
Oki donc là pour l'instant chez moi ça donne ceci :

Template:

&&

CSS:

MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 15 Sep 2012, 05:43
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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.
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 15 Sep 2012, 09:31
Revenir en haut Aller en bas
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 15 Sep 2012, 14:38
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 15 Sep 2012, 14:47
Revenir en haut Aller en bas
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



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

Voici donc le
Template:

&& le

CSS:
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyLun 17 Sep 2012, 05:02
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyVen 21 Sep 2012, 13:58
Revenir en haut Aller en bas
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 22 Sep 2012, 13:22
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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.
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptySam 22 Sep 2012, 13:29
Revenir en haut Aller en bas
http://actif-help.probb.fr
Sara_y
Sara_y
{ Membre }
{ Membre }

Féminin Messages : 15



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
Mouarf j'avais oublié ce détail, c'est modifié Very Happy
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyLun 24 Sep 2012, 03:48
Revenir en haut Aller en bas
http://www.school-of-pub.net/forum.htm
Murtagh
Murtagh
{ Modérateur }
{ Modérateur }

Masculin Messages : 1492



Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
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
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  EmptyLun 24 Sep 2012, 08:15
Revenir en haut Aller en bas
Contenu sponsorisé




Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
MessageSujet: Re: Mise en place d'un QEEL un peu spécial [Résolu ^^]    Mise en place d'un QEEL un peu spécial [Résolu ^^]  Empty
Revenir en haut Aller en bas
 

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Problème de QEEL lors de la mise en place sur un autre forum
» Mise en place boutons dans colonne "dernier message" | Résolu
» [Résolu] Est-il possible de changer le QEEL de place ?
» Mise en place d'une fiche pub
» Problème mise en place de mes sous forum

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit