Image au dessus de l'avatar
2 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
Image au dessus de l'avatar
Bonjour à tous,
Me voici avec un problème majeur. J'aimerais faire un profil graphique. Jusque-là, aucun problème. L'ennui étant que je ne parviens pas à mettre une image au dessus de l'avatar, dans le but de faire un cadre pour habiller... Mon image possède bien un fond transparent pour laisser apparaître l'avatar en dessous. Mais même avec une position et un z-index, rien ne fonctionne J'ai donc besoin de vos services, de vos connaissances surtout
Voici le forum sur lequel je travaille :
http://amazing-school.forumactif.org/
Voici mon css:
Bonne journée
Me voici avec un problème majeur. J'aimerais faire un profil graphique. Jusque-là, aucun problème. L'ennui étant que je ne parviens pas à mettre une image au dessus de l'avatar, dans le but de faire un cadre pour habiller... Mon image possède bien un fond transparent pour laisser apparaître l'avatar en dessous. Mais même avec une position et un z-index, rien ne fonctionne J'ai donc besoin de vos services, de vos connaissances surtout
Voici le forum sur lequel je travaille :
http://amazing-school.forumactif.org/
Voici mon css:
- Code:
.profilall{
width: 220px;
background-color: blue;
}
.nameprofil{
font-family: Tahoma;
font-size: 15px;
text-transform: lowercase;
}
.avatarprofil{
opacity: 0.8;
top: 8px;
z-index: 1;
}
.imageback{
background-image: url(http://img15.hostingpics.net/pics/816526essaidgdffg.png);
background-align: center;
position: relative;
width: 220px;
height: 340px;
z-index:4;
}
- Code:
<!-- BEGIN displayed -->
<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div class="profilall"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><center>{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</center></strong></span>
<span class="postdetails poster-profile">
<div class="imageback"><div class="avatarprofil"><center>{postrow.displayed.POSTER_AVATAR}</center></div></div>
<div class="nameprofil"><center>{postrow.displayed.POSTER_NAME}</center></div><br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br /></div>
Bonne journée
Dernière édition par Cheeralex le Lun 14 Oct 2013 - 9:04, édité 1 fois
Re: Image au dessus de l'avatar
Bonjour,
C'est votre image qui est trop grande et non centrée et qui masque votre cadre.
Ajouter ceci à votre CSS
C'est votre image qui est trop grande et non centrée et qui masque votre cadre.
Ajouter ceci à votre CSS
- Code:
div.avatarprofil a img {
margin-top: 45px;
max-width: 150px;
}
Re: Image au dessus de l'avatar
Merci beaucoup pour cette réponse très rapide
L'ennui était que l'avatar devient trop petit puisque sa taille doit faire 200*320 et si je mets à 200 la taille que vous m'avez donné, ça repasse par dessus :/
J'aimerais que l'image aille par dessus l'avatar... est-ce que je dois la placer directement dans le template? Car j'ai essayé, mais tout se déforme
Edit: J'ai réussi, mais maintenant, j'ai un résultat plutôt désolant
Il y a un grand écart entre le pseudo et l'avatar/image dessus puisque je l'ai placé après l'avatar directement dans le template. Hors, même en faisant un top, l'écart ne s'enlève pas...
L'ennui était que l'avatar devient trop petit puisque sa taille doit faire 200*320 et si je mets à 200 la taille que vous m'avez donné, ça repasse par dessus :/
J'aimerais que l'image aille par dessus l'avatar... est-ce que je dois la placer directement dans le template? Car j'ai essayé, mais tout se déforme
Edit: J'ai réussi, mais maintenant, j'ai un résultat plutôt désolant
Il y a un grand écart entre le pseudo et l'avatar/image dessus puisque je l'ai placé après l'avatar directement dans le template. Hors, même en faisant un top, l'écart ne s'enlève pas...
- Code:
.profilall{
width: 220px;
background-color: blue;
}
.nameprofil{
font-family: Tahoma;
font-size: 15px;
text-transform: lowercase;
}
.avatarprofil{
opacity: 0.8;
z-index: 1;
}
.imageback{
position: relative;
top: -320px;
width: 220px;
z-index:4;
}
- Code:
<div class="profilall"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong><center>{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</center></strong></span>
<span class="postdetails poster-profile">
<div class="avatarprofil"><center>{postrow.displayed.POSTER_AVATAR}</center></div><div class="imageback"><img src="http://img15.hostingpics.net/pics/816526essaidgdffg.png" align="center" /></div>
<div class="nameprofil"><center>{postrow.displayed.POSTER_NAME}</center></div><br /><br />
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br /></div>
Re: Image au dessus de l'avatar
à votre CSS, ajouter l'attribut «height: 20px;» à «.imageback».
Toutefois votre cadre est légèrement trop grand (hauteur) pour votre avatar, ce qui explique la bande bleu entre la fin de l'avatar et le bas de votre cadre.
Toutefois votre cadre est légèrement trop grand (hauteur) pour votre avatar, ce qui explique la bande bleu entre la fin de l'avatar et le bas de votre cadre.
Re: Image au dessus de l'avatar
Merci beaucoup pour ton aide MasDan, mais ce n'était pas cela. Cependant, j'ai résolu mon problème. Donc, merci à toi de t'y être penché, c'est gentil
Problème résolé
Problème résolé
Sujets similaires
» Comment mettre une image de fond à la chatbox?(Image que l'on voit lorque l'on est pas connecté).
» [résolu] image "messages privés" remplacée par l'image "nouveau message privé"
» Image aléatoire en image de fond pour mon forum général, comment procéder ?
» taille d'une image affichée sur le forum ne correspondant pas avec l'image originale
» Comment avoir une image en bas du forum tout en gardant l'image de fond
» [résolu] image "messages privés" remplacée par l'image "nouveau message privé"
» Image aléatoire en image de fond pour mon forum général, comment procéder ?
» taille d'une image affichée sur le forum ne correspondant pas avec l'image originale
» Comment avoir une image en bas du forum tout en gardant l'image de fond
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