| Infobulle! Tout le temp aussi compliqué :( | |
|
|
Invité Invité
| 1) Probleme: Bonjour. Donc voila, un amis a moi, a était aimable et ma donne le CSS de son infobulle - Code:
-
a.imginfo { position: relative; color: #7d7d7d; text-decoration: none; border-bottom: 0px #7d7d7d solid; /* on souligne le texte */ }
a.imginfo span { display: none; /* on masque l'infobulle */ } a.imginfo:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */ cursor: help; /* on change le curseur par défaut en curseur d'aide */ } a.imginfo:hover span { display: inline; /* on 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: 30px; /* on positionne notre infobulle */ left: 20px; background: white; color: 7d7d7d; padding: 3px; border: 0px solid grey; border-left: 5px solid #b6b6b6; border-right: 3px solid #b6b6b6; border-top: 3px solid #b6b6b6; border-bottom: 5px solid #b6b6b6; } Mais...J'aimmerais changer quelques choses, j'aimmerais que mon infobulle apparaisse vers la droite, et quel ne se décroche pas de l'image d'origine, comme le style de l'infobulle de CSS actif qui m'impréssione serieusement Donc je pensse qu'il faut changer quelques choses au CSS! 2) Probleme Mon amis ma donner aussi le code d'une infobulle qui marche tres bien d'ailleur mais qui n'a pas les critères que je shouaite! - Code:
-
<font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="<img src="http://i37.servimg.com/u/f37/11/17/24/97/6910.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=80"></font> <span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody> <tr><td style="text-align: center;"><a class="imginfo"><img src="http://i67.servimg.com/u/f67/11/17/24/97/1312.jpg"/></a></td></tr><tr><td style="text-align: center;"><font size="1">TEXTE EN DESSOUS DE L'IMAGE<br/></font></td></tr><tr align="center"/></tbody></table></span></a> Les critères que je shouaite c'est qu'il y'est marquer la classe du membre au dessus de l'image en blanc, et en bas de l'image, le classique; regarder le profil et envoyer un mp d'une couleur et d'une police que je changerais, donc vous voyez bien que si je vous demande ca c'"est que bien evidemment y'a un probleme avec le tuto ou je suis allez, j'ai remmarquez que le CSS de l'infobullle (si c'est ca) n'acceptez pas le code HTML que le tuto nous proposez! Merci d'avance | | |
|
| |
Invité Invité
| Salut! Je vais regarder ce que tu dois faire. Pour ton problème, à toi de jouer avec les adresses internet. Ce n'est pas un problème, mais tu dois faire des modifications, c'est tout. Tu rajoute les lignes qu'il faut. Si tu as toujours du mal, je t'aiderai d'avantage | | |
|
| |
Invité Invité
| Dac je vais essayer de résoudre probleme 2 mais le probleme 1 suis vraiment largué U'_u Edit: Apres avoir recherchez j'ai pas trouver plus J'ai chercher mais sans rien donc les deux problemes sont ouvert! Edit2: Je rajoute une demande, j'aimmerais que mes liens et une couleur | | |
|
| |
Invité Invité
| Bon alors voilà : - Code:
-
.menu a { /* Les liens qui ne sont pas sous le curseur. */ color: #FFFFFF; //ta couleur text-decoration:none; // pas de soulignement font-family:Arial,Verdana; // la font du texte } .menu a:hoover { /* Les liens lorsque le curseur est dessus. */ color: #FFFFFF; //ta couleur text-decoration:none; // pas de soulignement font-family:Arial,Verdana; // la font du texte } .menu a:visited { /* Les liens visités. */ color: #FFFFFF; //ta couleur text-decoration:none; // pas de soulignement font-family:Arial,Verdana; // la font du texte } Tu colle ça dans ton CSS! Ainsi tous les liens de ton menu auront cette apparence. NOTE: tu peux supprimer le mot menu comme ça TOUS les liens de ton site seront comme ça. Tu me dis si c'est bon (tu modifie FFFFFF par la couleur que tu veux et le mot "ta couleur" par la couleur correspondante | | |
|
| |
Invité Invité
| Merci, ensuite j'aimmerais que quelqu'un résoue mes autres problemes please Merci d'avance | | |
|
| |
Invité Invité
| bon, alors: Ceci est ton code : - Code:
-
<font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="<img src="http://i37.servimg.com/u/f37/11/17/24/97/6910.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=80"></font> <span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody> <tr><td style="text-align: center;"><a class="imginfo"><img src="http://i67.servimg.com/u/f67/11/17/24/97/1312.jpg"/></a></td></tr><tr><td style="text-align: center;"><font size="1">TEXTE EN DESSOUS DE L'IMAGE<br/></font></td></tr><tr align="center"/></tbody></table></span></a> Dans TEXTE EN DESSOUS DE L'IMAGE, tu rajoute ceci: titre du lienmonlien.html pourrait représenter le renvoie du lien pour t'envoyer un MP, et titre du lien, tu met "envoyer MP", ou "MP". Tu fais cela pour les choses que tu veux mettre dans l'infobulle. | | |
|
| |
Invité Invité
| J'ai pas trop compris | | |
|
| |
Invité Invité
| désolé, je me suis mal expliqué^^ dans ton code, tu vois qu'il y a écrit en MAJUSCULE : TEXTE EN DESSOUS DE L'IMAGE tu fais en fait par exemple, si tu veux que dans ton infobulle on puisse t'envoyer un MP: Tu écrit cela dans TEXTE EN DESSOUS DE L'IMAGE: - Code:
-
<a href="monlien.html"> titre du lien</a> sachant que monlien.html doit te renvoyer vers le lien pour t'envoyer un MP, et titre de lien correspond au nom que tu veux, donc MP. Tu fais cela pour chaque partie que tu veux, genre profil | | |
|
| |
Invité Invité
| Donc je pensse avoir compris, juste apres TEXTE EN DESSOUS DE L'IMAGE je met ce que tu vient de me passer et je remplace "mon lien html" par le lien. C'est ca? | | |
|
| |
Invité Invité
| voilà, c'est ça^^ Et titre du lien par ce le nom que tu veux^^ | | |
|
| |
Invité Invité
| ok merci de ton aide, je peux savoir a présent comment faire pour mon probleme n°1 | | |
|
| |
Invité Invité
| je vais y réfléchir, je vais manger là^^ Dis moi en attendant si tes autres problèmes sont résolus^^ | | |
|
| |
Invité Invité
| Mes problemes sont résolu pour l'instant Et je t'en remmercie | | |
|
| |
Invité Invité
| voici le code de l'infobulle: - 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: 500; /* 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; }
tu vois dans le code : "* on positionne notre infobulle *" au lieu de left, du met right (= droite en français^^) Voilà, je pense que c'est bon^^ | | |
|
| |
Invité Invité
| Juste un petit probleme, l'infobulle apparait tres éloignés de l'image quand je passe ma souris Et y'a un probleme avec le lien qui ne fonctionne pas du tout U'_u Je shouaite aussi mettre en haut le nom de sa classe (admin, modo...) - Code:
-
<font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="<img src="http://i66.servimg.com/u/f66/14/16/75/00/61324-11.png" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=80"></font> <span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody> <tr><td style="text-align: center;"><a class="imginfo"><img src="http://i67.servimg.com/u/f67/11/17/24/97/1312.jpg"/></a></td></tr><tr><td style="text-align: center;"><font size="1">Profil<br/></font></td></tr><a href="http://css-actif.forumactif.org/profile.forum?mode=viewprofile&u=318.html"> titre du lien</a> <tr align="center"/></tbody></table></span></a> Regarde si ca vient pas de mon code | | |
|
| |
Invité Invité
| normal que c'est éloigné, à côté de right, il y a XX px, plus tu en met, plus c'est éloigné. Mais XX px en fonction de tes goûts, je recherche pour tes autres problèmes | | |
|
| |
Invité Invité
| Ok merci mais j'ai un probleme de plus, l'image sur la quelle ont passe la souris ne marche pas! | | |
|
| |
Invité Invité
| Puis voir ton code CSS stp, ainsi que le code de l'infobulle que tu as | | |
|
| |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| C'est normal mais je suis fatigué donc je vais simplement vous expliquer et je vous aiderai au pire si vous n'arrivez toujours pas. Vous êtes d'accord que l'on utilise la balise "a" pour le truc qui va afficher l'infobulle+l'infobulle, etc la balise "span" pour afficher l'infobulle ? Vous êtes également d'accord que les balises "a" et "span" sont toutes les 2 des balises "inline" et non "block" ? Et bien voilà le problème. Une balise inline (en l'occurrence a) n'est pas faite pour accueillir une autre balise inline (span). Il faut donc remplacer "a" par "div" qui est une balise de type block et qui permettra de tout afficher correctement | | |
|
| |
Invité Invité
| ah bien vu Basil, j'avais pas vu >.< J'espère que cela va t'aider Joris! | | |
|
| |
Invité Invité
| Bah j'ai rien compris XD si j'ai bien compris tu t'est tromper de balise, vla mon css suivi de mon infobulle - Code:
-
a.imginfo { position: relative; color: #7d7d7d; text-decoration: none; border-bottom: 0px #7d7d7d solid; /* on souligne le texte */ }
a.imginfo span { display: none; /* on masque l'infobulle */ } a.imginfo:hover { background: none; /* correction d'un bug IE */ z-index: 999; /* on définit une valeur pour l'ordre d'affichage */ cursor: help; /* on change le curseur par défaut en curseur d'aide */ } a.imginfo:hover span { display: inline; /* on 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: 30px; /* on positionne notre infobulle */ right: 3px; background: white; color: 7d7d7d; padding: 3px; border: 0px solid grey; border-left: 5px solid #b6b6b6; border-right: 3px solid #b6b6b6; border-top: 3px solid #b6b6b6; border-bottom: 5px solid #b6b6b6; } - Code:
-
<font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="<img src="http://i37.servimg.com/u/f37/11/17/24/97/6910.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=80"></font> <span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody> <tr><td style="text-align: center;"><a class="imginfo"><img src="http://i67.servimg.com/u/f67/11/17/24/97/1312.jpg"/></a></td></tr><tr><td style="text-align: center;"><font size="1">TEXTE EN DESSOUS DE L'IMAGE<br/></font></td></tr><tr align="center"/></tbody></table></span></a> Vla je te donne celui d'origine pour le code HTML, aussi non tu peut voir le probleme pour l'image visible avant passage de la souris, car ca reste toujours un mystere Merci! | | |
|
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| Comme Basil a dit, il faut remplacer le a par un div, comme ça: - Code:
-
<font color="MediumVioletRed"></font> <div class="imginfo"><font color="burlywood"><img src="<img src="http://i37.servimg.com/u/f37/11/17/24/97/6910.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=80"></font> <span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody> <tr><td style="text-align: center;"><a class="imginfo"><img src="http://i67.servimg.com/u/f67/11/17/24/97/1312.jpg"/></a></td></tr><tr><td style="text-align: center;"><font size="1">TEXTE EN DESSOUS DE L'IMAGE<br/></font></td></tr><tr align="center"/></tbody></table></span></div> | | |
|
| |
Invité Invité
| |
| |
Ikø'
Pika'Ghøst ~ Maîtresse des pelles ~
Messages : 3193
| U_U Au lieu de dire "Marche pas :S" tu peux pas nous montrer avec une image ou l'endroit où y'a tes infobulles pour qu'on sache ce qui se passe? Ou bien le demander un peu mieux u_u - Code:
-
<font color="MediumVioletRed"></font> <a class="imginfo"><font color="burlywood"><img src="<img src="http://i37.servimg.com/u/f37/11/17/24/97/6910.jpg" style="opacity:0.4;filter:alpha(opacity=40)"onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=80"></font> <span><table width="125" cellspacing="1" cellpadding="1" border="0"><tbody> <tr><td style="text-align: center;"><div class="imginfo"><img src="http://i67.servimg.com/u/f67/11/17/24/97/1312.jpg"/></div></td></tr><tr><td style="text-align: center;"><font size="1">TEXTE EN DESSOUS DE L'IMAGE<br/></font></td></tr><tr align="center"/></tbody></table></span></a> Si ça marche pas alors moi je sais pas. | | |
|
| |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Nan faut changer aussi le CSS | | |
|
| |
Contenu sponsorisé
| |
| |
| Infobulle! Tout le temp aussi compliqué :( | |
|