28172 sujets

CSS et mise en forme, CSS3

je suis en train de créer mon premier site e-commerce, et je veux mettre mes articles cote à cote, genre 4 article dans une ligne, après 4 en dessous etc.. pouvez vous m'aider svp? Smiley sweatdrop
eventdark a écrit :
Bonsoir ?
est ce que tu as déjà du code ?


Merci pour ce retour.

Oui voilà le code qui me permet de récuperer les données à partir d'une BDD.

<img src="admin/img/<?php echo $s->title; ?>.jpg" border=3 align=left/>
<h2><?php echo $s->title;?></h2>
<h5><?php echo $s->description; ?></h5>
<h4><?php echo $s->price; ?>€</h4>
Le plus simple est d'arriver à une structure du type flex.
Cela suppose de modifier ton PHP pour obtenir quelque chose comme ça

<div>
   <div>
      <img ...../>
      <h2>titre</h2>
      <h5>Description</h5>
      <h4>Prix</h4>
   </div>
   <div>
      <img ..... />
      <h2>titre</h2>
      <h5>Description</h5>
      <h4>Prix</h4>
   </div>
   Etc...
</div>


Avec les propriétés relatives au flex, tu peux tout gérer : display:flex, flex-basis, justify-item, align-item, etc...

Une remarque : je ne trouve pas très pertinent l'utilisation de balises h5 et h4 pour des éléments qui ne sont pas des titres.
Modifié par Alainpre (28 Apr 2020 - 17:43)
Le soucis est que je vais avoir une base de données avec plusieurs article donc c'est un peu moche de faire plusieurs div, ce code ci dessous me permet d'afficher tous mes articles de ma base de données l'un en dessus de l'autres.

<?php 
	
	require_once('inclures/header.php');

	$select = $db->prepare("SELECT * FROM product");
	$select->execute();
	while($s=$select->fetch(PDO::FETCH_OBJ)){
		?>
		<img src="admin/img/<?php echo $s->title; ?>.jpg" border=3 align=left/>
		<h2><?php echo $s->title;?></h2>
		<h5><?php echo $s->description; ?></h5>
		<h4><?php echo $s->price; ?>€</h4>
		<br/><br/>
		<?php
	
	}
		
	require_once('inclures/footer.php');

?>
Modérateur
Complexifier légèrement la structure HTML ne coute pas grand chose mais te permet de mieux gerer et différencier les contenus.

Voici une possibilité, qui s'en aucun CSS , afficheras correctement tes élements en te laissant la possibilité de les ciblé facilement à partir de ta feuille de style:
<?php 
	
	require_once('inclures/header.php');
?>
<section class="products">
<?php
	$select = $db->prepare("SELECT * FROM product");
	$select->execute();
	while($s=$select->fetch(PDO::FETCH_OBJ)){
?>
  <div class="product">
		<img src="admin/img/<?php echo $s->title; ?>.jpg" class="left" alt="" />
		<h2   class="titleProduct"><?php echo $s->title;?></h2>
		<div class="descProduct"><?php echo $s->description; ?></div>
		<p   class="priceProduct"><?php echo $s->price; ?>€</p>
  </div><!-- fermeture .product -->
		<?php
	
	}
		?>
  </div><!-- fermeture .products -->
<?php
	require_once('inclures/footer.php');

?>

Un bloc pour les produits , et un bloc pour chacun et des balises avec des class pour le contenu si tu veut y appliquer un font-size différent.
De cette façon , pas besoins de style en ligne. Avec des class facilement repérables, la feuille de style peut faire son job et être mise à jour sans retoucher le php.

Bon courage
merci pour ces retour, c'est vraiment gentil de votre part.
mais toujours compliqué pour moi les alignés.