profil personnalisé. (résolu) Bouton_activeprofil personnalisé. (résolu) Bouton_hoverprofil personnalisé. (résolu) Fb-hoverprofil personnalisé. (résolu) Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
profil personnalisé. (résolu) EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
profil personnalisé. (résolu) EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
profil personnalisé. (résolu) EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
profil personnalisé. (résolu) EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
profil personnalisé. (résolu) EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
profil personnalisé. (résolu) EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
profil personnalisé. (résolu) EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
profil personnalisé. (résolu) EmptySam 11 Fév 2023, 06:04 par Krager

-17%
Le deal à ne pas rater :
(Black Friday) Apple watch Apple SE GPS + Cellular 44mm (plusieurs ...
249 € 299 €
Voir le deal

Partagez
 

profil personnalisé. (résolu)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
intodust
intodust
{ Membre }
{ Membre }

Féminin Messages : 8



profil personnalisé. (résolu) Empty
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é.


Dernière édition par intodust le Lun 25 Fév 2013, 17:41, édité 1 fois
MessageSujet: profil personnalisé. (résolu)   profil personnalisé. (résolu) EmptyLun 25 Fév 2013, 11:52
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



profil personnalisé. (résolu) Empty
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:
<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {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.
MessageSujet: Re: profil personnalisé. (résolu)   profil personnalisé. (résolu) EmptyLun 25 Fév 2013, 13:14
Revenir en haut Aller en bas
intodust
intodust
{ Membre }
{ Membre }

Féminin Messages : 8



profil personnalisé. (résolu) Empty
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.
MessageSujet: Re: profil personnalisé. (résolu)   profil personnalisé. (résolu) EmptyLun 25 Fév 2013, 17:16
Revenir en haut Aller en bas
http://enaevolare.fr
'Christa
'Christa
Lostmindy
Lostmindy

Féminin Messages : 2856



profil personnalisé. (résolu) Empty
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.
MessageSujet: Re: profil personnalisé. (résolu)   profil personnalisé. (résolu) EmptyLun 25 Fév 2013, 17:22
Revenir en haut Aller en bas
intodust
intodust
{ Membre }
{ Membre }

Féminin Messages : 8



profil personnalisé. (résolu) Empty
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
MessageSujet: Re: profil personnalisé. (résolu)   profil personnalisé. (résolu) EmptyLun 25 Fév 2013, 17:31
Revenir en haut Aller en bas
http://www.school-of-pub.net/forum.htm
Murtagh
Murtagh
{ Modérateur }
{ Modérateur }

Masculin Messages : 1492



profil personnalisé. (résolu) Empty
Je déplace alors. Bonne nuit. Smile
MessageSujet: Re: profil personnalisé. (résolu)   profil personnalisé. (résolu) EmptyMer 27 Fév 2013, 19:04
Revenir en haut Aller en bas
Contenu sponsorisé




profil personnalisé. (résolu) Empty
MessageSujet: Re: profil personnalisé. (résolu)   profil personnalisé. (résolu) Empty
Revenir en haut Aller en bas
 

profil personnalisé. (résolu)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Personnalisation du profil : « profil personnalisé » & « champs de contact »
» [Résolu ]Le profil à l'horizontale ~
» curseur personnalisé animé qui reste immobile [résolu]
» profil qui sort. [Résolu]
» [résolu] Profil en onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit