Avatar effet volet glissant.

3 participants

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

Résolu Avatar effet volet glissant.

Message par Delancre Jeu 25 Avr 2013 - 11:27

Bonjour,

Après avoir mis les renseignements du profil derrière l'avatar, j'aurais bien aimé savoir comment faire glisser mon avatar vers en bas quand j'y passe la souris- je peux vous faire un schéma si vous voulez-.

Passez une agréable journée et merci à ceux qui répondront Bizz


Dernière édition par Delancre le Jeu 25 Avr 2013 - 23:33, édité 1 fois
Delancre

Delancre
**

Messages : 81
Inscrit(e) le : 25/04/2013

Delancre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar effet volet glissant.

Message par Scipion Jeu 25 Avr 2013 - 13:15

Bonjour

Afin de pouvoir effectuer un test, serait-il possible de disposer du contenu complet de votre template viewtopic_body (Affichage d'un sujet) ainsi que du CSS associé au profil, merci ?

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar effet volet glissant.

Message par Delancre Jeu 25 Avr 2013 - 13:59

Bonjour !

Alors déjà, un énorme merci pour avoir répondu et de l'aide que vous me proposez. Ensuite, j'ai dis une grosse bêtise et le profil n'a pas été mis derrière l'avatar, désolé ma co-admin m'avait dit que oui.

Template -->
Spoiler:

Partie CSS -->
Spoiler:

Bonne journée !
Delancre

Delancre
**

Messages : 81
Inscrit(e) le : 25/04/2013

Delancre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar effet volet glissant.

Message par Scipion Jeu 25 Avr 2013 - 14:19

C'est pas grave, simple malentendu entre vous deux. Voila le rendu que j'obtiens avec vos codes :

- Profil à gauche des messages
- Pseudo aligné à gauche
- Rang centré
- Image du rang centrée
- Avatar
- Informations du profil centrées.

Que souhaitez-vous faire ?

Cordialement
Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar effet volet glissant.

Message par Delancre Jeu 25 Avr 2013 - 14:24

Le Speudo est aligné à gauche ? Sur mon forum, il est centré ._.

Enfin ce que j'aimerais c'est déjà mettre les informations du profil derrière l'avatar et que quand on passe le curseur sur l'avatar celui-ci glisse vers le bas pour laisser apparaître les informations. Si mes explications sont un peu bancales, je peux vous faire un screen.

Bonne journée et merci Smile
Delancre

Delancre
**

Messages : 81
Inscrit(e) le : 25/04/2013

Delancre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar effet volet glissant.

Message par Scipion Jeu 25 Avr 2013 - 14:29

Désolé de vous décevoir, mais actuellement je ne maîtrise pas cette technique. Toutefois, je vous suggère de lancer une recherche dans les archives FA pour essayer de retrouver un sujet similaire qui a été traité sur le FDF, mais je n'en connais pas l'issue, c'est à dire résolu ou non.

Cordialement

Scipion

Scipion
Membre actif

Masculin
Messages : 8655
Inscrit(e) le : 03/02/2010

https://forum.forumactif.com/
Scipion a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar effet volet glissant.

Message par Loü Jeu 25 Avr 2013 - 14:38

J'avais trouvé ce tuto il y a quelques temps sur un site sympa. Fais toi plaisir ! Very Happy

A mettre où tu veux (PA, templates, message etc...)

Code:
<div class="monBloc">
  <div class="blocVolet"></div>
  Un peu de contenu (caché par le blocVolet (qui peut contenir du texte))
</div>

Et tu adapte ceci dans ton css :

Code:
/* Bloc principal */
.monBloc {
  position: relative; /* important ! */
  overflow: hidden; /* cache tout ce qui dépasse du bloc. Si vous voulez que votre volet dépasse, retirez cette ligne */
  width: 250px; /* largeur du bloc */
  height: 150px; /* hauteur du bloc */
  background: red; /* couleur de fond */
}

/* Bloc de recouvrement */
.blocVolet {
  position: absolute; /* positionnement absolu (important) */
  top: 0; /* (important) */
  left: 0; /* (important) */
  width: 250px; /* largeur du bloc (identique au bloc principal) */
  height: 150px; /* hauteur du bloc (identique au bloc principal) */
  background: green; /* couleur de fond */
  /* réglage de la transition */
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

/* Changement au survol */
.monBloc:hover > .blocVolet {
  left: -250px; /* le bloc se décalera vers la gauche de 250px; (largeur du bloc) */
}

(Dans changement de survol, modifie left par bottom et je pense que ça ira Wink )
Loü

Loü
***

Messages : 171
Inscrit(e) le : 28/01/2010

Loü a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar effet volet glissant.

Message par Delancre Jeu 25 Avr 2013 - 20:16

Bonsoir !

Scipion : Ce n'est pas grave, mais merci quand même d'avoir bien voulu essayer de m'aider Smile.

Loü : Merci beaucoup ! Mais ça ne marche pas ! XD. Alors je sais pas si c'est moi qui ait mal placé le code ou si alors il ne sert pas pour les profils. Mais merci !

Bonne soirée !

EDITE : C'est bon le sujet est clos ! Merci à ceux qui m'ont répondu Smile
Delancre

Delancre
**

Messages : 81
Inscrit(e) le : 25/04/2013

Delancre a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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