Bonsoir,

voilà pour mon site ecommerce j´apelle les images en php

<div class="home">
	<div class="row">
		<div class="wrap">
			<?php $products = $DB->query('SELECT * FROM products'); ?>
			<?php foreach ( $products as $product ): ?>
				<div class="main">
  				<div class="collection-wrapper">
    			<div class="product-card">
      			<div class="product-card_information">
        		<picture class="product-card_image">
						<a href="#">
							<img src="img/<?= $product->id; ?>.jpg">
						</a>
				</picture>		
						<p class="product-card_title">
							<?= $product->name; ?>
						</p>
							<a href="#" class="price"><?= number_format($product->price,2,',',' '); ?> €</a>
						</div>
						
						<p class="product-card_price"><div class="bouton">
						<a class="add addPanier" href="addpanier.php?id=<?= $product->id; ?>">
							add
						</a>
						</div>
        <div class="product-card_swatches">
          <span class="product-card_swatch"></span>
        </div>
      </div>
    </div>
					</div>
				</div>
			<?php endforeach ?>
		</div>
	</div>
</div>

Mais impossible de les ranger l´une à coté de l´autre elle se range l´une en dessous de l´autre

mon Css

/*Feuille css pour Produits */

.bouton a {
background:    #38761d;
border-radius: 1000px;
padding:       20px 45px;
color:         #ffffff;
display:       inline-block;
font:          italic bold 15px/1 "Open Sans", sans-serif;
text-align:    center;
}




body {

margin:0; 
padding:0; 

text-align: center;
background-repeat: no-repeat;
background-size: cover; 
}

@font-face {
font-family: "teton";
src: url('font/teton.ttf');
}

@font-face {
font-family: "slim";
src: url('font/slim.ttf');
}





p{color:white;
text-align: center;
}

h1{color:#29FF6A;text-shadow: black 0.1em 0.1em 0.2em;
font-style: italic;
text-align: center;
font-size: 1.2em;
font-family: ;}

img {
  max-width: 25%;
  border-radius: 20px;
  max-height: 50%;
  margin:   20px;
}

.main {

  width: 100%; 
  
}

.collection-wrapper {
  
  flex-direction: row;
  margin: 20px;
  display:inline;
  
  
}

.product-card_price {
  font-family: slim;
  color:#29FF6A;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1rem;
}

.product-card_title {font-family: teton;
  color:#29FF6A;
  font-weight: 30px;
  
}



.product-card_information img {
  max-width: 25%;
  border-radius: 20px;
  max-height: 25%;
  
}

Yo ! 

Déja tu as des erreurs dans ton code, ton PHP est mal situer, met en forme ton fichier tu comprendra déjà mieux,

ensuite pour que deux conteneur soit sur la même ligne on utilise display inline-block

vérifie la largeur de ces deux conteneur que tu veux sur la même ligne et vérifie leurs marges.

la correction

<?php require 'header.php'; ?>


			<?php $products = $DB->query('SELECT * FROM products'); ?>
			<?php foreach ( $products as $product ): ?>
				<div class="main">
					<div class="collection-wrapper">

					<picture class="product-card_image">
						<a href="#"><img src="img/<?= $product->id; ?>.jpg"></a>
					</picture>

					<p class="product-card_title">
						<?= $product->name; ?>
					</p>

					<a href="#" class="price"><?= number_format($product->price,2,',',' '); ?> €</a></div>

					<p class="product-card_price"><div class="bouton">
						<a class="add addPanier" href="addpanier.php?id=<?= $product->id; ?>">
							add
						</a>
					</div>
					</div>
					</p>
				</div>
			<?php endforeach ?>
	


<?php require 'footer.php'; ?>

et du css

/*Feuille css pour Produits */

.bouton a {
background:    #38761d;
border-radius: 1000px;
padding:       20px 45px;
color:         #ffffff;
display:       inline-block;
font:          italic bold 15px/1 "Open Sans", sans-serif;
text-align:    center;
}




body {

margin:0; 
padding:0; 

text-align: center;
background-repeat: no-repeat;
background-size: cover; 
}

@font-face {
font-family: "teton";
src: url('font/teton.ttf');
}

@font-face {
font-family: "slim";
src: url('font/slim.ttf');
}





p{color:white;
text-align: center;
}

h1{color:#29FF6A;text-shadow: black 0.1em 0.1em 0.2em;
font-style: italic;
text-align: center;
font-size: 1.2em;
font-family: ;}

img {
  max-width: 25%;
  border-radius: 20px;
  max-height: 50%;
  margin:   20px;
}

.main {

  width: 100%; 
  
}

.collection-wrapper {
  
  flex-direction: row;
  margin: 20px;
  display:inline-block;
  
  
}

.product-card_price {
  font-family: slim;
  color:#29FF6A;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1rem;
}

.product-card_title {
  font-family: teton;
  color:#29FF6A;
  font-weight: 30px;
  
}



.product-card img {
  max-width: 100%;
  border-radius: 20px;
  max-height: 25%;
   display:inline-block;
}

mais je ne comprend pas comment avoir deux conteneurs ?
Au sens ou j´ai mon un seul code php qui appelle mes produits.
Si je remet une deuxième fois le même code php j´aurais deux fois le même produit en haut de page ?

Bonsoir, plusieurs manieres de faire ca vu que le foreach traite toute les cases du tableau tu peux faire une condition qui si elle est verifier(par exemple tu verifies si la position de l'element courant dans le tableau est superieur a 3) alors les echo php se feront dans ton conteneur deux, ou tu separes le tableau de base en deux tableaux qui via foreach s'ecriront dans tes deux conteneurs, c'est ce qui me viens a l'esprit apres peut etre y a t il meilleur solution.

-
Edité par zvheer 22 octobre 2021 à 20:19:49

je prend un autre exemple

la c´est par rapport a mes boutons de pagination généré en php

je voudrais qu´ils soient alignés au milieu de l´écran

<?php 
for ($i=1;$i<=$pagesTotales;$i++) {
	echo '<div class="boutonPag"><a href="bijoux.php?page='.$i.'">'.$i.'</a></div> ';
}


?>

CSS

.boutonPag a {
background:    #38761d;
border-radius: 90px;
padding:       25px;
color:         #ffffff;
margin: 0;
display: block;
float: left;
font:          italic bold 15px/1 "Open Sans", sans-serif;
text-align:    center;
max-width: 20px;
justify-content: center;

}

-
Edité par FélixLefebure 23 octobre 2021 à 19:33:22