Avatar décalé à l'affichage du profil [résolu] Bouton_activeAvatar décalé à l'affichage du profil [résolu] Bouton_hoverAvatar décalé à l'affichage du profil [résolu] Fb-hoverAvatar décalé à l'affichage du profil [résolu] Fb-active
C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Sous-forums en retour à la ligne
Avatar décalé à l'affichage du profil [résolu] EmptyVen 24 Mai 2019, 17:59 par XeWuP

» Slideshow horizontal infini
Avatar décalé à l'affichage du profil [résolu] EmptyJeu 16 Mai 2019, 20:22 par Cezzy

» [RPG] Fiche de présentation
Avatar décalé à l'affichage du profil [résolu] EmptyJeu 02 Mai 2019, 15:19 par Joy_Remington

» Rapporter un bug
Avatar décalé à l'affichage du profil [résolu] EmptyJeu 25 Avr 2019, 11:25 par Orange

» Barre(s) Hitskinienne
Avatar décalé à l'affichage du profil [résolu] EmptySam 20 Avr 2019, 14:20 par @ngelEarth

» Effet pour vos sous-forums
Avatar décalé à l'affichage du profil [résolu] EmptyVen 19 Avr 2019, 12:53 par XeWuP

» Pour faire des beaux titres de sous-forums
Avatar décalé à l'affichage du profil [résolu] EmptyVen 19 Avr 2019, 12:52 par XeWuP

» [phpBB2] Arrondir le cadre du forum
Avatar décalé à l'affichage du profil [résolu] EmptyVen 19 Avr 2019, 10:46 par @ngelEarth


Partagez
 

Avatar décalé à l'affichage du profil [résolu]

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
{ Membre }
{ Membre }

Féminin Messages : 100



Avatar décalé à l'affichage du profil [résolu] Empty
Bonjour !

J'ai un petit problème de décalage de l'avatar sur la droite dans l'affichage de mon profil, quand on est dans un sujet.
Problème en image : https://i.servimg.com/u/f56/18/44/36/25/vbhbx10.png
L'avatar se décale bizarrement sur la droite et se retrouve quasiment collé au contenu du sujet.

Voici les codes :
Code:
.profil_speudo {
            background-color:#ffffff;
  width:200px;
  font-weight:normal!important;
  font-family: times new roman;
  font-size:15px;
  text-align: right;
  margin-bottom: -8px;
          -moz-border-radius:1px 1px 1px 1px;
          -webkit-border-radius:1px 1px 1px 1px;
            border-radius:1px 1px 1px 1px;}
        
        .profil_avatar {
          border: solid 1px #3f5e8d;
          -moz-border-radius:1px 1px 1px 1px;
          -webkit-border-radius: 1px 1px 1px 1px;
          border-radius:1px 1px 1px 1px;
          img-align: center;
          padding: 5px;
          width: 200px;
          height: 320px;
         }
        
        .profil_infos {
          background-color: #;
          -moz-border-radius:1px 1px 1px 1px;
          -webkit-border-radius:1px 1px 1px 1px;
          border-radius:1px 1px 1px 1px;
          padding: 5px;}
        
        .font_profil{
            border: solid 2px #;
          -moz-border-radius:2px 2px 2px 2px;
          -webkit-border-radius:2px 2px 2px 2px;
          border-radius:2px 2px 2px 2px;
          padding: 5px;}

.border{
  background-image:URL('http://uprapide.com/images/invite/regydf.png');
  width: 200px;
  height: 20px;}
 
.description{position: relative;z-index: 0;}

.description span img{border: 1px;padding: 0px;}

Code:
   <div align="center">
                            <div style="font-family: times new roman; font-size: 10px; padding: 10px; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px 1px 1px 1px;-webkit-border-radius: 1px 1px 1px 1px;-o-border-radius: 1px 1px 1px 1px; width: 200px;  -moz-box-shadow: 0px 0px 0px #FFFFFF; box-shadow: 0px 0px 0px #FFFFFF; -webkit-box-shadow: 0px 0px 0px #FFFFFF;">
                        
                              <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
                                </div>
                          </div><div style="background-color:#c6d2e3;position:relative;width:200px;">{postrow.displayed.RANK_IMAGE}</div>
                            <div style="background-color: #CFD3D6; padding: 3px;width:200px;margin-top:2px;"><div align="justify" style="margin:10px; font-family: tahoma; font-size:12px; color: #000000;"> <!-- BEGIN profile_field -->
                                            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                              <!-- END profile_field --></div></div><div class="border"></div>

