De belles infobulles

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

De belles infobulles

Icône par defaut le Dim 16 Oct 2011 - 8:20
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Ce tutoriel est réservé pour avoir un affichage d'infobulle très design  ;)



Pour avoir un rendu qui se rapprochera de cette apparence, veuillez suivre les instruction suivantes:
le HTML:

Code:
<a class="info">Mon texte affiché<span>Première ligne <br>
Deuxième ligne<br>
Troisième ligne<br>
Quatrième ligne</span></a>

dans ta C.S.S
Affichage/Images et Couleurs/Couleurs/Feuille de style

colle ceci:
Code:
a.info{
    position:relative;
   z-index:10;
    color:#000000;/* la couleur du texte affiché*/
    text-decoration:none;
 }
a.info:hover{z-index:10;

}
a.info span{display: none;}
a.info:hover span
{
display:block;
position:absolute;
margin-bottom: 40px;/* position de l'infobulle */
background-color:#ffffff;/* couleur de fond de l'infobulle */
color:#333333;/* couleur du texte de l'infobulle */
  border: 1px solid #333333;/* couleur de la bordure de l'infobulle */
padding-left:2px;  /* espace gauche de l'infobulle */
padding-right:2px; /* espace droit de l'infobulle */
padding-top:2px;    /* espace du haut de l'infobulle */
padding-bottom:2px;  /* espace du bas de l'infobulle */
min-width:200px;/* largeur minimale de l'infobulle */
min-height:25 px;/* hauteur minimale de l'infobulle */
-moz-border-radius: 10px; /* bordures arrondis de 10px pour la plupart des navigateurs*/
    -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
   }
Passez le curseur de la souris sur le texte ci-dessous
Mon texte affichéPremière ligne

Deuxième ligne

Troisième ligne

Quatrième ligne


Créez autant de fois une apparence en changeant juste la class
info1, info2 etc



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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