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
» Effet pour vos catégories
Mar 17 Juil 2018, 20:09 par vaaléeriiee

» Qui Est En Ligne - Utopia
Ven 06 Juil 2018, 23:20 par Vincent

» [RPG] Fiche personnage avec bannière latérale
Ven 29 Juin 2018, 06:27 par Tink

» [phpBB2] Sauvegarde des posts en cours d'écriture
Mar 26 Juin 2018, 02:30 par Laluna

» Apparition progressive du corps du forum
Dim 24 Juin 2018, 10:05 par Jimmy

» Formulaire de connexion rapide amélioré
Dim 24 Juin 2018, 10:03 par Jimmy

» Previsualiser le premier message d'un sujet
Dim 24 Juin 2018, 09:57 par Jimmy

» Trois colonnes avec effet Zoom
Mer 20 Juin 2018, 06:58 par Backflip


Partagez | 
 

Soucis de contours + Volet roulant

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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 : http://i39.servimg.com/u/f39/12/03/49/16/captur10.png  &  http://i39.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://illiweb.com/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).

http://i39.servimg.com/u/f39/12/03/49/16/00110.jpg
&
http://i39.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 !  I love you
MessageSujet: Soucis de contours + Volet roulant   Sam 05 Juil 2014, 06:32
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 Very Happy !


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Soucis de contours + Volet roulant   Lun 07 Juil 2014, 17:44
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



Coucou Nihil,

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

MessageSujet: Re: Soucis de contours + Volet roulant   Lun 07 Juil 2014, 17:50
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 Smile.

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" ^^)


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Soucis de contours + Volet roulant   Lun 07 Juil 2014, 18:31
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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...
MessageSujet: Re: Soucis de contours + Volet roulant   Mar 08 Juil 2014, 03:47
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 Smile
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;


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Soucis de contours + Volet roulant   Mar 08 Juil 2014, 04:59
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



Qu'est ce que je suis bête... J'ai pas eu cet automatisme. Sad
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 ?
MessageSujet: Re: Soucis de contours + Volet roulant   Mar 08 Juil 2014, 05:06
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Akya a écrit:
Qu'est ce que je suis bête... J'ai pas eu cet automatisme. Sad
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 ?


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Soucis de contours + Volet roulant   Jeu 10 Juil 2014, 08:37
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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

Oui tout à fait, c'est bien ça !
MessageSujet: Re: Soucis de contours + Volet roulant   Jeu 10 Juil 2014, 08:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
{ Membre }
{ Membre }

Masculin Messages : 9



Ton deuxième problème m’intéresse ! Je vais donc attendre une reponse de la part de Nihil Very Happy
MessageSujet: Re: Soucis de contours + Volet roulant   Jeu 10 Juil 2014, 12:27
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 Wink
É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 Wink
Comme ça, on fait une chose à la fois o/


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Soucis de contours + Volet roulant   Sam 12 Juil 2014, 11:00
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



Oui, c'est nickel pour moi. Smile Et merci pour les explications. Ça fonctionne bien jusqu'à présent. On peut passer à la suite !
MessageSujet: Re: Soucis de contours + Volet roulant   Sam 12 Juil 2014, 15:02
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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).


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Soucis de contours + Volet roulant   Mar 15 Juil 2014, 05:09
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



À 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...
MessageSujet: Re: Soucis de contours + Volet roulant   Mar 15 Juil 2014, 06:08
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 Smile )


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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Soucis de contours + Volet roulant   Jeu 17 Juil 2014, 08:39
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Soucis de contours + Volet roulant   
Revenir en haut Aller en bas
 

Soucis de contours + Volet roulant

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

 Sujets similaires

-
» Soucis de contours + Volet roulant
» [Fermé] supprimer search webnet + autres soucis
» Soucis avec itinéraire garmin 705
» GROS SOUCIS BBOX QUI COMME MOI ???
» soucis avec google chrome !!!

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 | Forum gratuit