Ajout de groupes avec infobulles à mon qeel

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Ven 20 Juil 2012 - 20:08

Bonjour/bonsoir Very Happy

Donc aujourd'hui je bloque sur un gros problème .. l'affichage de mes groupes Mad
J'ai un qeel normal .. avec juste une image, et là je me rend compte que j'avais oublié de mettre mes groupes Embarassed Donc un peu le flemme de refaire l'image du qeel, je décide de mettre mes groupes juste au dessus de celle ci. Et comme moi et les infobulles ca fait ... 1000, bah je bloque carrément xD

Bref, mon problème est simple, je voudrais juste mettre mes groupes alignés, parce que là ils sont l'un au dessous de l'autre. comme vous pouvez le voir ici : http://pooop-s.forumgratuit.org/forum.
Bon j'ai déjà réussi à faire des infobulles Cool Mais je voudrais aussi qu'elles aient un effet de transition lors du survol.

Mon template:

Code:
<!-- BEGIN disable_viewonline -->
<center>
  <span class="infobulle"><div class="groupes"><a href="URL">débutant</a></div><span class="infobulle-hidden">Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis.</span>
</span>
  <span class="infobulle"><div class="groupes"><a href="URL">futur apprenti</a></div><span class="infobulle-hidden">Des bases manquant de travail, aucun approfondissement et pas de finitions.</span>
</span>
  <span class="infobulle"><div class="groupes"><a href="URL">apprenti</a></div><span class="infobulle-hidden">Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades.</span>
</span>
  <span class="infobulle"><div class="groupes"><a href="URL">futur grapheur</a></div><span class="infobulle-hidden">Maîtrise des bases. Fond, inscrutation et écritures bien réalisées, mais pouvant être amélioré.</span>
</span>
  <span class="infobulle"><div class="groupes"><a href="URL">grapheur</a></div><span class="infobulle-hidden">Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions.</span>
</span>
    <span class="infobulle"><div class="groupes"><a href="URL">professionnel</a></div><span class="infobulle-hidden">La perfection (Incrustation, Typographie, Finitions, Originalité, Travail ...)</span>
</span>
    <span class="infobulle"><div class="groupes"><a href="URL">directrices</a></div><span class="infobulle-hidden">Comme le nom l'indique, elle dirigent le forum. Ouvre les nouveautés et annonces.</span>
    </span>
 
<table cellspacing="2" cellpadding="2" width="750" style="background: url('http://img15.hostingpics.net/pics/528068qeel.png'); width: 750px; height: 477px;">
<tbody><tr><td><div class="tableqeel1"><span class="gensmall"><div style="font-size: 11px; line-height: 12px; text-align: justify;"><br>
<span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"personnes inscrites sur Graph Perle,");</script></span> <span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres ont posté un total de/,"qui aiment taper sur leurs claviers... Ils ont poster environ");</script></span>. <span id="newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La dernière personne à s'être inscrit sur GP est");</script></span>, nous lui souhaitons la bienvenue parmi nous !<br/>
<span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/ Enregistré/," grapheur(s)");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/, "sécheur(s) de cours");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/, "graph perlien(s)");</script></span> <br/>
<span id="onlineuser">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('onlineuser').innerHTML=document.getElementById('onlineuser').innerHTML.replace(/Utilisateurs enregistrés/,"Les grapheurs disponible en ce moment sur GP sont");</script></span>{RECORD_USERS}.</div></span></div></td>
     
  <td><div class="tableqeel2"><span class="gensmall"><div style="height: 110px; overflow: auto;">
<table cellspacing="2" cellpadding="2" align="center" style="text-align: justify;" class="listlastconnected">
  <tbody><tr><td class="row1">{L_CONNECTED_MEMBERS}</td></tr></tbody></table></div></span></div></td></center>
<!-- END disable_viewonline -->

CSS :

Code:
/*INFOBULLE QEEL*/
.infobulle{
  position: relative;}
 

.infobulle .infobulle-hidden {
  display: none;  position: absolute;    visibility: visible;  z-index: 999;
 background-color: rgba(241, 220, 154, 0.9);
box-shadow: 0px 0px 5px 5px rgba(241, 220, 154, 0.9);
 border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin-left: 80px;
  font-size: 11px;
color: #927D61;
width: 170px;
}

