Cadre arrondi sur un avatar

[Nially]

Bonjour!
Désolée si la question a déjà été posée, je cherche depuis des heures sur le forum et sur Google... en vain...

Je voudrais faire un cadre arrondi autour des avatars du profil.
Facile!

Mais je voudrais que ce cadre s'affiche AU-DESSUS des avatars et masque ce qui en dépasse.
J'ai la forme bien tracée en bas de la capture d'écran. Mais l'avatar chevauche le cadre en haut... T.T

Spoiler:

Quelqu'un pourrait-il m'aider, s'il vous plaît?

[kheino]

Bonjour,

Je vois que tu as le template viewtopic_body modifié.
Peux-tu donner seulement la cellule (td --> /td) concernant le profil ?
Pareil pour le CSS, aussi seulement ce qui concerne le profil des messages ?

[Gorgorbey]

Bonjour,

Quel CSS avez-vous mis pour faire ce cadre et quelle est la version de votre forum ?

Cordialement.

[Nially]

Coucou Alors voilà le bout de template:
(pardon c'est un peu fouillis ^^")

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} align="center" valign="top" width="150">
         <div class="tout-profil">
            <span class="postdetails poster-profile">
<br>
                                  <div class="cadre-avatar">{postrow.displayed.POSTER_AVATAR}</div>
<br><br >
                              <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><font style="font-family: AR BERKLEY;" size="5">{postrow.displayed.POSTER_NAME}</font></span>
                                  <br />
                                  <div class="rang">{postrow.displayed.POSTER_RANK}<br>
                                    {postrow.displayed.RANK_IMAGE}</div>
<br><br>            
                                <div class="champ"> <!-- 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}</div>
         </span><br />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
                                  </div></td>

et le CSS correspondant:

Code:

.tout-profil{
  border: 1px solid #797C7E;
  background-color: #ffffff;
  padding: 5px;
}

.cadre-avatar{
  border:10px solid #797C7E;
  width:190px;
  height:310px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 70px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 70px;
  -webkit-border-top-left-radius: 10px;
}

.rang{
  border: 1px solid #797C7E;
  background-color: #ffffff;
  padding: 5px;
}

.champ{
  border: 1px solid #797C7E;
  background-color: #ffffff;
  padding: 5px;
}

Le forum est en version phbb2.

[Gorgorbey]

Ajoutez ceci à votre CSS :

Code:

.postdetails img
{
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 70px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 70px;
  -webkit-border-top-left-radius: 10px;
}

[Nially]

Ouiiii!! Merci beaucoup pour ton aide, Gorgorbey!
Ca marche nickel, fini l'arrachage de cheveux

Problème résolu