Partage
  • Partager sur Facebook
  • Partager sur Twitter

Comment placer des images l´une à coté de l´autre

image appeler en php

Sujet résolu
    21 octobre 2021 à 18:35:51

    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%;
      
    }


    • Partager sur Facebook
    • Partager sur Twitter
      22 octobre 2021 à 17:00:12

      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.

      • Partager sur Facebook
      • Partager sur Twitter
        22 octobre 2021 à 18:44:28

        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 ?

        • Partager sur Facebook
        • Partager sur Twitter
          22 octobre 2021 à 20:18:15

          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

          • Partager sur Facebook
          • Partager sur Twitter
            23 octobre 2021 à 19:17:42

            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

            • Partager sur Facebook
            • Partager sur Twitter

            Comment placer des images l´une à coté de l´autre

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown