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
» Compte à Rebours
Mar 19 Fév 2019, 11:51 par TiGraou

» [RPG] Fiche personnage avec bannière latérale
Mar 19 Fév 2019, 11:42 par TiGraou

» Mettre la ChatBox en spoiler
Dim 17 Fév 2019, 18:47 par Backflip

» Effet de volet glissant sur un bloc
Ven 15 Fév 2019, 10:43 par Kanala

» Barre(s) Hitskinienne
Lun 11 Fév 2019, 23:00 par wildheart.

» Fond de message
Ven 08 Fév 2019, 19:55 par Scratpub

» [PA] Message d'Accueil Simple
Ven 08 Fév 2019, 16:34 par Scratpub

» [Plugin] Effet rollover sur une image
Dim 03 Fév 2019, 07:48 par .lysaivin


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
Akya
{ 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 : 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://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).

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   Sam 05 Juil 2014, 06:32
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Nihil
{ 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
Akya
{ 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
Nihil
{ 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
Akya
{ 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
Nihil
{ 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
Akya
{ 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
Nihil
{ 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
Akya
{ 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
Nihil
{ 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
Akya
{ 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
Nihil
{ 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
Akya
{ 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
Nihil
{ 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 avec itinéraire garmin 705
» menu déroulant et opacité
» Les phares s'éteignent en roulant sur Espace IV phase 2 3.5 V6
» Soucis sur la barre de navigation et option sur cathégories
» Petit soucis pour le nom de mon " nouveau " Forum

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