Coin Pub
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment :
Jeux, jouets et Lego : le deuxième à ...
Voir le deal

Jolies infobulles. Empty Jolies infobulles.

- Mer 24 Aoû 2011 - 10:24
Invité
Invité
Anonymous
    Hey à tous. n_n

    Bon bah voilà, Septembre arrive Crying or Very sad et j'ai décidé de changer de PA. Cependant, j'arrive pas à trouver des codes pour des infobulles. Elles sont grosses, carrées, moches, sous l'image, bref, truc que j'aime pas ! =_______= (Suis difficile. Jolies infobulles. Rolleyes ) J'aimerai trouver des infobulles classes, avec un fond légèrement transparent (exemple "orange" avec 70% d'opacité) à la gauche des images. Un truc petit, discret, et aux bouts arrondis. Je sais pas si vous connaissez des sites, des codages dans le style, mais j'en ai vraiment besoin, car j'peux pas foutre ma nouvelle PA sans. T__T J'ai beau chercher sur forumactif, y a strictement rien... Ou c'pas bien expliqué. Jolies infobulles. Sad

    Merci d'avance~ ♥

Jolies infobulles. Empty Re: Jolies infobulles.

- Mer 24 Aoû 2011 - 10:31
Féminin Inscrit le : 21/03/2010
Age : 29
Messages : 5306
Autre : La passion du parler pour rien.
. MAL .
Retraitée

. MAL .
Tu sais déjà faire les infobulles ou pas ? Si oui, quels sont les codes ?
Parce que techniquement, si tu as déjà la code qui te permet de faire des grosses carrées moches, il suffit de personnaliser le css Wink


Jolies infobulles. Mal10

Consultante en verdure et analyse

Jolies infobulles. Signba10 Jolies infobulles. Jesuis10

Oooh ! :

Jolies infobulles. Empty Re: Jolies infobulles.

- Mer 24 Aoû 2011 - 11:25
Invité
Invité
Anonymous
Nop, je sais pas. Sad
Pour ça que ne demande de l'aide. TT" .

Jolies infobulles. Empty Re: Jolies infobulles.

- Mer 24 Aoû 2011 - 13:09
Féminin Inscrit le : 21/03/2010
Age : 29
Messages : 5306
Autre : La passion du parler pour rien.
. MAL .
Retraitée

. MAL .
Ok !
Alors voici un code tout simple que j'ai découvert sur CSSActif, donc inutile de mettre les crédits >.<
Voici tout d'abord le css avec les commentaires originaux qui te permettront de le personnaliser. C'est très pratique, en revanche il y a un bug de saut de ligne que je ne comprends pas, alors si tu connais quelqu'un doué en codage il faudra lui demander x) Cependant, ce bug n'apparait pas si l'infobulle est accolée à un item d'une liste.
Code:
/* Infobulle */   
div.infobulle {
  position: relative;
  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: 0; /* on définit une valeur pour l'ordre d'affichage */
  position: absolute;
        }
      
div.infobulle:hover div {
    display: block; /* 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: -15px; /* on positionne notre infobulle */
    left: 50px;
    background: #ff874d; /* arrière-plan de l'infobulle */
    color: white; /* texte dans l'infobulle */
    padding: 3px;

  /* bordures de votre infobulle*/
    border: 1px dotted white;
    border-left: 1px dotted white;
    -moz-border-radius:5px 5px 5px 5px;
    -webkit-border-radius:5px 5px 5px s5px;
        }

Ensuite voici la partie html, qui s'applique à n'importe quel texte ou image :
Code:
<div class="infobulle">TEXTE (qui s'affiche normalement)<div>TEXTE de l'infobulle.</div></div>

Voilà !
Hum, je voulais te montrer l'exemple mais malheureusement ça ne fonctionne pas sur ce topic, c'est un peu étrange...
Mais tu peux toujours regarder le résultat là : http://testsmal.kikooforum.com/h4-signanrp , en cliquant sur "Salamy" puis "Attaque", ou "Maladrok" puis le premier nom qui s'affiche en gras.

Si tu as des questions n'hésite pas ! Je sais que ce n'est pas le meilleur code mais bon si ça peut te dépanner ^^'

Jolies infobulles. 97205 Sinon j'ai trouvé ça : http://ogamemaio.forumgratuit.org/t3-code-css-actuel (si tu descends il y a marqué "infobulle"). Je ne sais pas ce que ça vaut, mais tu peux toujours essayer Wink


Jolies infobulles. Mal10

Consultante en verdure et analyse

Jolies infobulles. Signba10 Jolies infobulles. Jesuis10

Oooh ! :

Jolies infobulles. Empty Re: Jolies infobulles.

- Mer 24 Aoû 2011 - 13:34
Invité
Invité
Anonymous
T'es un ange. ♥
Merci beaucoup. Very Happy (L)

Je vais mettre ça dans la PA le temps d'en trouver des plus stylisés. ^^ Encore merci. Jolies infobulles. Wub

Jolies infobulles. Empty Re: Jolies infobulles.

- Sam 24 Sep 2011 - 15:25
Féminin Inscrit le : 28/06/2009
Messages : 64068
Emploi / Etudes : Corruptrice.
Loisirs : G33ker.
Autre : On recherche des analystes.
"C'est bon j'ai les fesses tellement lustrées que je dérape sur ma chaise." Rem1
Nemesis
Retraitée

avatar
C'est résolu, je déplace ^^


Merci Mèl pour cette  sign' trop belle Jolies infobulles. Wub !
~
« Voilà ! Vois en moi l'image d'un humble vétéran de vaudeville, distribué vicieusement dans les rôles de victime et de vilain par les vicissitudes de la vie. Ce visage, plus qu'un vil vernis de vanité, est un vestige de la vox populi aujourd'hui vacante, évanouie. Cependant, cette vaillante visite d'une vexation passée se retrouve vivifiée et a fait vœu de vaincre cette vénale et virulente vermine vantant le vice et versant dans la vicieusement violente et vorace violation de la volition. Un seul verdict : la vengeance. Une vendetta telle une offrande votive mais pas en vain car sa valeur et sa véracité viendront un jour faire valoir le vigilant et le vertueux. En vérité ce velouté de verbiage vire vraiment au verbeux, alors laisse-moi simplement ajouter que c'est un véritable honneur que de te rencontrer. Appelle-moi V. » ♥️
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum