Avatar avec ombre en Cercle pour Invision

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

Résolu Avatar avec ombre en Cercle pour Invision

Message par LDL le Jeu 17 Mar 2016 - 16:59

.
Version du forum : Invision
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Autre
Personnes concernées par le problème : Tous les utilisateurs
forum de test : http://14022010.fullsubject.com/


DESCRIPTION DU PROBLÈME



Bonjour a tous,

je souhaiterai faire des modifs sur la forme de l'avatar et les mettre en cercle, bonne idée que forumactif a eu, bravo.
je me suis bien sur inspiré d'un sujet existant mais qui était pour phpBB2 . j'ai donc déjà le code grâce à notre Miettes
nationale si je puis dire, mais il reste quelques petits problèmes, le thread et code en question :

http://forum.forumactif.com/t384738-avatar-en-cercle





Il reste trois problèmes qui se posent :

1. le cercle avatar n'est pas centré dans la largeur de la colonne profil.
3. comment puis-je augmenter l'ombre qui est autour du cercle et la décaler légèrement dans un sens ? (pour moi en bas a droite)
2. les images sont déformées, le code ne se contente pas d'afficher seulement un cercle dans lequel apparait les images
mis dans les profils, mais il ré-adaptent celles-ci au point de les déformer en largeur et hauteur, ce qui évidemment ne va
pas du tout (voir screen).

(a ce sujet, comment se comporte l'image ? je suppose qu'elle se cadre automatiquement au centre et que le cercle fait apparaitre
le milieu de l'image en hauteur et en largeur selon la dimension du cercle qu'on a mis dans le code, est-ce bien cela ?)


comment puis-je faire ?



SCREEN
Spoiler:

.


Dernière édition par LDL le Jeu 17 Mar 2016 - 19:56, édité 2 fois

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar avec ombre en Cercle pour Invision

Message par Miettes le Jeu 17 Mar 2016 - 17:28

Hellow Smile

1. le cercle avatar n'est pas centré dans la largeur de la colonne profil.
Code:
.postprofile-details.postdetails .avatar-posteur{
  text-align: center;
}

comment puis-je augmenter l'ombre qui est autour du cercle et la décaler légèrement dans un sens ? (pour moi en bas a droite)
avec un box shadow Smile Par exemple :
Code:
.postprofile-details.postdetails .avatar-posteur img {
    border: 3px solid #ffffff;
    border-radius: 130px;
    height: 130px;
    width: 130px;
    box-shadow: 8px 5px 2px #000;
}

8px = décalage vers la droite
5px = décalage vers le bas
2px = intensité de l'ombre

2. les images sont déformées, le code ne se contente pas d'afficher seulement un cercle dans lequel apparait les images
Ok Smile

Dans ce cas, on change la CSS pour appliquer le style sur la balise "figure" et pas sur l'image, ce qui donne :
Code:

.postprofile-details.postdetails .avatar-posteur {
    border: 3px solid #ffffff;
    border-radius: 130px;
    box-shadow: 8px 5px 2px #000;
    height: 130px;
    margin: auto;
    overflow: hidden;
    text-align: center;
    width: 130px;   
}

Miettes
****

Féminin
Messages : 382
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar avec ombre en Cercle pour Invision

Message par LDL le Jeu 17 Mar 2016 - 18:17

ah ! ca a failli !



l'image reste déformée et un double cercle décalé apparait, du au double fonction je suppose sur les deux attributs...

résultat :
http://14022010.fullsubject.com/t1-sujet-type-pour-tests#2

.


Dernière édition par LDL le Jeu 17 Mar 2016 - 19:53, édité 1 fois

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar avec ombre en Cercle pour Invision

Message par Feuilla' le Jeu 17 Mar 2016 - 18:38

Bonjour,
une ligne en plus permet de remettre les images dans l'état correct : Smile
Code:
.postprofile-details.postdetails .avatar-posteur {
    border: 3px solid #ffffff;
    border-radius: 130px;
    box-shadow: 8px 5px 2px #000;
    height: 130px;
    margin: auto;
    object-fit: cover;
    overflow: hidden;
    text-align: center;
    width: 130px;   
}
L'image ne laissera pas de blanc autour (elle prendra la place disponible) et ne sera pas aplatie/écrasée par les dimensions (width et height) qui sont responsables de sa déformation. Wink
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Avatar avec ombre en Cercle pour Invision

Message par LDL le Jeu 17 Mar 2016 - 18:44

je viens de rajouter cette ligne cover, mais le probleme reste tout a fait intact malheureusement...

(double cercle blanc décalé et image déformée...)
Sad

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar avec ombre en Cercle pour Invision

Message par Feuilla' le Jeu 17 Mar 2016 - 18:55

Re,
il faut la mettre sur .postprofile-details.postdetails .avatar-posteur img ça marchera mieux : Wink
Code:
.postprofile-details.postdetails .avatar-posteur img {
    border: 4px solid #FFF;
    border-radius: 130px;
    height: 130px;
    width: 130px;
    box-shadow: 4px 6px 2px #000;
    object-fit: cover;
}
Et pour le cercle blanc double, il faut supprimer la ligne border de .postprofile-details.postdetails .avatar-posteur img, parce que vous avez deux. Wink
Mais n'enlevez pas celle de l'autre plutôt que celle-ci sinon la bordure sera la mauvaise ! Exclamation
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

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

Résolu Re: Avatar avec ombre en Cercle pour Invision

Message par LDL le Jeu 17 Mar 2016 - 19:51

@Feuilla' a écrit:Re,
il faut la mettre sur .postprofile-details.postdetails .avatar-posteur img ça marchera mieux : Wink
...........................................


Super, tout est réglé !

Et bien un grand merci a vous deux, que dire d'autres, y a t'il un problème qui vous résistera ?
(peut-être mon slide-in sur lequel tout le monde se casse les dents depuis 2011 ! 12 sujets ici , aucune soluce pour l'instant, a voir...).

en attendant, comme d'hab, tout est réglé, image non déformée, plus de double cercle, donc hop !
je passe en mode RÉSOLU pour le lock service.

encore mille mercis !









.

LDL
****

Masculin
Messages : 235
Inscrit(e) le : 31/07/2009

http://goon-forum.com/
LDL a été remercié(e) par l'auteur de ce sujet.

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


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