arrondir une info bulle

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

Résolu arrondir une info bulle

Message par Warglah le Ven 1 Juil 2011 - 15:18

Bonjour je souhaiterai arrondir les bords de mon info-bull :
Voici mon code pour l'infobulle :
Code:
    .infobulle{
    position: relative;
    z-index: 0;}

    .infobulle:hover{
    background-color: transparent;
    z-index: 50;}

    .infobulle span{
    position: absolute;
    background-color: #141414;
    padding: 5px;
    left: -1000px;
    visibility: hidden;
    color: #FFFFFF;}

    .infobulle span img{
    border: 2px;
    padding: 5px;}

    .infobulle:hover span{
    visibility: visible;
    top: 70px;
    left: 35px;
    width: 200px ;
    color:#FF0000;
    border: 5px solid #000000;}

Merci d'avance =)


Dernière édition par Warglah le Ven 1 Juil 2011 - 16:33, édité 1 fois

Warglah
*

Masculin
Messages : 42
Inscrit(e) le : 05/06/2011

http://narutosetsujoku.forumgratuit.org/
Warglah a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: arrondir une info bulle

Message par WwAaPpIi le Ven 1 Juil 2011 - 15:27

Bonjour,

Il existe "divers arrondis" xD
Voulez-vous arrondir tous les coins, seulement ceux en diagonal, seulement ceux du haut, etc...
Voulez-vous que l'infobulle soit légèrement ronde, totalement ronde ?

Petite note, aussi : Les utilisateurs ayant comme navigateur Internet Explorer ne verrons pas l'arrondis en question Wink

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: arrondir une info bulle

Message par Warglah le Ven 1 Juil 2011 - 15:39

en arrondir les coins quoi ^^

Warglah
*

Masculin
Messages : 42
Inscrit(e) le : 05/06/2011

http://narutosetsujoku.forumgratuit.org/
Warglah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: arrondir une info bulle

Message par WwAaPpIi le Ven 1 Juil 2011 - 15:46

D'accord xD
Je vous laisse choisir la taille de l'arrondis donc... xD

Voici la partie arrondis :
Code:
.infobulle:hover span
{
    visibility: visible;
    top: 70px;
    left: 35px;
    width: 200px ;
    color:#9999a0;
    border: 2px solid #9999a0;
-moz-border-radius:  6px / 12px;
-webkit-border-radius:  6px / 12px;
-khtml-border-radius:  6px / 12px;
border-radius: 6px / 12px;
}

Et voici le code complet :
Code:
.infobulle{
    position: relative;
    z-index: 0;}

    .infobulle:hover{
    background-color: transparent;
    z-index: 50;}

    .infobulle span{
    position: absolute;
    background-color: #141414;
    padding: 5px;
    left: -1000px;
    visibility: hidden;
    color: #FFFFFF;}

    .infobulle span img{
    border: 2px;
    padding: 5px;}

    .infobulle:hover span
{
    visibility: visible;
    top: 70px;
    left: 35px;
    width: 200px ;
    color:#9999a0;
    border: 2px solid #9999a0;
-moz-border-radius:  6px / 12px;
-webkit-border-radius:  6px / 12px;
-khtml-border-radius:  6px / 12px;
border-radius: 6px / 12px;
}

Cordialement.

WwAaPpIi
***

Féminin
Messages : 130
Inscrit(e) le : 28/06/2011

http://wonder-land.forumactif.fr/
WwAaPpIi a été remercié(e) par l'auteur de ce sujet.

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


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