| | Faire une infobulle (messages) |  |
|
|
 Jiben 
{ Membre actif }
 Messages : 314
 | Re, Oui c'est bon ! je vous en remercie beaucoup pour votre aide  | | |
|
| | |
Jiben
{ Membre actif }
Messages : 314
| Désoler du double poste mais j'ai un problème ! Mon infobulle passe en dessous dans autre groupes comment faire ? Voici une capture d'écran : - Spoiler:
| | |
|
| | |
N3k'
{ Membre }
Messages : 55
| Bonjour,
Pourquoi sa met dans l'infobulle (en haut) :admin ?
Le lien :
http://mes-tests.exprimetoi.net/index.htm
Html :
- Code:
-
<a href="profil.html" class="infobulle"><b>N</b>3k # <span><img src="http://1.bp.blogspot.com/_JnOvJqLtNdU/R8SqHxMLScI/AAAAAAAAAI8/ZJ5qB1hnJHg/s400/perso.jpg"><br><div> <a href="profil.html" target="_blank" class="profil">My ProfîîL</a></div><div> <a href="mp.html" target='_blank" class="mp">Mpeyy ?</a></div> </span>
J'ai pris le css de lilipad je n'ai rien modifier ! :')
J'aimerai avoir de l'aide micii ?! | | |
|
| | |
Kyou
{ Membre }
 Messages : 164