.infobulle:hover .infobulle-hidden {
  display: block;
 
 }
.groupes{font-size: 19px;
text-shadow: white 0px 2px 0px;
font-family: Georgia, serif;
font-weight: bold;
font-style: italic;
color: #ACA648;
text-transform: lowercase;
  letter-spacing: -1px;}

Merci beaucoup Thanks Thanks


Dernière édition par jiji98 le Ven 27 Juil 2012 - 23:26, édité 2 fois

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Sam 21 Juil 2012 - 15:15

Up Smile

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Elissa le Sam 21 Juil 2012 - 17:43

Coucou !

Mais je voudrais aussi qu'elles aient un effet de transition lors du survol.
Hum ? Mr. Green

Pour pouvoir aligner tes groupes l'un à côté de l'autre, tu dois les entourer de
Code:
<td></td>

C'est ce que j'ai fait, voilà ce que ça a adonné :

Code:
<!-- BEGIN disable_viewonline -->
<table style="text-align: center; width: 100%;" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td width="150" valign="top"><center><span class="infobulle"><div class="groupes"><a href="URL">débutant</a></div><span class="infobulle-hidden">Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis.</span>
</span></div></div></td>
  <td width="150" valign="top"><span class="infobulle"><div class="groupes"><a href="URL">futur apprenti</a></div><span class="infobulle-hidden">Des bases manquant de travail, aucun approfondissement et pas de finitions.</span>
</span></div></div></td>
  <td width="150" valign="top"><span class="infobulle"><div class="groupes"><a href="URL">apprenti</a></div><span class="infobulle-hidden">Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades.</span>
</span></div></div></td>
  <td width="150" valign="top"><span class="infobulle"><div class="groupes"><a href="URL">futur grapheur</a></div><span class="infobulle-hidden">Maîtrise des bases. Fond, inscrutation et écritures bien réalisées, mais pouvant être amélioré.</span>
</span></div></div></td>
  <td width="150" valign="top"><span class="infobulle"><div class="groupes"><a href="URL">grapheur</a></div><span class="infobulle-hidden">Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions.</span>
</span></div></div></td>
    <td width="150" valign="top"><span class="infobulle"><div class="groupes"><a href="URL">professionnel</a></div><span class="infobulle-hidden">La perfection (Incrustation, Typographie, Finitions, Originalité, Travail ...)</span>
</span></div></div></td>
    <td width="150" valign="top"><span class="infobulle"><div class="groupes"><a href="URL">directrices</a></div><span class="infobulle-hidden">Comme le nom l'indique, elle dirigent le forum. Ouvre les nouveautés et annonces.</span>
    </span></div></div></td>
 
<table cellspacing="2" cellpadding="2" width="750" style="background: url('http://img15.hostingpics.net/pics/528068qeel.png'); width: 750px; height: 477px;">
<tbody><tr><td><div class="tableqeel1"><span class="gensmall"><div style="font-size: 11px; line-height: 12px; text-align: justify;"><br>
<span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"personnes inscrites sur Graph Perle,");</script></span> <span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres ont posté un total de/,"qui aiment taper sur leurs claviers... Ils ont poster environ");</script></span>. <span id="newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La dernière personne à s'être inscrit sur GP est");</script></span>, nous lui souhaitons la bienvenue parmi nous !<br/>
<span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/ Enregistré/," grapheur(s)");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/, "sécheur(s) de cours");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/, "graph perlien(s)");</script></span> <br/>
<span id="onlineuser">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('onlineuser').innerHTML=document.getElementById('onlineuser').innerHTML.replace(/Utilisateurs enregistrés/,"Les grapheurs disponible en ce moment sur GP sont");</script></span>{RECORD_USERS}.</div></span></div></td>
   
  <td><div class="tableqeel2"><span class="gensmall"><div style="height: 110px; overflow: auto;">
<table cellspacing="2" cellpadding="2" align="center" style="text-align: justify;" class="listlastconnected">
  <tbody><tr><td class="row1">{L_CONNECTED_MEMBERS}</td></tr></tbody></table></div></span></div></td></center>
