Sujets similaires

Bonjour/bonsoir, merci déjà de prendre le temps de lire mon sujet I love you

Donc y'a quelques temps je bloque sur un problème, ca concerne les effets de transitions CSS3. J'ai modifié les profils de mon forum test, et j'aimerais bien avoir ces effets dans quelques parties, parce que je trouvais ca vraiment jolie ^^

Quoique, à chaque fois que j'essaye un code de transition rien ne marche. Et ce que j'aimerais faire c'est lorsqu'on hover sur "En savoir plus" le contenu s'ouvre progressivement vers la droite. voici un sujet dans le forum pour mieux comprendre : http://pooop-s.forumgratuit.org/t5-ancien-topic-you-wanna-become-a-partner.

Je poste mes codes quand quelqu'un aura la gentillesse de m'aider <33

Merci d'avance Smack Smack

Bonsoir,

Effectivement je ne vois pas d'effet de transition. Cependant, il faut aussi être conscient que, selon les effets voulu, ce sera plus ou moins compatible selon les navigateurs utilisés (autant Chrome et Firefox gèreront la plupart des effets -et encore...- autant Internet Explorer ne commence à les considérer que dans ses versions les plus récente -et encore...-).

Cela dit en passant, j'aimerais bien avoir ton code CSS relatif à l'effet effectivement pour voir d'où vient le soucis.

Merci Smile

Bonjour, merci pour votre réponse. Calins

Et oui je suis bien consciente de tout cela, j'avoue que c'est embêtant le fait que ces effets ne marchent que sur certains navigateurs, mais au pire, si cet effet ne marche pas, rien ne se passera ? ca va s'ouvrir normalement ?

Déjà je trouve qu'il y a un petit décalage quand on survol sur le bouton .. vous n'avez pas remarqué ? Embarassed

Est ce possible de régler ceci ?
Sinon voici l'effet voulu par exemple (je l'ai enlevé du css parce que ca a tout deformé) :

Code:: .div{transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
-htm-transition: all 1s;}

Mais je ne sais vraiment pas comment l'introduire dans mon code ..

voici mon css :

Code:: /*INFO MESSAGES*/

div.info_profil div {
display:none; /*pour que l'infobulle ne soit pas visible*/
}

div.info_profil:hover {
background: none; /* pour corriger un bug present sur IE */
z-index: 999; /* l'ordre d'affichage*/
cursor: hand; /* pour modifier le curseur */
text-decoration:none; /*pas de soulignement du texte*/
width: 500px;
height: 52px;

}

div.info_profil:hover div {
font-style: normal; /* style de la police */
font-size: 10px; /* taille de la police */
color:#000 !important; /* couleur de la police */
padding: 3px; /* espace intérieur, entre le texte et la bord */
display: inline; /* on le défini en block */
width:auto;

}

Et la partie du template (si besoin) :

Code:: 

<div class="postbody">

{postrow.displayed.MESSAGE}

<div class="signature_div">
{postrow.displayed.SIGNATURE}
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>

<td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
<a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
</td>
<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
<br /> <div class="info_profil"><img src="http://img15.hostingpics.net/pics/193092ensavoirplus.png"><div align="justify">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT}
</div></div>

</br>
</td>
</tr>
</table>
</td>
</tr>

Merci beaucoup [résolu]Impossible de mettre des effets de transition dans les messages 577704309

Citation :: Remonter un sujet, le fameux «Up», est interdit sur CSSActif. L'équipe fait déjà le maximum pour répondre à votre demande le plus rapidement possible et la remontra elle-même en cas de besoin. Il est par conséquent inutile de signaler votre impatience.

Tu l'as bien compris "upper" est interdit Wink

Ah d'accord, je suis désolée :s

Bonjour !

Il te faut choisir entre une infobulle et une transition, Xibition ^^ L'affichage n'est pas du tout le même, sachant qu'on ne peut pas faire une transition de "display:none" à "display:inline" @_@

Grosso modo pour mettre en pratique ton souci il te faut un code de ce genre :

Code:: <div class="Bouton">Lien/image à survoler
<div class="PartieCachee">Contenu caché par défaut</div>
</div>

Code:: .Bouton .PartieCachee {
height:0;
overflow:hidden;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}

.Bouton:hover .PartieCachee {
height:20px;
overflow:auto;
}

Là j'ai fait un truc totalement random, mais il te faut savoir une chose :
- Tu dois impérativement fixer les valeurs qui vont "changer" dans le sélecteur de départ (.Bouton .PartieCachee). Par exemple ici j'ai fixé la hauteur à 0 et j'ai mis un "overflow:hidden" pour que le texte ne dépasse pas de son conteneur (donc s'il ne dépasse pas d'un bloc de hauteur 0px il est invisible)
- Tu dois redéfinir ces valeurs au survol. Par exemple ici j'ai donné une nouvelle valeur à la hauteur.

Il y a des trucs assez tordus cependant, par exemple dans mon exemple tu seras obligée de fixer une hauteur si tu veux que ça marche, et donc tu devras penser au cas des profils trop "longs", mais à toi de tester pour voir ce qui fonctionne ou non Wink

Coucouu merci beaucoup pour l'explication I love you

, seulement j'ai une seule question : On parle bien de la même image ? le "En savoir plus" en bas des posts pas celui qui fait apparaître les infos du posteur ?

Non, on ne parle pas de la même en effet, mais ça ne change rien à mon explication XD Si tu veux que ça s'ouvre sur le côté, c'est la largeur que tu dois changer.

Oui donc voilà c'est ce que je voulais savoir Very Happy

Merci beaucoup ca marche parfaitement [résolu]Impossible de mettre des effets de transition dans les messages 1001172573

EDIT : J'ai fais à peu près la même chose avec le bouton en savoir plus qui affiche les infos du profil, mais là il y'a un petit rond qui apparait avant du hover :s comment le cacher ?

le css :

Code:: .Boutons .PartieCache {
overflow:hidden;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
padding: 10px;
height: 0px;
width: 0px;
background-color: rgba(241, 220, 154, 0.9);
box-shadow: 0px 0px 5px 5px rgba(241, 220, 154, 0.9), 0px 0px 5px 5px rgba(241, 220, 154, 0.9);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-webkit-transition: height 0.5s linear, margin 0.5s linear, width 0.5s linear 0.5s;
-moz-transition: height 0.5s linear, margin 0.5s linear, width 0.5s linear 0.5s;
-o-transition: height 0.5s linear, margin 0.5s linear, width 0.5s linear 0.5s;
-ms-transition: height 0.5s linear, margin 0.5s linear, width 0.5s linear 0.5s;
transition: height 0.5s linear, margin 0.5s linear, width 0.5s linear 0.5s;
position: absolute;
z-index: 999;
}

.Boutons:hover .PartieCache {
height: 200px;
width: 200px;
overflow:auto;
padding: 10px;
}

Hello !
Le problème est-il toujours résolu malgré l'édition ?
Si ce n'est pas le cas, pense à enlever le [résolu] sinon personne ne viendra voir (:
Merci d'avance de ta réponse [résolu]Impossible de mettre des effets de transition dans les messages 926145

[résolu]Impossible de mettre des effets de transition dans les messages 926145

Oui c'est résolu vous pouvez fermer !

Très bien, merci de ta réponse rapide !
Je classe ZOU [résolu]Impossible de mettre des effets de transition dans les messages 926145

[résolu]Impossible de mettre des effets de transition dans les messages

[résolu]Impossible de mettre des effets de transition dans les messages

Sujets similaires

Sujets similaires

Partenaires Or