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 !

Bonjour,

Merci d'utiliser la balise code

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

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

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

Salut tu as plusieurs façon de faire :

• Utiliser float
• Utiliser inline-block
• Utiliser flexbox
• Utiliser grid

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

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

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

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

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.

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>