|
Mitsu
{ Membre }
Messages : 146
| Bonsoir, je voudrais savoir comment on fait une infobulle ainsi : - Spoiler:
Merci ^^ |
Dernière édition par Mitsu le Sam 16 Oct 2010, 18:47, édité 2 fois | |
|
| |
°Saraffy
{ Membre }
Messages : 26
| Salut ! Tout d'abord, tu es dans la mauvaise section, ici c'est pour aider un membre ayant déjà sa base CSS/HTML - à problème -, pas pour créer un code (= De plus, tu peux trouver le tutoriel adéquat juste ici ;] J'espère que ça t'aidera :3
| | |
|
| |
Mitsu
{ Membre }
Messages : 146
| J'ai déjà fait une infobulle mais elle est normale, juste un cadre sans vraiment de chose extraordinaire, une infobulle normale donc mais j'ai un code, c'est pas comme si je n'avais rien fait ^^ Ca ne m'aide pas vraiment, ça me donne comment faire une infobulle mais pas comment la personnaliser ainsi donc je suis encore bloquée ^^' | | |
|
| |
LittleThing
{ Membre }
Messages : 175
| Tu pourrais nous passer ton code CSS que tu as mis pour l'infobulle ?
Ce sera plus facile pour moi de t'expliquer comme ça ^^ ! | | |
|
| |
Mitsu
{ Membre }
Messages : 146
| CSS : - Code:
-
.tstaff{font-size:1em;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail span{ position: absolute; background-color: #C3DDE3; padding: 5px; left: -1000px; visibility: hidden; color: #ffffff;}
.thumbnail span img{border: 1px groove;padding: 2px;}
.thumbnail:hover span{ visibility: visible; top: 15px; left: 25px; width: 50 px;} HTML : - Code:
-
<table><tr> <td><div class="thumbnail"> <img src="Lien image vue de tous"> <span><div class="tstaff" align="center"> Texte <img src="lien 'image à l'intérieur de l'infobulle"><br> Texte </div></span> </div></td> </tr></table> Voilà ^^ je voudrais arriver au même résultat que l'image que j'ai fourni mais aussi de pouvoir mettre un fond à l'intérieur si possible, merci | | |
|
| |
LittleThing
{ Membre }
Messages : 175
| En fait, tu dois personnaliser cette classe : "thumbnail:hover span" : - Code:
-
.thumbnail:hover span{ visibility: visible; top: 15px; left: 25px; width: 50 px; -moz-border-radius: 10px 0px 10px 0px; /*ON ARRONDIT CERTAINS COINS SOUS MOZILLA -webkit-border-radius: 10px 0px 10px 0px; /* SOUS SAFARI*/ border-radius: 10px 0px 10px 0px; /*SOUS CHROME*/ background-color: CODE DE TA COULEUR; /*ou alors si tu veux une image :*/ background-image: url('URL DE TON IMAGE'); border: double 3px COULEUR; /*on définit le style de la bordure sa largeur et sa couleur*/ } J'espère avoir pu t'aider. | | |
|
| |
Mitsu
{ Membre }
Messages : 146
| Okay merci mais comment faire les deux contours comme sur l'image svp ? | | |
|
| |
LittleThing
{ Membre }
Messages : 175
| Et bien normalement, je t'ai mis une valeur qui te permettra d'avoir ces deux contours xD
Le "border: double".
"Double veut" dire "Eyh CSS, je veux 2 bordures !". | | |
|
| |
Mitsu
{ Membre }
Messages : 146
| Mince j'avais pas vu, quelle baka, merci je vais tester | | |
|
| |
LittleThing
{ Membre }
Messages : 175
| De rien x)
Reviens m'engueuler si jamais ça marche pas ^^ ! | | |
|
| |
Mitsu
{ Membre }
Messages : 146
| Ça marche nickel, mais comment on fait pour réduire l'espace entres les infobulles ? Je veux que l'espace de droite soit la même que celle tout à gauche : - Spoiler:
| | |
|
| |
Invité Invité
| Bonjour, Votre problème est-il résolu ? Si oui, merci de cocher dans "icône du sujet" l'icône en éditant votre premier post. | | |
|
| |
#_Holigan
{ Membre }
Messages : 79
| J'ai eu un espèce de bug semblable. Place les dans un tableau, c'ets la meilleure méthode à mon avis (un des membres de mon forum avait d'ailleurs, sans tableau, des infos bulles sur des lignes différentes). Ca cadre le truc sans problème. Une cellule par infobulle. | | |
|
| |
Mitsu
{ Membre }
Messages : 146
| Oui c'est toujours d'actu, c'est déjà dans un tableau invisible XD | | |
|
| |
#_Holigan
{ Membre }
Messages : 79
| xD J'ai du voir sans lire ^^'
C'est bizarre, après quelques bidouillages (tout bien coller dans le html, sans retours à la ligne etc) j'ai plus eu de problèmes ... Mais ça me faisait pareil sinon, inégal. | | |
|
| |
Mitsu
{ Membre }
Messages : 146
| En faite, ce que je veux c'est juste diminuer ce que j'ai montré sur l'image, sinon c'est bien positionner et tout | | |
|
| |
Invité Invité
| Bonjour, Votre problème est-il résolu ? Si oui, merci de cocher dans "icône du sujet" l'icône en éditant votre premier post. | | |
|
| |
Mitsu
{ Membre }
Messages : 146
| Non j'attends toujours une réponse depuis tout ce temps ^^ | | |
|
| |
Murtagh
{ Modérateur }
Messages : 1492
| Bonjour, Votre problème est-il résolu ? Si oui, merci de cocher l'icône en éditant le premier message de ce sujet. Merci | | |
|
| |
Mitsu
{ Membre }
Messages : 146
| |
| |
Murtagh
{ Modérateur }
Messages : 1492
| Bonjour, Votre problème est-il résolu ? Si oui, merci de cocher l'icône en éditant le premier message de ce sujet. Merci | | |
|
| |
Caroo'
{ Membre actif }
Messages : 493
| Bonjour,
pas de réponses depuis maintenant presque 2 semaines, je considère que le problème est résolu.
Merci de votre compréhension. | | |
|
| |
Contenu sponsorisé
| |
| |
|