| | Infobulle qui apparaît progressivement |  |
|
 HypnoticPoison 
{ Membre }
 Messages : 13
 | Alors voilà, je vous demande votre aide à tous chers supers codeurs de CSS actif. J'ai ajouté plusieurs infobulles sur un forum donc je m'occupe, or je n'arrive pas à lui donner un effet d'apparition "progressive". Sauriez-vous comment faire? J'espère m'être fait comprendre. Merci d'avance  | | |
|
| | |
Hiro
Ninja Codeur
 Messages : 1179
| Salut, on aurait besoin d'un lien vers le forum ou alors des codes afin de pouvoir t'aider  | | |
|
| | |
HypnoticPoison
{ Membre }
Messages : 13
| Je peux vous fournir le CSS de base: - Code:
-
a.pnj {
position: relative;
text-decoration: none;
}
a.pnj span {
display: none;
}
a.pnj:hover {
background: none;
z-index: 999;
cursor: help;
opacity: 0.9;
}
a.pnj:hover span {
display: inline;
position: absolute;
white-space: nowrap;
padding: 10px;
background-color: #000000;
text-align: justify;
} | | |
|
| | |
'Christa 
Lostmindy
Messages : 2856
| Salut, Pour commencer, tu utilises le mauvais code pour les infobulles (incohérence sémantique), il y en a un de meilleure qualité sur CSSActif. Pour le reste, je t'invite à te pencher sur les transitions CSS3 pour obtenir ton effet | | |
|
| | |
HypnoticPoison
{ Membre }
Messages : 13
| Bah merci, je vais essayer ^^ | | |
|
| | |
Invité Invité
| Hypnotic, s'il s'agit d'une infobule progressive sur texte, voici ce que j'ai. - Code:
-
<p class="alti info">
<span> texte apparent</span>
<span class="contenu bulle">
texte contenu dans l'infobulle<br />
</span>
</p> - Code:
-
/* INFOBULLE - TRANSITION */
.alti info{
width: 100%;
margin: auto;
padding: 0;
position: relative;
text-align: center;
font-size: 21px;
font-weight:bold;
font-family: Arial;
color: white;
}
.contenu bulle{
background: #090700;
border: 0px solid #1c1706;
width: 0;
height: 0;
position: absolute;
top: 10px;
right: 50px;
overflow: hidden;
z-index: 20;
font: 11px Arial;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.alti info:hover .contenu bulle{
width: 150px;
height: 50px;
padding: 5px;
border-width: 1px;
} | | |
|
| | |
HypnoticPoison
{ Membre }
Messages : 13
| Merci beaucoup J'ai essayé de bidouiller un peu et j'ai presque obtenu ce que je voulais. | | |
|
| | |
Murtagh 
{ Modérateur }
Messages : 1492
| Bonsoir Cherches-tu encore des améliorations du coup ou nous pouvons considérer ta question comme résolue ? ^^ | | |
|
| | |
Melone
{ Modérateur }
Messages : 805
| Hello ! Ton problème est-il toujours d'actualité ? As-tu vu la demande de Murtagh ? Si nous n'avons pas de réponse dans 4 jours, il sera considéré comme résolu et sera archivé ! Merci de ta compréhension  | | |
|
| | |
Melone
{ Modérateur }
Messages : 805
| Bonsoir ! Voilà une semaine que nous n'avons plus de nouvelles, malgré une relance. Je considère le problème abandonné. Si jamais il se trouve que non, merci de contacter un modérateur pour le ré-ouvrir ou créer un nouveau sujet. Bonne soirée, | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Infobulle qui apparaît progressivement | |
|
