Bonjour à tous, 

J'essaye d'aligner des blocs de news (baise li pour listes à puces) sur la même ligne horizontale en HTML/CSS et je n'y arrive pas ...Je n'arrive pas à voir ce qui cloche dans mon code...

Est-ce que quelqu'un pourrait m'aide s'il vous plait? 

Voici le code html

<section>

			<h2>Nos derniers articles</h2>

			<ul class="blocs-home">

			  <li>

				<a href="article-1.html" title="LE TRI PAR CARTE : SIMPLE ET FACILE">

					<div class="imgBox">

		               <h5>news</h5>

		               <img src="images/images-test-1.jpg" width="290" height="90" alt="images-test-1"/>		             

                	</div>

       				<div class="dataBox ">

                       <time>12 février 2016</time>

                    </div>

               		<h3>LE TRI PAR CARTE : SIMPLE ET FACILE</h3>    

                  	<p>Lorem ipsum blablablabla Lorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablabla.</p>              

               	</a>

               </li>



               <li>

				<a href="article-1.html" title="LE TRI PAR CARTE : SIMPLE ET FACILE">

					<div class="imgBox">

		               <h5>news</h5>

		               <img src="images/images-test-1.jpg" width="290" height="90" alt="images-test-1"/>		             

                	</div>

       				<div class="dataBox ">

                       <time>12 février 2016</time>

                    </div>

               		<h3>LE TRI PAR CARTE : SIMPLE ET FACILE</h3>    

                  	<p>Lorem ipsum blablablabla Lorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablabla.</p>                  	

               	</a>

               </li>



               <li>

				<a href="article-1.html" title="LE TRI PAR CARTE : SIMPLE ET FACILE">

					<div class="imgBox">

		               <h5>news</h5>

		               <img src="images/images-test-1.jpg" width="290" height="90" alt="images-test-1"/>		             

                	</div>

       				<div class="dataBox ">

                       <time>12 février 2016</time>

                    </div>

               		<h3>LE TRI PAR CARTE : SIMPLE ET FACILE</h3>    

                  	<p>Lorem ipsum blablablabla Lorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablablaLorem ipsum blablablabla.</p>                

               	</a>

               </li>

			</ul>

	</section>

et le code CSS

.blocs-home
		{
			width: 290px;
		}

				.blocs-home li 
				{
					display: inline;
					border: medium;
					border-color: black;
				}

Merci!!

Sonia

Salut !

Utilise flexbox plutôt, tu y arriveras mieux.

Sur ton conteneur : display: flex; justify-content: space-around;

Sur tes li : width: valeur souhaitée;

Je te renvoie au chapitre sur les flexbox du cours.

Bon courage !

Salut 

Tu peux y arriver avec la méthode inline-block.

Cependant tu dois indiquer la taille des width de tes balises li à l'intérieur de leur conteneur.

Tu peux mettre en % attention la somme de tes block inférieure à 100% (dans mon exemple 3 fois 33% donne 90% on est bon).

Pour les pixel la somme des width inférieur à la width du block parent donc pour toi 296px.

Essai ce code :

.blocs-home
        {
            width: 290px;
            display: inline-block;
        }
 
                .blocs-home li
                {
                    display: inline-block;
                    width: 30%;
                    border: medium;
                    border-color: black;
                }

Bonjour, 

Merci @ThibautMonesma. J'avais déjà tenté; mais je n'avais pas eu de résultats satifaisant! alors avec ton code tous les éléments sont alignés mais tous serrés à gauche. Ils ne prennent pas la largeur de la page. Alors j'ai modifié pour ce code (j'ai enlevé inline-block pour blocs-home et mis un inline tout simple):

.blocs-home
        {
            width: 296px;
            display: inline;
        }
  
                .blocs-home li
                {
                    display: inline-block;
                    width: 30%;
                    border: medium;
                    border-color: black;
                }

Bon du coup reste pour moi à comprendre pourquoi il me faut un display: inline; dans .blocs-home et un display: inline-block; dans .blocs-home li. 

Et effectivement, @Rys_Navlys. Merci. j'y ai pensé hier soir, c'éait ma deuxième solution. Mais je voulais d'abord essayer de régler le problème avec la solution des listes. Bon comme tu peux voir, ce n'est pas tout à fait compris... :) 

Aussi, en responsive : c'est un désastre. J'ai encore plein de trucs à apprendre

Bonne journée! 

Sonia 

PS:

Voici le résultat : 

-
Edité par SoMonia 22 février 2017 à 11:11:58

Le comportement est tout à fait normal !

Un inline-block peut avoir une largeur définie (ici width 290px), donc les 3<li> prennent chacun 33% de la largeur indiquée, soit 290/3 px. Donc c'est tout serré à gauche mais c'est ce que tu demandes.

Avec un inline, on ne peut pas définir de largeur, donc le width 290px n'est pas pris en compte, le bloc prend la largeur de son contenu, soit 33% d'un bloc qui prend la largeur de son contenu (c'est le serpent qui se mord la queue donc le navigateur interprète en donnant la largeur maximale soit 100% de la largeur de l'affichage. Du coup non seulement c'est basé sur l'interprétation de chaque navigateur, mais en plus tu as une déclaration inutile à supprimer (le width).

J'espère avoir été assez clair pour expliquer la différence. Du coup  je me permet d'insister sur l'utilisation des flexbox ;).

Petit exemple en gardant ta structure en listes : http://codepen.io/Rys_Navlys/pen/GWKNaa

PS : border: medium ? Tu es sûre de toi ?

PS2 : pour le responsive, utilise la propriété flex-wrap et des min-width en pixels, ainsi les blocs seront mis les uns sous les autres plutôt que d'être trop ratatinés.

-
Edité par Rys•sa.Navlys 22 février 2017 à 12:35:41

Super @Rys_Navlys merci!! Oui j'y suis, sur les flexbox. 

heu border: medium...je ne sais pas où je suis allée chercher ça. Je voulais mettre solid. 

Ah oui effectivement, pour la largeur, c'est logique. Je testerai tout à l'heure.

Merci encore!

Sonia