Un cadre graphique autour de l'avatar ?

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

Résolu Un cadre graphique autour de l'avatar ?

Message par Jack&Rose le Dim 21 Juil 2013 - 21:55

Bonsoir !

Voilà, je cherche à un mettre un cadre graphique (et non un contour fait par le CSS) autour des avatars de mes membres, de la même façon que ce forum : http://www.filetdudiable.com/t167-creation-de-sortileges-d-enchantements Ce serait donc un cadre avec un espace à l'intérieur où l'avatar se met automatiquement. J'ai tenté de mettre une div autour des avatars puis d'indiquer background' url... mais cela ne marche pas :s

Voilà le cadre que je souhaite mettre : http://nsa34.casimages.com/img/2013/07/21/130721090102587488.gif

Merci d'avance Smile

PS : mon template n'est pas modifié ^^


Dernière édition par Jack&Rose le Dim 28 Juil 2013 - 21:32, édité 1 fois

Jack&Rose
**

Féminin
Messages : 57
Inscrit(e) le : 20/03/2013

http://revivisco.forumactif.org/
Jack&Rose a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un cadre graphique autour de l'avatar ?

Message par benneke le Lun 22 Juil 2013 - 9:22

Bonjour,

Comment avez-vous mis ce div autour de l'avatar ? Si vous avez bien mis le div, mis les marges correctes cela ne doit pas poser de souci. Quel était le résultat que vous aviez obtenu ?

Cordialement,

benneke
***

Messages : 150
Inscrit(e) le : 07/04/2012

http://www.guilde-aof.com
benneke a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un cadre graphique autour de l'avatar ?

Message par Jack&Rose le Lun 22 Juil 2013 - 12:44

Bonjour,

Eh bien j'avais mis cela :

Code:
<div class="avatar_profil">{postrow.displayed.POSTER_AVATAR}</div>

Puis dans mon CSS :

Code:
.avatar_profil {
background: url('http://nsa34.casimages.com/img/2013/07/21/130721090102587488.gif');
padding:5px;  }

Et j'obtiens ceci :

Merci d'avance Smile

Jack&Rose
**

Féminin
Messages : 57
Inscrit(e) le : 20/03/2013

http://revivisco.forumactif.org/
Jack&Rose a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un cadre graphique autour de l'avatar ?

Message par Matriochka le Lun 22 Juil 2013 - 12:47

Bonjour,

Le cadre que tu utilises est large. Il faut augmenter le padding de facilement 20 pixels de plus.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

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

Résolu Re: Un cadre graphique autour de l'avatar ?

Message par benneke le Lun 22 Juil 2013 - 14:01

La meilleure solution pour plus de compatibilité avec les différentes tailles d'avatar est de couper le cadre en 8 et de mettre 8 parties autour de l'avatar.
Je n'ai pas grand temps de tester et découper l'image, mais cela devrais donner qqch comme ceci :
Code:

<table class="avatar_profil">
<tr><td class="haut_gauche"></td><td class="haut_milieu"></td><td class="haut_droit"></td></tr>
<tr><td class="corps_gauche"></td><td class="corps_milieu">{postrow.displayed.POSTER_AVATAR}</td><td class="corps_droite"></td></tr>
<tr><td class="bas_gauche"></td><td class="bas_milieu"></td><td class="bas_droite"></td></tr></table>

et en CSS :
Code:
.avatar_profil .haut_gauche {
height : hauteur de la potion d'image;
width : largeur de la portion d'image;
background : url('url portion gauche') no-repeat;
}
.avatar_profil .haut_milieu {
background : url('url portion milieu fin') repeat-x;
}
.avatar_profil .haut_droite {
background : url('url portion droite') no-repeat;
width : largeur de la portion d'image;
}
.avatar_profil .corps_gauche {
background : url('url potion centre gauche' repeat-y;
}
.avatar_profil .corps_milieu {
background : white;
}
.avatar_profil .corps_droite {
background : url('url potion centre droite' repeat-y;
}
.avatar_profil .bas_gauche {
height : hauteur de la potion d'image;
background : url('url portion gauche') no-repeat;
}
.avatar_profil .bas_milieu {
background : url('url portion milieu') repeat-x;
}
.avatar_profil .bas_droite {
background : url('url portion bas droite') no-repeat;
}

en se basant sur une image découpée comme ceci :

Avec ce cadre, il faudra peut-être travailler avec des marges négatives pour la classe .corps_milieu afin de faire venir l'avatar sur les autres images. Ou alors tu recoupes l'image juste à la limite d'ou doit venir l'avatar et donc tu modifies un peu ton cadre

EDIT : après relecture, c'est effectivement en 8 qu'il faut couper et non en 6.  Par contre, je retravaillerais l'image pour pouvoir découper mieux, c'est à dire découper aux angles d'ou doit venir l'avatar, en enlevant la petite fresque qui est présente dans le bord intérieur du cadre.  Ce sera plus simple pour mettre en place.  Si besoin de plus d'infos ou d'aide pour la découpe ou le CSS, suffit de demander, je mettrai une ébauche ici en ligne et on ajustera quand ce sera publié sur votre forum.

Cordialement,

EDIT du 23/07 20:44 : ajout des balises fermantes </td> suite à la remarque de Nothal, bien vu l'ami !


Dernière édition par benneke le Mar 23 Juil 2013 - 20:45, édité 1 fois

benneke
***

Messages : 150
Inscrit(e) le : 07/04/2012

http://www.guilde-aof.com
benneke a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un cadre graphique autour de l'avatar ?

Message par Nothal le Mar 23 Juil 2013 - 12:30

Salut. Attention benneke, tu n'as pas refermé le td après "corps_droite" et "bas_droite".

Si je pouvais voir un profil, j’aurai directement tester, là il faudra sans doute revoir après essai.
Laisse ce que tu as fais, mais il faut attribuer une largeur fixe aux avatars,  puis les positionner.

Rajoute à .avatar_profil une position relative :
Code:
.avatar_profil{
  position: relative;
}

Pour les avatars, une largeur et hauteur fixe :
Code:
.avatar_profil img{
  width: XXpx;
  height: XXpx;
  position: absolute;
  top: XXpx;
  left: XXpx;
}

Tu mets la largeur et hauteur souhaité, à "top" tu places tes avatars à partir du haut, à left" tu places tes avatars à partir de la gauche.
Il faudra peut être rajouter un "max-widht" et un "max-height" pour les avatars, sauf si tous les avatars sont de la même taille.

Nothal
Nouveau membre

Messages : 9
Inscrit(e) le : 08/07/2013

http://test-reapers.forumactif.org/
Nothal a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un cadre graphique autour de l'avatar ?

Message par benneke le Mar 23 Juil 2013 - 20:43

Hello,

oui effectivement tu as raison Nothal (copier/coller quand tu nous tiens !)

Par contre petite remarque complémentaire à Nothal qui donne une solution pour des avatars qui ont exactement la même taille, car si l'utilisateur mets un avatar d'un autre rapport largeur/hauteur, l'image sera forcée sur ton rapport hauteur/longeur et le résultat sera moche.
Par contre, n'oublie pas de redimentionner ton cadre par rapport à tes avatars, car la le cadre fait 350x468 (rapport 1,3371) et les avatars font 200x320 (rapport 1,6) donc il ne passera jamais sans avoir été photoshoppé (gimpé pour les logiciels libres) avant;-)

Nothal te donne la formule de facilité si les images ont toujours la même taille et même rapport, moi je t'ai donné un code plus modulable pour la taille des avatars, mais il est vrai que ma méthode est plus lourde mais s'adapte automatiquement sur toutes les images.

PS.: si tu souhaites utiliser mon code, je corrige le code plus haut, on ne sait jamais ;-)

benneke
***

Messages : 150
Inscrit(e) le : 07/04/2012

http://www.guilde-aof.com
benneke a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un cadre graphique autour de l'avatar ?

Message par Jack&Rose le Dim 28 Juil 2013 - 21:30

Merci beaucoup pour ton code, c'est très gentil ! Je vais tester tout ça sur mon forum test Smile

En attendant, je peux mettre en résolu. Merci encore Very Happy

Jack&Rose
**

Féminin
Messages : 57
Inscrit(e) le : 20/03/2013

http://revivisco.forumactif.org/
Jack&Rose 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