Partage
  • Partager sur Facebook
  • Partager sur Twitter

Question flex et possition absolute

    13 avril 2018 à 16:59:20

    Bonjour, j'ai deux probleme sur un site actuellement:

    - le 1er est sur les images du portfolio, sur un ecran 24" je passe de 4 images par ligne à 3 ( normal j'ai mis la fonction flex-wrap: wrap; ) j'aimerais savoir si il es possible de fixer le nombre d'image par ligne ?

    - 2eme, sur mon formulaire de contact en bas de page, il "remonte" quand je diminue la fenetre ( je l'ai placé avec la fonction position: absolute ), y'a t-il un moyen de le fixer en bas sans qu'il remonte ?

    Voici le site en question: http://eddyhubert.weax.net/projet1/

    Merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter
      13 avril 2018 à 18:14:08

      Bonjour Eolynas

      2eme question :

      mets un position:relative sur le footer parent du formulaire #contact

      et redéfinit ton bottom de #contact

      1ere question :

      si tu définis ta classe imagepf a :

      .imagepf {
       width: 33.333333%;
       padding: 10px;
       min-width: 33.33333%;
       box-sizing: border-box;
      }

      cela devrait forcer a avoir toujours 3 img par ligne

      après il faudra adapter l'image avec un max-width : 400px ou pas à toi de voir

      -
      Edité par AliasDmc 13 avril 2018 à 18:25:01

      • Partager sur Facebook
      • Partager sur Twitter
      Découvrez les Css avec la zonecss.fr
        13 avril 2018 à 18:25:36

        Merci de ta réponse,

        Le soucis es que si je met en position relative, il y a un blanc en bas apres

        • Partager sur Facebook
        • Partager sur Twitter
          13 avril 2018 à 18:33:50

          Bonjour,

          Je ne vois pas très bien mais c'est bien la balise footer qui à la position relative et non #contat ?

          -
          Edité par AliasDmc 13 avril 2018 à 18:34:47

          • Partager sur Facebook
          • Partager sur Twitter
          Découvrez les Css avec la zonecss.fr
            13 avril 2018 à 18:48:23

            C'est sur le footer qu'il faut que tu le mettes.
            Puis changer le bottom: -255% de ton formulaire, exactement comme AliasDmc l'a dit.

            Ça permettra à ton formulaire de se positionner par rapport au footer.

            Là, ton formulaire est positionné à 255% de la hauteur de ta fenêtre vers le bas, en partant du bas de ta fenêtre.
            Du coup c'est normal que sa position change lorsque tu resize le navigateur. 

            -
            Edité par Syltaen 13 avril 2018 à 18:51:44

            • Partager sur Facebook
            • Partager sur Twitter
              13 avril 2018 à 19:04:12

              Je vois pas trop pourquoi le mettre sur le footer mais je vais tester ca, je suis sur mon tél donc je verrais demain

              Car là je vois pas trop pourquoi on dois mettre la position absolute sur le footer alors que je vais modifier l'emplacement du formulaire

              Peut être trop bosser aujourd'hui lol

              Merci en tout cas pour vos reponses

              • Partager sur Facebook
              • Partager sur Twitter
                13 avril 2018 à 19:23:53

                Tu dois laisser le position absolute sur le formulaire et mettre un position relative sur le footer.

                Un élément qui est en position absolute se positionne par rapport à son parent le plus proche ayant une position différente de "static" (qui est la position de base).

                Donc en mettant "position: relative" sur le footer, ton formulaire se positionnera par rapport à lui.
                Si après tu mets "bottom: 100px" sur ton formulaire, il se placera à 100px à partir du bas du footer.

                C'est un concept très important à garder en tête quand on utilise "position: absolute".

                • Partager sur Facebook
                • Partager sur Twitter
                  13 avril 2018 à 19:33:11

                  Bonjour

                  Le fait de mettre un position:relative sur le footer permet de redéfinit le point d'origine sur lequel bottom #contact va se positionner

                  cite :

                  Car là je vois pas trop pourquoi on dois mettre la position absolute sur le footer alors que je vais modifier l'emplacement du formulaire

                  J'ai pas dit position absolute j'ai dit position relative

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Découvrez les Css avec la zonecss.fr
                    13 avril 2018 à 21:33:12

                    Ahhh ok merci led gars je viens de comprendre 

                    Je reviens vers vous si besoin mais j'ai saisie le truc

                    Merci encore vous m'avez appris un truc ;)

                    • Partager sur Facebook
                    • Partager sur Twitter
                      14 avril 2018 à 22:55:50

                      Et concernant mon problème avec flex sur des petit ecran ( genre 15" ) quelqu'un a une idée ?
                      • Partager sur Facebook
                      • Partager sur Twitter
                        16 avril 2018 à 18:45:12

                        Bonjour Eolynas,

                        La proposition faite dans ma première réponse ne te convient pas? 

                        • Partager sur Facebook
                        • Partager sur Twitter
                        Découvrez les Css avec la zonecss.fr
                          17 avril 2018 à 1:11:01

                          Je n avais pas vu ta réponse ( jai regarder via le téléphone c'est moi pratique )

                          J'ai mis 20% et cela fonctionne bien

                          Me reste plus qu'à voir avec l'effet de "survol" qui bouge dans tout les sens quand je diminue la fenêtre et ca sera bon

                          Merci encore 

                          • Partager sur Facebook
                          • Partager sur Twitter

                          Question flex et possition absolute

                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                          • Editeur
                          • Markdown