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! |
| QEEL => infobulle & texte [résolu] | |
| Maguitte2008
{ Membre }
Messages : 151
| Bonjour,
J'ai mis en place mon QEEL, je voudrais rajoutée des infos bulles sur les différent nom de groupe avec seulement du texte. J'en sus malheureusement incapable. J'aimerai également changé e texte (nos membres ont posté - etc...) Comment fait-on ? (j'ai recherché en vain)
Voilà mon template en hide.
|
Dernière édition par Maguitte2008 le Ven 28 Sep 2012, 13:20, édité 1 fois | |
| | | 'Christa
Lostmindy
Messages : 2856
| Bonjour !
Toutes tes interrogations trouvent une réponse dans les tutoriels de CSSActif : Modifier les phrases du qui est en ligne Créer une infobulle
Fais tes propres essais et reviens une fois que tu auras produit quelque chose par toi même, nous pourrons ensuite t'aiguiller sur la bonne route si tu as perdu ton chemin ! Bon courage ! | | |
| | | Maguitte2008
{ Membre }
Messages : 151
| Merci beaucoup ! Je fais les infobulles mais celle ci n'apparaissent plus depuis que j'ai essayer de mettre mon texte à la ligne. Voici le CSS puis la partie du template concernée. Merci d'avance pour votre aide ! - Code:
-
/* ======================================================= MISE EN FORME DES INFOBULLES ======================================================= DEBUT DU 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*/ }
div.infobulle > div{ display: none; /* ceci masque l'infobulle */ }
div.infobulle:hover { background: none; /* correction d'un bug IE */ z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */ }
/* Lorsqu'on survole le contenu du bloc */ div.infobulle:hover > div{ display: block; /* ceci affiche l'infobulle (on peut aussi utiliser inline au lieu de block) */
/* on positionne notre infobulle par rapport au bloc conteneur */ position: absolute; top: 5px; /* 5px par rapport au haut du bloc .infobulle */ left: 15px; /* 15 px par rapport à la gauche du bloc .infobulle */
/* Et puis on rajoute tous les éléments de mise en forme de l'infobulle */ background: #ebebeb; /* arrière-plan de l'infobulle */ color: black; /* texte dans l'infobulle */ padding: 3px; /* marges internes par rapport aux bords */ /* bordures de votre infobulle*/ border: 1px dotted black; } /* ======================================================= MISE EN FORME DES INFOBULLES ======================================================= FIN DU CODE ======================================================= */ - Code:
-
<!-- ======================================================= MISE EN FORME PERSONNALISEE DU QUI EST EN LIGNE Code proposé par Miki sur CSSActif Correction par CSSActif - http://www.css-actif.com ======================================================= DEBUT DU CODE PARTIE 1 & 2 ======================================================= --> <div class="Qeel"> <div class="QeelMain"> <div class="ListeGroupes"> <a href="http://forum-guerredesclans.forumactif.com/g1-administrateurs" class="groupe1">Administrateurs</a> <img src="URL_IMG_SEPARATION" alt="" /> <!--Infobulle administrateurs--> <div class="infobulle"> <div> <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcScWFm5a6kq9vbEJBj6DA8aESToggmUDi5xm3MZSM3ZPs_3H6a8" alt="gendarme" /> <a href="http://forum-guerredesclans.forumactif.com/g1-administrateurs">Clique ici, si tu veux savoir qui sont les gendrames.</a></div> </div> <a href="http://forum-guerredesclans.forumactif.com/g2-moderateurs" class="groupe2">Modérateurs</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://forum-guerredesclans.forumactif.com/g3-clan-du-ciel" class="groupe3">Clan du Ciel</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://forum-guerredesclans.forumactif.com/g4-clan-de-la-terre" class="groupe4">Clan de la Terre</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://forum-guerredesclans.forumactif.com/g5-clan-du-sable" class="groupe5">Clan du Sable</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://forum-guerredesclans.forumactif.com/g8-clan-des-rocs" class="groupe6">Clan du Roc</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://forum-guerredesclans.forumactif.com/g9-clan-des-etoiles" class="groupe7">Clan des Etoiles</a> <img src="URL_IMG_SEPARATION" alt="" /> <a href="http://forum-guerredesclans.forumactif.com/g6-solitaires" class="groupe8">Solitaires et Domestiques </a> </div> <div class="LesStatistiques"> <span class="gensmall"><span id="TotalMessages">{TOTAL_POSTS}</span>. <span id="TotalMembres">{TOTAL_USERS}</span></span> <br /> <span class="gensmall"><span id="DernierInscrit">{NEWEST_USER}</span></span> </div> <div class="MembresOnline"> <span class="gensmall"><span id="TotalUsersOnline">{TOTAL_USERS_ONLINE}</span></span> <br /> <span class="gensmall">{LOGGED_IN_USER_LIST}</span> </div> </div> <div class="Historique"><table class="Liste24h">{L_CONNECTED_MEMBERS}</table></div> <img src="URL_IMG_BAS" alt="" /> </div> <!-- ======================================================= MISE EN FORME PERSONNALISEE DU QUI EST EN LIGNE (END) PARTIE 1 ======================================================= --> <script type="text/javascript"> document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/utilisateur en ligne/,"chat présent sur le forum"); document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/utilisateurs en ligne/,"chats présents sur le forum"); document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Enregistré/,"chat"); document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Enregistrés/,"chats"); document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Invisible et/,"solitaire,"); document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Invisibles et /,"solitaires,"); document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Invité/,"humain"); document.getElementById('TotalUsersOnline').innerHTML=document.getElementById('TotalUsersOnline').innerHTML.replace(/Invités/,"humains"); document.getElementById('TotalMembres').innerHTML=document.getElementById('TotalMembres').innerHTML.replace(/Nous avons/,"Notre forum compte"); document.getElementById('TotalMembres').innerHTML=document.getElementById('TotalMembres').innerHTML.replace(/membre enregistré/,"chat inscrit"); document.getElementById('DernierInscrit').innerHTML=document.getElementById('DernierInscrit').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier chaton est"); document.getElementById('TotalMessages').innerHTML=document.getElementById('TotalMessages').innerHTML.replace(/Nos membres ont posté un total de/,"Nous comptons déjà un total de"); </script> <!-- ======================================================= MISE EN FORME PERSONNALISEE DU QUI EST EN LIGNE (END) PARTIE 2 ======================================================= --> | | |
| | | 'Christa
Lostmindy
Messages : 2856
| Hello, Je ne comprends pas, le seul endroit où il semble y avoir une infobulle est le suivant : - Code:
-
<div class="infobulle"> <div> <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcScWFm5a6kq9vbEJBj6DA8aESToggmUDi5xm3MZSM3ZPs_3H6a8" alt="gendarme" /> <a href="http://forum-guerredesclans.forumactif.com/g1-administrateurs">Clique ici, si tu veux savoir qui sont les gendrames.</a></div> </div> Et le problème est assez évident en principe si on a compris le tutoriel '_' | | |
| | | Espeon
Administrateur
Messages : 1819
| - 'Christa a écrit:
- Hello,
Je ne comprends pas, le seul endroit où il semble y avoir une infobulle est le suivant : - Code:
-
<div class="infobulle"> <div> <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcScWFm5a6kq9vbEJBj6DA8aESToggmUDi5xm3MZSM3ZPs_3H6a8" alt="gendarme" /> <a href="http://forum-guerredesclans.forumactif.com/g1-administrateurs">Clique ici, si tu veux savoir qui sont les gendrames.</a></div> </div> Et le problème est assez évident en principe si on a compris le tutoriel '_' Je confirme, Maguitte2008 rejette un oeil sur le tutoriel et tu trouvera l'origine de ton erreur, c'est très bien expliqué (mais prends la peine de le lire ). | | |
| | | Maguitte2008
{ Membre }
Messages : 151
| encore merci de me guider, en faite, je n'avais pas bien saisi le sens du tutoriel. Maintenant j'ai quelques autre problème : 1) Mon infobulle s'ouvre plus loin que l'endroit où se trouve le texte : Comment puis-je faire ? / Où puis-je trouvée la solution ? 2)Je n'arrive pas à mettre mon texte en dessous de l'autre, même avec le tutoriel. 3) Dès que je passe ma souris sur n'importe quel texte, mon infobulle s'ouvre. Voilà, en hide le forum sur lequel je test mes codes :
| | |
| | | Maguitte2008
{ Membre }
Messages : 151
| Désolé du double post, je viens de me rendre compte que je n'ai pas mis le template que voià (en hide bien sûr)
| | |
| | | 'Christa
Lostmindy
Messages : 2856
| Il y a toujours un problème ! Tu devrais le code comme des boites l'une dans l'autre. Tu as une boite qui en contient une autre quand on l'ouvre : l'infobulle. - Code:
-
<div class="infobulle"> Une image à cliquer (ou un texte) <div> Le contenu qui apparait </div> </div> Regarde le code tel que tu l'as écrit : - Code:
-
<!--Infobulle administrateurs--> <div class="infobulle"> <a href="http://forum-guerredesclans.forumactif.com/g1-administrateurs" class="groupe1">Administrateurs</a> <img src="URL_IMG_SEPARATION" alt="" /> <div><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTL00vsgFXgbsqlAx7xQ4aM8iemUz5mxbPOMJ7yqQQx2dWuspy" alt="nom de l'image" /> <a href="http://forum-guerredesclans.forumactif.com/privmsg?mode=post&u=1">Envoie un message au responsabe du groupe !</a> <a href="mailto:lorraine.clement@yahoo.fr">Envoie un mail au responsabe du groupe !</a> </div> Ton texte à survoler, c'est celui là : - Code:
-
<a href="http://forum-guerredesclans.forumactif.com/g1-administrateurs" class="groupe1">Administrateurs</a> <img src="URL_IMG_SEPARATION" alt="" /> Et le contenu qui doit apparaitre, c'est celui là : - Code:
-
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTL00vsgFXgbsqlAx7xQ4aM8iemUz5mxbPOMJ7yqQQx2dWuspy" alt="nom de l'image" /> <a href="http://forum-guerredesclans.forumactif.com/privmsg?mode=post&u=1">Envoie un message au responsabe du groupe !</a> <a href="mailto:lorraine.clement@yahoo.fr">Envoie un mail au responsabe du groupe !</a> (Soit dit en passant montrer ton adresse mail de façon aussi visible, en particulier avec ton nom et prénom, est relativement dangereux...) Maintenant regarde le code sans ces deux parties : - Code:
-
<div class="infobulle"> <!-- ici le contenu à survoler pour faire apparaitre l'infobulle --> <div> <!-- ici le contenu qui s'affichera --> </div> Ne vois-tu pas ton erreur ? Une des boites a perdu son couvercle... | | |
| | | Maguitte2008
{ Membre }
Messages : 151
| Merci de ton aide, je ferai plus attention la prochaine fois, et ce n'est pas mon adresse e-mail, mais celle du la fondatrice. =} [qui me l'a demandée] | | |
| | | Psycho
Psychopathe
Messages : 3407
| Hello (: Puisque le problème est résolu, je déplace (: Peut être peux-tu lui conseiller dans ce cas de choisir une autre adresse, car effectivement on connait les dangers d'internet malheureusement ._. En tout cas, merci de l'avoir signalé | | |
| | | Contenu sponsorisé
| | | | | QEEL => infobulle & texte [résolu] | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|