| Je voudrais savoir comment on peut faire le même genre d'infobulle que sur ce forum s'il vous plait é-è car j'aime beaucoup et j'aimerais faire pareil  | | |
|
| | |
nalexx-73
{ Membre }
Messages : 12
| Bah j'ai essayé mais je sais pas pourquoi l'infobulle s'affiche pas...y a l'image et le lien mais quand on passe dessu rien s'affiche. | | |
|
| | |
N3k'
{ Membre }
Messages : 55
| On peut mettre combien de class dans une infobulle ? J'ai mis ma premiere class : - Code:
-
<div class="pseudo></div> ensuite j'en mais une 2eme sa ne marche pu... EDIT Ikø': N'oublie pas de mettre la balise de code la prochaine fois, sinon il y a des problèmes d'affichages sur le forum ou on ne voit pas ton texte. | | |
|
| | |
Ikø' 
Pika'Ghøst
~ Maîtresse des pelles ~
Messages : 3193
| On peut en mettre plusieurs, suffit d'en créer une autre dans ton CSS~ Et tu as une erreur dans ton code, c'est ceci: - Code:
-
<div class="pseudo"></div> Nalexx-72: Passe nous ton code s'il te plait~ Si tu l'as déjà passé, il doit être dans la page précédente donc je ne l'ai pas vu Kyou: Il faut modifier le padding dans le code pour avoir la bonne position. Je ne te dirai pas exactement comment, parce que c'est un code du forum  Jiben: Moi aussi ça m'as déjà fait ça sur Explorer... je n'ai jamais réussi à trouver le moyen de le régler par contre ._. Si quelqu'un a la solution il peut venir ici =D | | |
|
| | |
N3k'
{ Membre }
Messages : 55
| |
| | |
N3k'
{ Membre }
Messages : 55
| J'arrive pas à éditer mais j'ai trouver dzl | | |
|
| | |
Jill
{ Membre }
Messages : 102
| Bonjour! D'abord, merci d'avoir créé ce forum, c'est dingue tout ce qu'on peut faire sur un forum *vient seulement de comprendre la capacité du css :cyclops: * Bref bref, je suis donc entrain de faire des infobulles, seulement, j'ai un petit problème d'affichage ^^" Aucun problème pour l'installation de l'infobulle, ça, ça marche nickel. Le seul truc, c'est à l'intérieur. Je voudrais avoir une marge sur les bords (entre le contenu et la bordure en fait), et surtout le principal problème, c'est que tout mon texte est souligné en rouge, et je ne comprend pas d'où ça vient  - Spoiler:
Et voila le code: html: - Code:
-
<a href="#" class="infobulleterra"><img src="http://i66.servimg.com/u/f66/11/36/78/50/terre210.gif" > <span>Âme servie: <font color="forestgreen">Terra</font><br><img src="http://i66.servimg.com/u/f66/11/36/78/50/terra_10.jpg" ><br> Meilleur disciple: <br><b>Endërya</b><div><a href="http://4elementsv4.forumactif.com/points-f82/les-comptes-du-continent-de-la-terre-t211.htm" target="_blank">Points</a></div></span></a> css: - Code:
-
a.infobulleterra {
position: relative;
}
a.infobulleterra span {
display: none;
}
a.infobulleterra:hover {
background: none;
z-index: 999;
}
a.infobulleterra:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 20px;
left: 20px;
background: #ebebeb;
color: black;
padding: 1px;
border: 1px dotted;
} Merci de votre aide par avance (le lien du forum: http://4elementsv4.forumactif.com/forum.htm ) [mais après ça se trouve, ça vient de mon code pourri (car complètement brouillon) de ma page d'accueil =_= help] | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Yep, ça vient du code de ta page d'accueil | | |
|
| | |
Jill
{ Membre }
Messages : 102
| Et zut, je vais vraiment devoir me remettre dessus O_o (nuits blanches, me voila xD) Merci de te réponse en tout cas ^^ Je suis quand même contente de n'avoir pas fait de fautes dans mon infobulle Et je vais surement aller poster dans les topics d'aide ^^" | | |
|
| | |
N3k'
{ Membre }
Messages : 55
| Une marge ?
Ptete margin-left....
Ou si tu veux agrandir ton cadre sans que tes mots s'agrandisent utilise padding ...
Je sais pas trop =S | | |
|
| | |
Jill
{ Membre }
Messages : 102
| Exact! Merci N3k' ! C'était le padding effectivement, j'avais mis que 1px ^^"
Il ne me reste plus qu'à ré-examiner le code de l'accueil --' | | |
|
| | |
foliuca
{ Membre }
Messages : 42
|
Merci 10000 fois pour ce tutos 
| | |
|
| | |
cristof
{ Membre }
Messages : 20
| Super clair, un grand Merci | | |
|
| | |
Milkiniz
{ Membre }
Messages : 88
| J'ai vite fait regardé les 9 pages sans trouvé ce que je cherchais. Je veux mettre une infobulle sur un mot mais ça ne fonctionne pas du tout >< Voici mon code : - Code:
-
[b]C[/b]hristopher [b]K[/b]ingston [b]W[/b]irk [i]Ft.[/i] <a href="#" class="infobulle"><img src="http://images2.fanpop.com/images/photos/8000000/Ed-W-3-ed-westwick-8068023-100-100.jpg">Ed Westw ick Et mon CSS : - Code:
-
a.infobulle {
position: relative;
}
a.infobulle span {
display: none; /* ceci masque l'infobulle */
}
a.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
a.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 5px; /* on positionne notre infobulle */
left: 15px;
background: #ebebeb; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 3px;
/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
} Et donc quand je publie mon message ça me met l'image et le mot sans l'infobulle... :/ | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Essaye ça : - Code:
-
div.infobulle {
position: relative;
}
div.infobulle span {
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}
div.infobulle:hover span {
display: inline; /* ceci affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 5px; /* on positionne notre infobulle */
left: 15px;
background: #ebebeb; /* arrière-plan de l'infobulle */
color: black; /* texte dans l'infobulle */
padding: 3px;
/* bordures de votre infobulle*/
border: 1px dotted black;
border-left: 1px dotted black;
} - Code:
-
<div class="infobulle">[b]C[/b]hristopher [b]K[/b]ingston [b]W[/b]irk [i]Ft.[/i]<span><div><img src="http://images2.fanpop.com/images/photos/8000000/Ed-W-3-ed-westwick-8068023-100-100.jpg" alt="" /><br />Ed Westw</span></div> Et ça devrait marcher | | |
|
| | |
Milkiniz
{ Membre }
Messages : 88
| Euh alors ça marche xD Mais un peut trop. Tout ce qu'il y avait après à été pris dans l'infobulle | | |
|
| | |
Lilith
{ Membre }
Messages : 251
| ça marche parfaitement merci =) | | |
|
| | |
keitaro
{ Membre }
Messages : 2
| Bonjour, alors mon infobulle fonctionne cependant en centrant le texte l'infobulle reste alignée à droite. Voici un apperçue : - Spoiler:
voici mon CCS : - Code:
-
a.infobulle {
position: relative;
}
a.infobulle span {
display: none;
}
a.infobulle:hover {
background: none;
z-index: 999;
}
a.infobulle:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 5px;
left: 15px;
background: #ebebeb;
color: black;
padding: 3px;
border: 1px dotted black;
border-left: 1px dotted black;
} et mon code HTML : - Code:
-
<a href="http://tlmg.forumotion.com/9658-etudiants-f2/shanty-t248.htm#1839" class="infobulle"><center>La Reine<span><div><img src="http://tlmg.forumotion.com/users/1912/50/74/40/avatars/20-43.jpg"><br>Shanty Waldorf</br></span></center></a> Je vous remercie d'avance | | |
|
| | |
BiiDERU
{ Membre }
Messages : 11
| Bonjour , je n'ai pas du tout compris lol ><
Moi je voudrais une infobulle pour le staff par exemple , c'est possible ?
Merci de ton aide ^^ | | |
|
| | |
Invité Invité
| Bonjour, Qu'est-se que tu n'as pas compris ? Et oui c'est possible de réaliser des infobulles pour ton staff | | |
|
| | |
Supermilie
{ Membre }
Messages : 6
| Merci bcp.
Un tuto parfaitement parfait !!! | | |
|
| | |
Babi-Usagi
{ Membre }
Messages : 12
| Bonjour, je voudrais savoir s'il était possible de faire des infobulles sur une image Lien du forum : http://crazypinktigers.forum-actif.net/forum.htm Dans la page d'accueil je voudrais mettre une petite infobulle là où il y a écrit Elmander, Amethiste ... sachant que plus tard je modifierai le fond mais ce n'est pas grave ! Le CSS : - Code:
-
a:hover {
text-decoration: none !important;
}
a:hover{
letter-spacing : 2px; }
a {
font-variant: small-caps;
}
a.forumlink {
text-decoration: none;
text-align: center;
background-color: #000000;
border-bottom: 2px double #B86885;
border-top: 2px double #B86885;
-moz-border-radius: 10px ;
border-right: 5px solid #B86885;
-moz-border-radius: 10px ;
border-left: 5px solid #B86885;
display:block;
}
a.forumlink:hover {
text-align: center;
text-decoration: none;
background-color: #DCB6C4;
border-bottom:2px double #B86885;
border-top: 2px double #B86885;
-moz-border-radius: 10px ;
border-right: 5px solid #B86885;
-moz-border-radius: 10px ;
border-left: 5px solid #B86885;
display:block;
}
.mainmenu{
font-size : 10px;
color : #5f4037;
}
a.mainmenu{
text-decoration: none;
color : #5f4037;
background-color: #D69198;
border-bottom: 1px solid #5f4037;
filter:alpha(opacity=50);
-moz-opacity:0.5;opacity: 0.5;
}
a.mainmenu:hover{
text-decoration:none; color : #5f4037;
background-color : #F2C4C9;
border-bottom: 1px solid;
color : #5f4037;
filter:alpha(opacity=100);
-moz-opacity:0.5;opacity: 1;
}
Le code de la page d'accueil : - Code:
-
<IMG border=0 src="http://img97.imageshack.us/img97/6435/staffrefait.png" width=800 height=430 useMap=#Map> <MAP id=Map name=Map><AREA href="http://crazypinktigers.forum-actif.net/pink-reglement-f9/" shape=rect alt=Rules coords=24,155,93,184><AREA href="http://crazypinktigers.forum-actif.net/pink-presentation-f3/" shape=rect alt=Members coords=110,160,185,183><AREA href="http://crazypinktigers.forum-actif.net/pink-raids-f5/" shape=rect alt=Raids coords=207,156,269,185><AREA href="http://crazypinktigers.forum-actif.net/pink-roster-f10/" shape=rect alt=Roster coords=29,186,92,214><AREA href="http://crazypinktigers.forum-actif.net/pink-downs-f13/" shape=rect alt=Downs coords=107,188,166,215><AREA href="http://crazypinktigers.forum-actif.net/pink-floodatoire-f14/" shape=rect alt="" coords=179,186,267,210></MAP> Voilà s'il faut poster ce problème autre part n'hésitez pas à me le dire |
Dernière édition par Babi-Usagi le Dim 30 Mai 2010, 12:37, édité 1 fois | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Faire une infobulle (messages) | |
|
