Un cadre graphique autour de l'avatar ?
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Un cadre graphique autour de l'avatar ?
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é ^^
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é ^^
Dernière édition par Jack&Rose le Dim 28 Juil 2013 - 21:32, édité 1 fois
Re: Un cadre graphique autour de l'avatar ?
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,
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
Re: Un cadre graphique autour de l'avatar ?
Bonjour,
Le cadre que tu utilises est large. Il faut augmenter le padding de facilement 20 pixels de plus.
Le cadre que tu utilises est large. Il faut augmenter le padding de facilement 20 pixels de plus.
Matriochka- Membre actif
- Messages : 7604
Inscrit(e) le : 14/07/2010
Re: Un cadre graphique autour de l'avatar ?
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 :
et en CSS :
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 !
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
Re: Un cadre graphique autour de l'avatar ?
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 :
Pour les avatars, une largeur et hauteur fixe :
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.
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.
Re: Un cadre graphique autour de l'avatar ?
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 ;-)
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
Re: Un cadre graphique autour de l'avatar ?
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
En attendant, je peux mettre en résolu. Merci encore
Sujets similaires
» Cadre autour de l'avatar
» Cadre autour de la PA
» Cadre autour des photos
» Cadre autour des avatars
» Cadre autour des icônes
» Cadre autour de la PA
» Cadre autour des photos
» Cadre autour des avatars
» Cadre autour des icônes
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum