Un cadre graphique autour de l'avatar ?

[Jack&Rose]

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 : https://nsa34.casimages.com/img/2013/07/21/130721090102587488.gif

Merci d'avance

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

[benneke]

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,

[Jack&Rose]

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

[Matriochka]

Bonjour,

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

[benneke]

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 !

[Nothal]

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.

[benneke]

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 ;-)

[Jack&Rose]

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

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