J'ai déjà essayé de retirer le padding de la classe .profil_avatar, ce qui colle la bordure à l'image de l'avatar et donne l'impression que le décalage est réglé, alors que non.

Merci d'avance pour votre aide !


Dernière édition par Nye-Hael le Lun 03 Mar 2014, 08:13, édité 1 fois
MessageSujet: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyDim 02 Mar 2014, 11:36
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Avatar décalé à l'affichage du profil [résolu] Empty
En fait, dans ton CSS pour .profil_avatar tu as mis une largeur (width: 200px) et un padding (5px).

Ton but est qu'au total, en comptant la bordure + le padding + le contenu, cela fasse 200px c'est bien ça ?

Manque de bol, en CSS il y a un petit truc bien chiant... Par défaut la largeur (width) correspond à la largeur du contenu... La largeur totale de ton bloc est donc : 200px (contenu) + 5px (padding-left) + 5px (padding-right) ce qui donne donc... 210 px ! (212px si on compte les bordures).

Si tu veux une image qui fasse 200px, il faut que changes la largeur de tes blocs en dessous.
Si tu veux des blocs de 200px il faut que tu changes la largeur de l'image.

Bon, ensuite au niveau du code :
A un endroit tu as ceci :
Code:
<div align="center">
 <div style="font-family: times new roman; font-size: 10px; padding: 10px; border-radius: 1px 1px 1px 1px;-moz-border-radius: 1px 1px 1px 1px;-webkit-border-radius: 1px 1px 1px 1px;-o-border-radius: 1px 1px 1px 1px; width: 200px;  -moz-box-shadow: 0px 0px 0px #FFFFFF; box-shadow: 0px 0px 0px #FFFFFF; -webkit-box-shadow: 0px 0px 0px #FFFFFF;">
 <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
 </div>
</div>

Pourquoi mettre 3 div ? Surprised.
Tu pourrais à la place mettre ceci :
Code:
<div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>

Puis dans ton CSS, tu mettrais tout simplement ceci :
Code:
.profil_avatar {
    width: 190px; /* 200px - 5px - 5px (largeur totale - padding gauche - padding droit) */
    height: 310px; /* 320px - 5px - 5px (hauteur totale - padding haut - padding bas) */
    padding: 5px;
    border: solid 1px #3f5e8d;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    text-align: center;
}

.profil_avatar > img {
    width: 100%; /* pour que l'image prenne 100% de la largeur */
}
C'est un code un peu plus simple normalement Smile

Attention néanmoins à mettre en supprimer le CSS dont tu n'as plus besoin :
Code:
.profil_avatar {
              border: solid 1px #3f5e8d;
              -moz-border-radius:1px 1px 1px 1px;
              -webkit-border-radius: 1px 1px 1px 1px;
              border-radius:1px 1px 1px 1px;
              img-align: center;
              padding: 5px;
              width: 200px;
              height: 320px;
             }
Petite note : img-align n’existe pas comme propriété CSS Wink

C'est peut être un peu compliqué, dis moi si tu ne comprends pas quelque chose Very Happy !


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyDim 02 Mar 2014, 13:20
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
{ Membre }
{ Membre }

Féminin Messages : 100



Avatar décalé à l'affichage du profil [résolu] Empty
Bonsoir !

Le problème c'est que l'avatar est vraiment décalé vers la droite, et après avoir essayé tes codes... Je me retrouve confrontée à tout autre chose, en plus du décalage. xD

J'obtiens ceci : https://i.servimg.com/u/f57/16/06/42/02/aquegr10.png
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyDim 02 Mar 2014, 17:36
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Avatar décalé à l'affichage du profil [résolu] Empty
Dans le CSS j'ai fait une petite erreur, c'est
Code:
.profil_avatar img {
    width: 100%; /* pour que l'image prenne 100% de la largeur */
}

au lieu de
Code:
.profil_avatar > img {
    width: 100%; /* pour que l'image prenne 100% de la largeur */
}



Pourrais tu m'envoyer ton template complet + tout le CSS qui correspond ^^
Car moi sinon en copiant ce que tu as le problème est résolu ^^

Si je prend le code sur http://i-m-radioactive.forumactif.org/t27-mise-en-page-ton-poisson-rouge, tu as une div avec la class "font_profil" avec un padding (donc un décalage à gauche), plus un align="center" dans son code HTML... Si ça correspond à ton template, alors l'erreur vient de là aussi ^^


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyDim 02 Mar 2014, 17:42
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
{ Membre }
{ Membre }

Féminin Messages : 100



Avatar décalé à l'affichage du profil [résolu] Empty
Voici les codes CSS et HTML

Code:
.profil_speudo {
            background-color:#ffffff;
  width:200px;
  font-weight:normal!important;
  font-family: times new roman;
  font-size:15px;
  text-align: right;
  margin-bottom: -8px;
          -moz-border-radius:1px 1px 1px 1px;
          -webkit-border-radius:1px 1px 1px 1px;
            border-radius:1px 1px 1px 1px;}
       
        .profil_avatar {
    width: 190px; /* 200px - 5px - 5px (largeur totale - padding gauche - padding droit) */
    height: 310px; /* 320px - 5px - 5px (hauteur totale - padding haut - padding bas) */
    padding: 5px;
    border: solid 1px #3f5e8d;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    text-align: center;
}

.profil_avatar img {
    width: 100%; /* pour que l'image prenne 100% de la largeur */
}
       
        .profil_infos {
          background-color: #;
          -moz-border-radius:1px 1px 1px 1px;
          -webkit-border-radius:1px 1px 1px 1px;
          border-radius:1px 1px 1px 1px;
          padding: 5px;}
       
        .font_profil{
            border: solid 2px #;
          -moz-border-radius:2px 2px 2px 2px;
          -webkit-border-radius:2px 2px 2px 2px;
          border-radius:2px 2px 2px 2px;
          padding: 5px;}

.border{
  background-image:URL('http://uprapide.com/images/invite/regydf.png');
  width: 200px;
  height: 20px;}
 
.description{position: relative;z-index: 0;}

.description span img{border: 1px;padding: 5px;}

Code:
   <div align="center" class="font_profil">
                <div align="center"><div class="profil_speudo">
      {postrow.displayed.POSTER_NAME}
                            </div></div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
                          </div><div style="background-color:#c6d2e3;position:relative;width:200px;">{postrow.displayed.RANK_IMAGE}</div>
                            <div style="background-color: #CFD3D6; padding: 3px;width:200px;margin-top:2px;"><div align="justify" style="margin:10px; font-family: tahoma; font-size:12px; color: #000000;"> <!-- BEGIN profile_field -->
                                            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                              <!-- END profile_field --></div></div><div class="border"></div>
         
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />

Je suis un peu moins sûre pour le code du template, mais je pense que c'est ça.
Et sinon, je me retrouve avec : http://i-m-radioactive.forumactif.org/t27-mise-en-page-ton-poisson-rouge ceci, après modification du code.
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyDim 02 Mar 2014, 18:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Avatar décalé à l'affichage du profil [résolu] Empty
Tu peux simplifier un peu ton HTML :

La div autour de 'profil_speudo' peut être supprimée, ainsi que la div 'font-profil' :

Ce qui donne donc :
Code:
<div class="profil_speudo">
        {postrow.displayed.POSTER_NAME}
</div>

<div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>

