Image au dessus de l'avatar

2 participants

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

Résolu Image au dessus de l'avatar

Message par Cheeralex Sam 12 Oct 2013 - 10:39

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 Arrow J'ai donc besoin de vos services, de vos connaissances surtout Very Happy

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;
}
Et mon template (du moins la partie qui concerne le profil)
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>
Merci par avance, pour toutes aides apportées ou conseil. Si possible, m'expliquer comment vous avez fait dans le but de comprendre et d'y parvenir une prochaine fois What a Face 
Bonne journée Hi


Dernière édition par Cheeralex le Lun 14 Oct 2013 - 9:04, édité 1 fois
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image au dessus de l'avatar

Message par MasDan Sam 12 Oct 2013 - 19:39

Bonjour,

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;
}
J'ai utilisé «Inspecter l'élement» pour identifier le problème.
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image au dessus de l'avatar

Message par Cheeralex Sam 12 Oct 2013 - 20:24

Merci beaucoup pour cette réponse très rapide Smile
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 Arrow

Edit: J'ai réussi, mais maintenant, j'ai un résultat plutôt désolant Arrow 
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>
merci par avance I love you 
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image au dessus de l'avatar

Message par MasDan Sam 12 Oct 2013 - 23:17

à 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.
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image au dessus de l'avatar

Message par Cheeralex Lun 14 Oct 2013 - 9:03

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 I love you


🇻🇺  Problème résolé 
Cheeralex

Cheeralex
***

Féminin
Messages : 141
Inscrit(e) le : 29/02/2012

http://dol-baran-rpg.forumactif.com/
Cheeralex 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