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


Fondateur

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





Fondateur des forums Milouze14

- Contact par MP -



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