Sujets similaires

Bonjour, bonsoir. I love you

J'ai suivi ce tutoriel et il fonctionne tout à fait parfaitement. Cela dit, j'aurais voulu changé la direction du glissement de l'image. Là, l'image descend pour laisser apparaître les images infos du profil et j'aurais aimé qu'elle glisse de droite à gauche. Ensuite, j'aurais aimé qu'à la place des images du profil, ce soit les informations en texte qui apparaissent. (le nombre de messages, le crédit, etc..) Étant donné que je ne sais pas comme faire pour y parvenir je fais appel à vous en espérant que mon message soit assez clair ^^' Merci d'avance à ceux qui m'aideront.

rendu avec sans glissement: http://www.hapshack.com/images/ifFzA.png
rendu avec glissement: http://www.hapshack.com/images/BKdG2.png

voici le code css dont il s'agit.

Code:: /* Code par Hiro pour CSSACTIF
Merci de ne pas supprimer cette mention
(http://www.css-actif.com) */

#englob { /* Encadrement global des 2 divs */
position:relative;
width:200px;
height:320px;
border:1px solid red; /* La vilaine bordure rouge */
overflow:hidden; /* Permet de cacher ce qui dépasse */
}

.imgp {
background:blue; /* le bg de la div qui contient l'avatar */
position:absolute; /* Laissez comme ceci */
top:0;/* Laissez comme ceci */
left:0;/* Laissez comme ceci */
width:100%;/* Laissez comme ceci */
height:100%;/* Laissez comme ceci */
z-index:1;/* La position par rapport à l'autre div qui contient les infos */
-webkit-transition:all 0.5s;/* Laissez comme ceci */
-moz-transition:all 0.5s;/* Laissez comme ceci */
-o-transition:all 0.5s;/* Laissez comme ceci */
-ms-transition:all 0.5s;/* Laissez comme ceci */
transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .imgp {
margin-top:320px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */
}

.infosp {
background:green; /* le bg de la div qui contient les infos*/
position:absolute;/* Laissez comme ceci */
top:0;/* Laissez comme ceci */
left:0;/* Laissez comme ceci */
width:100%;/* Laissez comme ceci */
height:100%;/* Laissez comme ceci */
z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
opacity:0;/* on met l'opacité à zero pour un effet stylé ;) */
margin-left:-200px;/* on décale la div de 200px, elle est invisible grâce a l'overflow:hidden de #englob */
-webkit-transition:all 0.5s;/* Laissez comme ceci */
-moz-transition:all 0.5s;/* Laissez comme ceci */
-o-transition:all 0.5s;/* Laissez comme ceci */
-ms-transition:all 0.5s;/* Laissez comme ceci */
transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .infosp {
opacity:1;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
margin-left:0px;/* et on décale cette div à 0px (position par défaut) */
}

et le template modifié.

Bonjour,

Pour changer la direction du glissement, il suffit tout simplement de modifier cette partie du code :

Code:: #englob:hover > .imgp {
margin-top:320px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 200px */
}

Sachant que "magin-top" crée une marge entre l'image et le haut, je te laisse deviner par quoi il faut le remplacer Wink

Pour le reste, les informations de profil (que tu as retiré de ton code pour je ne sais quelle raison) sont générées avec ce code :

Code:: 
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

{postrow.displayed.POSTER_RPG}

A toi de les placer à l'endroit qu'il faut Wink

Je tiens néanmoins à t'avertir que s'il y a trop de contenu ou que les avatars sont trop petits, ça rendra horriblement mal.

Il me semble que j'ai réussi à obtenir ce que je veux. Par contre, la taille du texte s'est agrandie.

http://www.hapshack.com/images/dSNG6.png

Est-ce que ça vient de mon template ?

c'est la partie du template modifiée.

Ca vient du fait qu'en général le profil bénéficie des classes .postdetails .poster-profile, il me semble. Tu n'as qu'à les rajouter, genre comme ça :

Code:: <div class="postdetails poster-profile infosp">

Je crois que ça devrait faire l'affaire.
Et sinon, je pense que le <br> que tu as rajouté est inutile (surtout que ça s'écrit <br />), si tu veux rajouter un espace, rajoute un margin-top à ta classe .infosp, ça sera beaucoup plus propre.

L'écriture est de taille normale à nouveau. Mon problème est résolu. Merci encore pour l'aide et les réponses rapides I love you

Je déplace alors. Bonne nuit. Smile

profil personnalisé. (résolu)

profil personnalisé. (résolu)

Sujets similaires

Sujets similaires

Partenaires Or