Partage
  • Partager sur Facebook
  • Partager sur Twitter

ALIGNEMENT DE BLOCS À LA VERTICALE

FLEXBOX

    19 mars 2019 à 10:12:27

    bonjour, voici mon problème, je m'entraine à réaliser un site, dans la section principale j'ai créé plusieurs articles.

    Dans l'article "qui sommes nous ?", j'y insère des photos des membres de l'équipe (2 premières photos)

    Mon problème est le suivant, dans mon code CSS je met:

    img

    {

            float: left;

    }

    ainsi que

    #member_photo

    {

           flex-direction: column;

    }

    mais mes blocs se positionnent de manière désordonnée (dernière photo tout en bas)

    COMMENT FAIRE POUR LES ALIGNER A LA VERTICALE ET QU'ILS SOIENT FLOTANT AFIN QUE LE TEXTE SE POSITIONNE à DROITE DE CHAQUE PHOTO?

    Merci !

    • Partager sur Facebook
    • Partager sur Twitter
      Staff 19 mars 2019 à 10:14:50

      Bonjour,

      Merci d'utiliser la balise code Image

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Image de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

      Majuscules abusives

      L'écriture en majuscules est considérée comme une parole criée et diminue autant la lisibilité du texte que sa compréhension. Les majuscules abusives sont donc interdites aussi bien dans les titres que dans les messages.

      • Partager sur Facebook
      • Partager sur Twitter
      Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
        19 mars 2019 à 13:12:14

        Bonjour,

        Je ne suis pas un pro mais je te conseille de faire appel à des tableaux pour la mise en page, ce sera plus simple pour aligner les contenus verticalement par exemple.

        Dans ton fichier CSS il existe tout un tas de fonctions grâce à l'attribut GRID sinon sur ton fichier HTML tu as la balise TABLE qui permet de créer un tableau. 

        J'espère que ça aidera. :)

        -
        Edité par JaouedJackson 19 mars 2019 à 13:13:52

        • Partager sur Facebook
        • Partager sur Twitter
          19 mars 2019 à 14:25:31

          Non non non, la mise en page avec des tableaux c'est une méthode à proscrire et qui dépréciée depuis le milieu des années 90... Pourquoi conseiller une façon de faire périmée depuis plus de 20 ans ?

          De plus les standards HTML5 sont clairs, l'élément HTML <table> sert à représenter un tableau de données, c'est-à-dire des informations exprimées sur un tableau en deux dimensions et non pas à faire de la mise en page.

          -
          Edité par Mewen_bzh 19 mars 2019 à 14:28:56

          • Partager sur Facebook
          • Partager sur Twitter
          Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
            19 mars 2019 à 14:32:05

            Salut tu as plusieurs façon de faire :

            Si tu as des questions sur c'est différentes choses reviens nous voir...

            -
            Edité par noopy360 19 mars 2019 à 15:54:53

            • Partager sur Facebook
            • Partager sur Twitter
              19 mars 2019 à 16:40:13

              ok merci noopy360,

              alors comme tu peux le voir j'ai utilisé la propriété [float] et la valeur left pour rendre mes photos flotantes, ainsi que flexbox avec le code :

              #member_photo

               flex-direction: column;

              }


              Une idée de pourquoi ca ne fonctionne pas ?

              Bonne aprem

              • Partager sur Facebook
              • Partager sur Twitter
                19 mars 2019 à 16:43:07

                Dans ton code member_photo est une class et pas un id...

                • Partager sur Facebook
                • Partager sur Twitter
                Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
                  19 mars 2019 à 18:41:44

                  Bonjour AlexandrePradal

                  Tiens un exemple avec divers techniques que j'avais pour une autre personne

                  Peut-être que cela t'aidera

                  https://codepen.io/Zonecss/pen/jKOjmR

                  -
                  Edité par AliasDmc 19 mars 2019 à 18:42:00

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Découvrez les Css avec la zonecss.fr
                    Staff 19 mars 2019 à 20:24:54

                    Bonjour,

                    mon message plus haut n'était pas là pour faire joli.

                    Et sinon, float ne fonctionne pas dans un contexte flexbox, ça a été conçu comme ça.

                    • Partager sur Facebook
                    • Partager sur Twitter
                    Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
                      19 mars 2019 à 21:20:21

                      Il faut déjà faire un découpage cohérent par exemple pour chaque personne :

                      <article>
                        <h3>Titre</h3>
                        <p>
                          <a><img></a>
                          Texte, texte, texte,...
                        </p>
                      </article>



                      • Partager sur Facebook
                      • Partager sur Twitter
                      Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

                      ALIGNEMENT DE BLOCS À LA VERTICALE

                      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                      • Editeur
                      • Markdown