<!-- END disable_viewonline -->

Bon, ça a créé quelques problèmes d'affichages mais je pense que tu seras capable de régler ça seule Smile
(comme la position des infobulles, par exemple)

Dis-moi si l'alignement est juste ? ^^




Elissa
Modéractive
Modéractive

Féminin
Messages : 15848
Inscrit(e) le : 24/03/2006

Elissa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Sam 21 Juil 2012 - 19:29

Coucouu, merci beaucoup pour la réponse, ca marche nickel Very Happy

- Mais je voudrais aussi qu'elles aient un effet de transition lors du survol.
- Hum ? Very Happy

Oui je ne suis pas assez claire désolée, au fait j'aimerais avoir cette effet là pour l'affichage des infobulles : http://www.css3create.com/Infobulle-avec-effet-de-transparence-en-CSS . J'aimerais faire comme cette sorte de bulle qui apparait plus lentement Rolling Eyes

J'ai essayé de suivre le tuto mais ca ne marche pas ..

PS : ne serait ce pas Hayley williams sur votre vava et bannière :youopi:

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Dim 22 Juil 2012 - 18:33

up Smile

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Elissa le Lun 23 Juil 2012 - 13:11

Salut !

PS : ne serait ce pas Hayley williams sur votre vava et bannière
Si, c'est bien elle ! Tu as l'oeil Razz

Pour ton problème, pourrais-tu me donner le code que tu as obtenu pour que je zieute ça ? Smile




Elissa
Modéractive
Modéractive

Féminin
Messages : 15848
Inscrit(e) le : 24/03/2006

Elissa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Lun 23 Juil 2012 - 23:30

EDIT : J'ai finallement réussi à mettre des infobulles avec l'effet que je voulais, par contre j'ai mis des images Rolling Eyes

Et là j'ai un autre problème x) Y'a un très grand espace entre les images.. j'aimerais les rapprocher si c'est possible, et aussi est t'il possible de mettre une image de fond qui englobe toute la partie du groupe ?

Merci d'avance Thanks

Voilà mes codes :




Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Mar 24 Juil 2012 - 15:44

Up Smile

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Elissa le Mar 24 Juil 2012 - 16:12

Coucou,

Pour y ajouter un fond, c'est super simple ^^

Code:
<!-- BEGIN disable_viewonline -->
<table style="text-align: center; width: 100%; background: transparent url('LIEN IMAGE') no-repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" border="0" cellpadding="0" cellspacing="0" height="HAUTEUR" width="LARGEUR" border="0"><tbody><tr><td width="150" valign="top"><center><div class="transition-tfax">

Il suffisait juste d'ajouter un petite partie. Pour l'espace entre les cellules, je vais voir ce qu'on peut faire Smile




Elissa
Modéractive
Modéractive

Féminin
Messages : 15848
Inscrit(e) le : 24/03/2006

Elissa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Mar 24 Juil 2012 - 17:06

D'accord merci beaucoup Rolling Eyes

EDIT : Enorme bug ! Mdr, bon comme je ne peux pas rester sans rien faire, je sais pas pourquoi Laughing J'ai encore fais une gaffe Very Happy mdr !

Si vous allez visiter mon fofo, vous verrez le problème Embarassed Embarassed Embarassed Embarassed Embarassed Au fait j'arrive pas à mettre les groupes sur l'image des groupes.. Même s'ils ne sont pas bien alignés, juste qu'ils soient dans le cadre. Je ne sais pas pourquoi je change d'idée comme ca vite fait bounce

Encore désolée si je vous dérange I love you

voici mon code actuel, promis je n'y touche plus **


Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Mer 25 Juil 2012 - 15:24

Up !

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Jeu 26 Juil 2012 - 16:09

up

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Ven 27 Juil 2012 - 14:35

up Smile

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout de groupes avec infobulles à mon qeel

Message par Xibition le Ven 27 Juil 2012 - 23:26

Problème résolu, merci Smile

Xibition
****

Féminin
Messages : 457
Inscrit(e) le : 23/05/2011

Xibition a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum