Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

[ ↓ ]

Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

Milouze14


ateur

Milouze14

Message posté: le Dim 16 Oct 2011 - 8:20
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



Voir le sujet précédent Voir le sujet suivant Message [Page 1 sur 1]

[ ↑ ]

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

  
  • © PunBB | Signaler un abus