Afficher chaque 3 articles dans une ligne

Fermé

abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017 - 17 avril 2017 à 14:55
firewalk - 27 juin 2017 à 18:30

Bonjour,
Je souhaite afficher les articles de ma base de données dans ma page web , j'ai téléchargé un template qui affiche sur chaque ligne 3 articles , j'ai pas trouvé comment faire pour afficher 3 articles par ligne :
je vous montre le code :


<?php
$sql_produit="select CArticle, LibArticle from Article where CFamille='$codeFamilleArticle'";
$stmt_produit=sqlsrv_query($conn,$sql_produit );
while($rslt_produit=sqlsrv_fetch_array($stmt_produit, SQLSRV_FETCH_NUMERIC))
{
  //var_dump($rslt_produit);
?>
<?php
}
?>
<div class="section group">
<div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g11.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g1.jpg" alt="">
<p>
Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
 </div>
<div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g22.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g2.jpg" alt="">
<p>
Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
</div>
 <div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g33.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g3.jpg" alt="">
<p>
 Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
</div>
</div>
<div class="section group">
<div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g99.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g9.jpg" alt="">
<p>
 Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
</div>
<div class="col_1_of_about-box span_1_of_about-box">
						  	    <div id="nivo-lightbox-demo"> <p> <a href="images/g77.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g7.jpg" alt="">
<p>
 Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
   </div>
 <div class="col_1_of_about-box span_1_of_about-box">
<div id="nivo-lightbox-demo"> <p> <a href="images/g88.jpg" rel="nofollow noopener noreferrer" target="_blank" data-lightbox-gallery="gallery1" id="nivo-lightbox-demo"> <span class="rollover1"> </span></a> </p></div>     
<img src="images/g8.jpg" alt="">
<p>
 Sed ut perspiciatis unde omnis ,
</p>
<p align="center"> <input type="number" name="Quantite[]"> </p>
</div>
<div class="clear"></div> 
</div>

A voir également:

Afficher chaque 3 articles dans une ligne
Aller à la ligne dans une cellule excel - Guide
Hors ligne instagram - Guide
Vente en ligne particulier - Guide
:3 smiley ✓ - Forum Mail
Picasa 3 - Télécharger - Albums photo

2 réponses

Réponse 1 / 2

forum92 Messages postés 220 Date d'inscription lundi 6 juillet 2015 Statut Membre Dernière intervention 14 août 2018 133
26 juin 2017 à 20:34

Bonjour,

<?php 
	//lire les articles  et les ranger dans un tableau
	foreach ( $mesArticles as $article ){
		$tab[] = $article ; 
	}	
		// count le nb d'articles
		$nbDeLignes = count ($mesArticles)/3;
		// afficher les lignes d'articles
		$numeroArticle = 0;
		
		for( $i = 0 ; $i < $nbDeLignes ; $i++){
			//une ligne
			echo '<div id="enLigne">
						<div> '.$tab[$numeroArticle].' </div>
						<div> '.$tab[$numeroArticle].' </div>
						<div> '.$tab[$numeroArticle].' </div>
				  </div>';			
		}
		?>

code CSS :

#enLigne{
	display : inline;
}

Réponse 2 / 2

firewalk
27 juin 2017 à 18:27

Salut,

euh il n'y a aucun moyen de faire tenir un texte sur une ligne en HTML. ET TANT MIEUX!!!

Un site Internet s'adapte à l'utilisateur, la plupart des sites sont consultés sur mobile(largement plus que la moitié des utilisateurs) ce qui implique écran et texte sur un petit écran.

Donc pour avoir 3 articles(?) qui tiennent sur une ligne il faudrait qu'il fasse moins de 3 syllabes chacun.

Sinon forum92 je vous invite à regarder la notice de display:inline; en CSS(sur le site du W3C) plutôt que de dire des bêtises :p

Vous pourrez voir que le style/comportement inline l'est pour le container et non son contenu, c'est d'ailleurs le comportement par défaut

Donc la bonne réponse est de faire une mise en page correcte (dont tenant compte de tout les affichages possibles) ou bien de faire quelque chose d'adaptative(plusieurs affichage selon les dimensions, voir media queries pour le CSS même si ce n'est pas le plus simple, un balise 'p'(paragraph) sans aucun CSS se comportera correctement pour ce que vous voulez).
Bien qu'il soit possible d'utiliser un texte avec formatage(via 'pre') je vous le déconseille toutefois.

firewalk
Modifié le 27 juin 2017 à 18:30

enfin plutôt que le css bidon de forum92(au fait évites aussi les div qui ne servent pas à écrire du contenu de façon sémantique et sont donc à relégué dans le passé du web) vous pouvez faire ceci:

p.maclasse{
width:100%;
}
Ce qui donnera au container de texte 100% de la taille qu'il peut prendre(donc le max).

Discussions similaires

programme qui n'affiche pas le mot secret

Que veut dire "correspondant occupé" lors d'un appel ?

Que signifie cet emoji :3

Afficher toutes les lignes masquées excel

Statut « en ligne » alors que non

Discussions similaires

Newsletters