Bonjour bonjour !!

Me revoilà pour vous jouer un mauvais touuuur ! (a)

Alors, dans un premier temps, j'ai besoin de résoudre un léger mini maxi problème.
J'ai utilisé ces deux codes pour les attribuer aux avatars des membres apparaissant dans les sujets. La rotation fonctionne très bien, mais le contour, lui, ne se colle pas aux côtés des avatars, qui font 100*100. Et je comprends absolument pas pourquoi.

http://www.css-actif.com/t7121-effet-de-rotation
http://www.css-actif.com/t877-contour-autour-de-l-avatar

Voici deux captures : https://i.servimg.com/u/f39/12/03/49/16/captur10.png  &  https://i.servimg.com/u/f39/12/03/49/16/captur11.png

Voici les codes :

Code:

rotate.contours {
  border: 5px solid #d6d2ce;
}

.rotate {
    -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

.rotate:hover {
    -webkit-transform: rotate(20deg);
      -moz-transform: rotate(20deg);
        -o-transform: rotate(20deg);
            transform: rotate(20deg);
}

La partie du template concernée :

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <br />
                  <div class="rotate" style="border: 5px solid #d6d2ce;" align="center">{postrow.displayed.POSTER_AVATAR}</div><br />
                  <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><center><strong>{postrow.displayed.POSTER_NAME}</strong></center></span>
            <span class="postdetails poster-profile">
                                  <center>{postrow.displayed.POSTER_RANK}</center><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 />
         <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Donc en premier lieu, je voudrais régler ce problème.
Ensuite, j'aimerai utiliser ce code, http://www.css-actif.com/t13510-effet-de-volet-glissant-sur-un-bloc, pour essayer d'obtenir un truc dans le genre (c'est un montage sous toshop).

https://i.servimg.com/u/f39/12/03/49/16/00110.jpg
&
https://i.servimg.com/u/f39/12/03/49/16/00210.jpg

Mais je ne sais pas trop comment m'y prendre pour ne pas perdre de temps et réussir du premier coup, sans prendre de risque. Et ça me parait légèrement complexe avec les templates et tout ça. D'ailleurs, est-ce que c'est tout simplement possible ?

Merci d'avance pour les futures réponses !  

Hello Akya,

Je suis pas super dispo ces temps ci, désolée pour le retard de réponse ^^'
Histoire d'aller plus vite, pourrais tu poster un lien vers le forum concerné pour que je puisse regarder directement ^^ ?

Bonne soirée !

Coucou Nihil,

Aucun soucis, prends ton temps. Et désolée, j'ai oublié les bonnes habitudes. ;P

Une div est une balise HTML de type bloc. Cela signifie que par défaut, elle prendra 100% de la largeur disponible ^^
Du coup, cela ne colle pas aux bords de ton avatar, mais par rapport à la largeur possible.

Une solution ?
Si la taille des avatars est toujours de 100px de largeur, dans le CSS il te suffit de définir une largeur pour cette div .

Voici un exemple en modifiant légèrement ton HTML (j'ai enlevé le style, et j'ai rajouté une seconde classe).

Code:

<div class="rotate bloc-avatar" align="center">{postrow.displayed.POSTER_AVATAR}</div>

Code:

.bloc-avatar {
     border: 5px solid #d6d2ce;
     /* suite du CSS ici */
}

Ensuite tu peux rajouter une largeur à ta div ^_____^

PS : Au tout début du CSS fourni, tu avais mis ceci :

Code:

rotate.contours {
  border: 5px solid #d6d2ce;
}

Cela ne peut pas marcher, car il manque un point devant "rotate". (le point indique que c'est une classe, l'absence de point signifie qu'il cherche à sélectionner la balise "rotate" ^^)

Ceci explique cela.  :hélé: C'est vrai que j'ai jamais trop su quelle était l'utilité de mettre un point ou non devant une classe. Maintenant, je sais. ;P
Alors ça fonctionne tout bien comme il faut, juste, l'avatar n'est plus centré bizarrement. Pourtant on a bien mis un center dans le code html...

Pour centrer un élément de type block en CSS, c'est très simple : tu lui donnes une largeur (ça tu l'as déjà fait) et tu lui rajoutes des marges latérales automatiques
Le navigateur se charge de faire le calcul de la taille des marges pour center :p

Il te suffit donc de rajouter au CSS précédent (pour la div) ceci :

Code:

margin: auto;

Qu'est ce que je suis bête... J'ai pas eu cet automatisme.
Au passage, tu vois la petite image en dessous des infos, qui ressemble à un timbre ? C'est un champ que j'ai créé dans le profil où les membre pourront choisir le timbre qu'ils veulent, y'en a plusieurs, et j'aurai voulu savoir si tu pensais qu'on pouvait centrer cette image dans la colonne, toujours avec le margin auto ? Je pense que ça doit être possible, sans doute via les template, je sais pas...

Bon quoiqu'il en soit, pour l'avatar, c'est réglé ! Merci bien.    Tu penses pouvoir m'aider pour mon deuxième "problème" exposé dans mon premier poste ?

Akya a écrit:

Qu'est ce que je suis bête... J'ai pas eu cet automatisme.
Au passage, tu vois la petite image en dessous des infos, qui ressemble à un timbre ?

Est ce que tu pourrais rendre visible aux invités ce champ de profil ? (c'est dans les réglages de ce champs de le panneau d'admin)

Akya a écrit:

Bon quoiqu'il en soit, pour l'avatar, c'est réglé ! Merci bien. Tu penses pouvoir m'aider pour mon deuxième "problème" exposé dans mon premier poste ?

Si je comprends bien, tu veux faire un volet glissant derrière le profil, c'est ça ?

Voilà, les invités peuvent le voir. :3

Oui tout à fait, c'est bien ça !

Ton deuxième problème m’intéresse ! Je vais donc attendre une reponse de la part de Nihil

Akya a écrit:

Au passage, tu vois la petite image en dessous des infos, qui ressemble à un timbre ? C'est un champ que j'ai créé dans le profil où les membre pourront choisir le timbre qu'ils veulent, y'en a plusieurs, et j'aurai voulu savoir si tu pensais qu'on pouvait centrer cette image dans la colonne, toujours avec le margin auto ? Je pense que ça doit être possible, sans doute via les template, je sais pas...

Tu peux mettre ceci :

Code:

.postdetails.poster-profile > img {
    display: block;
    margin: auto;
}

Mais attention, ça centrera toutes les images dans les infos
Éventuellement si ce sont des images prédéfinies et que tu ne veux pas que les autres images des infos soient centrées, il y a une autre technique.
Le principe est le même :

• on sélectionne les images dans les infos de profil
  .postdetails.poster-profile > img
  
• Les images sont pas de type block, donc triche un peu avec "display: block" pour la forcer à devenir un type block, pour que les margin fonctionnent.
  
• Et ensuite on la centre avec margin: auto
  

Pour ta deuxième question oui c'est faisable sans être trop compliqué XD. On s'y attaque si la solution proposée au dessus fonctionne
Comme ça, on fait une chose à la fois o/

Oui, c'est nickel pour moi. Et merci pour les explications. Ça fonctionne bien jusqu'à présent. On peut passer à la suite !

Alors, juste avant de commencer, je t'invite à lire quelques informations sur le positionnement en CSS, plus particulièrement le fonctionnement de position: relative et position: absolute.
Tu peux par exemple regarder sur ce site là : http://fr.learnlayout.com/toc.html à la rubrique "position".

En effet, la première étape sera de positionner les infos de profil en haut à gauche d'un autre élément (celui avec le nom et l'avatar) pour obtenir le rendu sur ton deuxième schéma. Pour cela nous utiliserons le positionnement en CSS. Il nous reste à définir : à quel élément va-t-on mettre position: relative et à quel élément va-t-on mettre position: absolute ?

Première chose que tu peux faire dans ton template : mettre une div (avec une classe) pour entourer tout le profil, puis faire (à l'intérieur) une div qui englobera les infos de profil (ce que tu veux mettre à gauche).

À quel élément va-t-on mettre position: relative et à quel élément va-t-on mettre position: absolute ?

Alors en théorie, si je ne me trompe pas, relative sera pour le panneau déroulant en lui même, et absolute, pour son contenu ?

Pour les div dans le template, je t'avoue que je suis un peu pommée. Je vois bien ce qui correspond à l'avatar, au rang, au pseudo, mais pas le reste...

Tu peux simplement faire par élimination   
Dans le code de ton template (que tu as mis au premier post) si tu enlèves le nom, l'avatar, le rang, tu te retrouveras avec les infos de profil o/ (infos + fiche de personnage si elle est activée)

Code:

<!-- BEGIN profile_field -->
     {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->

Pour les infos de profil... Et juste en dessous dans le template, la feuille de personnage (:

1. Entoure tout ton profil dans une div (met lui une classe).
   (la div doit être à l'intérieur de la balise td)
   
2. Fait une div pour le bloc qui coulisse, et met dedans le contenu que tu veux.
   (Cette div doit être à l'intérieur de ton profil )
   

On va avancer petit à petit ne t'inquiète pas ^^