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
AccueilForumÉquipe 
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
Avatar décalé à l'affichage du profil [résolu] EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Avatar décalé à l'affichage du profil [résolu] EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Avatar décalé à l'affichage du profil [résolu] EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Avatar décalé à l'affichage du profil [résolu] EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Avatar décalé à l'affichage du profil [résolu] EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Avatar décalé à l'affichage du profil [résolu] EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Avatar décalé à l'affichage du profil [résolu] EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Avatar décalé à l'affichage du profil [résolu] EmptyMar 07 Fév 2023, 08:40 par Oxtran

Le Deal du moment : -29%
PC portable – MEDION 15,6″ FHD Intel i7 ...
Voir le deal
499.99 €

CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolusPartagez
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
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
Nihil
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 !
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
http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
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
Nihil
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 ^^
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
http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
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://2img.net/i/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
Nihil
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://2img.net/i/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;
}
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
http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
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
Nihil
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;
}
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
http://yggdrasill-treet.forumgratuit.org/
Nye-Hael
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
Nihil
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
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

-
» Question sur les infos du profil derrière l'avatar RESOLU
» [RESOLU] informations champs du profil derrière l'avatar, overflow ?
» Avatar coullissant(comme CSS actif) + avatar en dessous [Résolu]
» Personnalisation du profil sous l'avatar
» Rotation de l'avatar du profil.

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-
ChatBox
:
AccueilAccueil  RechercherRechercher  Dernières imagesDernières images  Connexion  S'enregistrerS'enregistrer  

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 | Signaler un abus | Forumactif.com