<div style="background-color:#c6d2e3;position:relative;width:200px;">{postrow.displayed.RANK_IMAGE}</div>
<div style="background-color: #CFD3D6; padding: 3px;width:200px;margin-top:2px;">
    <div align="justify" style="margin:10px; font-family: tahoma; font-size:12px; color: #000000;">
        <!-- BEGIN profile_field -->
        {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
        <!-- END profile_field -->
    </div>
</div>
<div class="border"></div>

<img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />

Attention, dans le CSS il y a des choses à modifier :
Enlever le code CSS pour .font-profil, qui avait d'ailleurs des bugs :s
Code:
.font_profil{
                border: solid 2px #;
              -moz-border-radius:2px 2px 2px 2px;
              -webkit-border-radius:2px 2px 2px 2px;
              border-radius:2px 2px 2px 2px;
              padding: 5px;}

Pour .profil_speudo, enlever le margin-bottom négatif :
Code:
.profil_speudo {
                background-color:#ffffff;
      width:200px;
      font-weight:normal!important;
      font-family: times new roman;
      font-size:15px;
      text-align: right;
      margin-bottom: -8px; /* ENLEVER CETTE LIGNE LA ! ! ! ! ! ! */
              -moz-border-radius:1px 1px 1px 1px;
              -webkit-border-radius:1px 1px 1px 1px;
                border-radius:1px 1px 1px 1px;}

Donc au final voici comment ton CSS devrait rendre :
Code:
.profil_speudo {
    background-color: #fff;
    width: 200px;
    font-weight: 400 !important;
    font-family: times new roman;
    font-size: 15px;
    text-align: right;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px 1px 1px 1px;
    border-radius: 1px 1px 1px 1px;
}

.profil_avatar {
    width: 190px; /* 200px - 5px - 5px (largeur totale - padding gauche - padding droit) */
    height: 310px; /* 320px - 5px - 5px (hauteur totale - padding haut - padding bas) */
    padding: 5px;
    border: solid 1px #3f5e8d;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    text-align: center;
}

.profil_avatar img {
    width: 100%; /* pour que l image prenne 100% de la largeur */
}

.profil_infos {
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px 1px 1px 1px;
    border-radius: 1px 1px 1px 1px;
    padding: 5px;
}

.border {
    background-image: URL(http://uprapide.com/images/invite/regydf.png);
    width: 200px;
    height: 20px;
}

.description {
    position: relative;
    z-index: 0;
}

.description span img {
    border: 1px;
    padding: 5px;
}


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyLun 03 Mar 2014, 05:51
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
{ Membre }
{ Membre }

Féminin Messages : 100



Avatar décalé à l'affichage du profil [résolu] Empty
Merci ! c'est déjà beaucoup mieux comme ça

Il y a juste un espace assez conséquent en bas de l'avatar, et la bordure est collée à la cellule des infos du profil, qui doit normalement être espacée du reste.
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyLun 03 Mar 2014, 07:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Avatar décalé à l'affichage du profil [résolu] Empty
Alors pour l'espace assez conséquent en bas de l'avatar, cela va se régler dans le CSS pour .profil_avatar : il faut enlever la hauteur (height).
Code:
height: 310px;

Pour mettre un espace il suffit de rajouter une marge. Pour le css de .profil_avatar, tu ajoutes ceci :
Code:
margin-bottom: 15px;

Ce qui te donne donc au final pour .profil_avatar :
Code:
.profil_avatar {
    width: 190px; /* 200px - 5px - 5px (largeur totale - padding gauche - padding droit) */
    padding: 5px;
    margin-bottom: 15px;
    border: solid 1px #3f5e8d;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    text-align: center;
}


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyLun 03 Mar 2014, 07:58
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
{ Membre }
{ Membre }

Féminin Messages : 100



Avatar décalé à l'affichage du profil [résolu] Empty
C'est parfait comme ça !
Merci beaucoup !
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyLun 03 Mar 2014, 08:12
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Avatar décalé à l'affichage du profil [résolu] Empty
Contente d'avoir pu t'aider Very Happy

N'hésite pas à essayer de simplifier ton code le plus possible Smile. Pense aussi à éviter de mettre le code css directement dans les balises, exemple :
Code:
<div style="background-color: #CFD3D6; padding: 3px;width:200px;margin-top:2px;">

Ca serait mieux de rajouter une classe et ensuite de régler cela en CSS ^^, et cela sera plus simple à gérer ensuite Razz


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] EmptyLun 03 Mar 2014, 12:20
Revenir en haut Aller en bas
Contenu sponsorisé




Avatar décalé à l'affichage du profil [résolu] Empty
MessageSujet: Re: Avatar décalé à l'affichage du profil [résolu]   Avatar décalé à l'affichage du profil [résolu] Empty
Revenir en haut Aller en bas
 

Avatar décalé à l'affichage du profil [résolu]

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Avatar décalé à l'affichage du profil [résolu]
» Affichage dans profil des sujets et messages d'un utilisateur
» Problème d'affichage dans profil personnalisé
» Problème d'affichage du profil avec Internet Explorer 9
» Affichage du profil du "joueur" sur un post

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forumactif.com