Soucis de contours + Volet roulant Bouton_activeSoucis de contours + Volet roulant Bouton_hoverSoucis de contours + Volet roulant Fb-hoverSoucis de contours + Volet roulant Fb-active
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
» Structure de Qui Est En Ligne (1)
Soucis de contours + Volet roulant EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Soucis de contours + Volet roulant EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Soucis de contours + Volet roulant EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Soucis de contours + Volet roulant EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Soucis de contours + Volet roulant EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Soucis de contours + Volet roulant EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Soucis de contours + Volet roulant EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Soucis de contours + Volet roulant EmptyVen 03 Fév 2023, 17:22 par Krager

Le deal à ne pas rater :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 Hz Google TV (Via ODR ...
499 €
Voir le deal

Partagez
 

Soucis de contours + Volet roulant

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Soucis de contours + Volet roulant Empty
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 !  I love you
MessageSujet: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptySam 05 Juil 2014, 06:32
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Soucis de contours + Volet roulant Empty
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 !
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptyLun 07 Juil 2014, 17:44
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Soucis de contours + Volet roulant Empty
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   Soucis de contours + Volet roulant EmptyLun 07 Juil 2014, 17:50
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Soucis de contours + Volet roulant Empty
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" ^^)
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptyLun 07 Juil 2014, 18:31
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Soucis de contours + Volet roulant Empty
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   Soucis de contours + Volet roulant EmptyMar 08 Juil 2014, 03:47
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Soucis de contours + Volet roulant Empty
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;
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptyMar 08 Juil 2014, 04:59
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Soucis de contours + Volet roulant Empty
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.  Soucis de contours + Volet roulant 2176505670  Tu penses pouvoir m'aider pour mon deuxième "problème" exposé dans mon premier poste ?
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptyMar 08 Juil 2014, 05:06
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Soucis de contours + Volet roulant Empty
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. Soucis de contours + Volet roulant 2176505670 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 ?
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptyJeu 10 Juil 2014, 08:37
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Soucis de contours + Volet roulant Empty
Voilà, les invités peuvent le voir. :3

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

Masculin Messages : 9



Soucis de contours + Volet roulant Empty
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   Soucis de contours + Volet roulant EmptyJeu 10 Juil 2014, 12:27
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Soucis de contours + Volet roulant Empty
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/
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptySam 12 Juil 2014, 11:00
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Soucis de contours + Volet roulant Empty
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   Soucis de contours + Volet roulant EmptySam 12 Juil 2014, 15:02
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Soucis de contours + Volet roulant Empty
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).
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptyMar 15 Juil 2014, 05:09
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Soucis de contours + Volet roulant Empty
À 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   Soucis de contours + Volet roulant EmptyMar 15 Juil 2014, 06:08
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Soucis de contours + Volet roulant Empty
Tu peux simplement faire par élimination  Soucis de contours + Volet roulant 3333627970 
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 ^^
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant EmptyJeu 17 Juil 2014, 08:39
Revenir en haut Aller en bas
Contenu sponsorisé




Soucis de contours + Volet roulant Empty
MessageSujet: Re: Soucis de contours + Volet roulant   Soucis de contours + Volet roulant Empty
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

-
» Contours
» Contours de l'avatar
» Modification contours
» Contours en pointillés
» [RÉSOLU] Volet et transparence

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 | Signaler un abus | Forum gratuit