problème de warp d'annonces (div)

30 septembre 2021 à 22:51:38

bonjour j'ai un site avec des annonces et je voudrais que celles ci ne puissent qu'être 5 par ligne et warper sur la ligne en dessous si il y en a plus, pour le moment je n'arrive pas à le faire, j'espère que vous pourrez m'aider.

voilà le css

.annonce_main_container{
    display: flex;
    flex-direction: column;
    max-width: fit-content;
    min-width: 100px;
    height: 11%;
    min-width: 11%;
    grid-row: 1/5;

}
#request_result{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    padding-left: 5%;
    padding-right: 5%;
    width: 90%;
}
.annonce_main_container_search{
    display: flex;
    flex-direction: column;
    width: 12%;
    height: 11%;
    grid-row: 1/5;
    grid-row: 1;
    margin-left: 5%;
}
.annonce_image{

    flex: 1;
    width: 100%;
    height: 80%;
}

pour l'exemple le site est disponible sur : https://france-visual.go.yj.fr/shop/

pour le html vous pouvez aller sur le site c'est un echo php donc un peu compliqué a donner en une partie

donc voila le html mais je garantit pas tout

<!DOCTYPE html>
<html lang=FR>
    <head>
        <!--head et meta-->
        <meta http-equiv="Content-Type" content="text/html/img; charset=utf-8" allowfullscreen>
        <link rel="icon" type="image/png" href="images/bagx1.png">
        <title>shop</title>
        <link rel="stylesheet" href="style/shop.css">
    </head>
    <body>
            <!--main content-->
            <div id='maincontent'>
                <!--top panel as header-->
                <header>
                        <a href=""><img src="" alt="logo"></a>
                        <form id='search_bar' action="index.php?action=search" method="POST">
                            <input id='searsh_bar_bar' name='search_content' type="search" placeholder="Le model de vos rêves est surment ici ..." required minlength="2" maxlength="50">
                            <button id="submit_search" type="submit"><img src="images/loope1x.png" alt="search button"></button>
                        </form>
                    <div id="connect_and_bag">
                        <a href=""><img src="images/bagx1.png" alt="pannier"></a>
                        <a href="account.php?action=auth"><img src="images/accountx2.png" alt="logo compte"></a>
                    </div>
                </header>
                <!--main content child-->
                <div id='maincontent_child'>
                        <!--acceuil-->
                        <div id='home_banner'>
                            
                            </div>
                        <!--contenu_principal_annonces etc-->
                        <div id="annonces_container">
                            <div id="request_result">

                                                <a class="annonce_main_container_search" href="annonces.php?article=3">
                                                    <img class="annonce_image" src="media/puma.jpg" alt="puma shoes">
                                                    <div class="annonce_main_content">
                                                        <h3>Puma Wild Rider</h3>
                                                        <p>puma</p>
                                                        <h4>120 €</h4>
                                                    </div>
                                                </a>

                                                <a class="annonce_main_container_search" href="annonces.php?article=4">
                                                    <img class="annonce_image" src="media/puma1.jpg" alt="puma shoes">
                                                    <div class="annonce_main_content">
                                                        <h3>Puma Future Rider</h3>
                                                        <p>puma</p>
                                                        <h4>130 €</h4>
                                                    </div>
                                                </a></div>                                <div>
                                    <div id='home_annonces_txt'>
                                    <h3 class="home_annonces_txt_padding_suppr" id='home_annonces_txt_underligne'>Découvrez nos</h3>
                                    <h4 class="home_annonces_txt_padding_suppr" >Plus beaux produits</h4>
                                    </div>
                                <div id="home_annonces">
                                

                                    <a class="annonce_main_container" href="annonces.php?article=1">
                                        <img class="annonce_image" src="media/vans
.png
" alt="vans">
                                        <div class="annonce_main_content">
                                            <h3>vans natural 2021</h3>
                                            <p>vans</p>
                                            <h4>100 €</h4>
                                        </div>
                                    </a>

                                    <a class="annonce_main_container" href="annonces.php?article=2">
                                        <img class="annonce_image" src="media/airforce1.png" alt="air force 1">
                                        <div class="annonce_main_content">
                                            <h3>air force 1</h3>
                                            <p>nike</p>
                                            <h4>120 €</h4>
                                        </div>
                                    </a>

                                    <a class="annonce_main_container" href="annonces.php?article=3">
                                        <img class="annonce_image" src="media/puma.jpg" alt="puma shoes">
                                        <div class="annonce_main_content">
                                            <h3>Puma Wild Rider</h3>
                                            <p>puma</p>
                                            <h4>120 €</h4>
                                        </div>
                                    </a>

                                    <a class="annonce_main_container" href="annonces.php?article=4">
                                        <img class="annonce_image" src="media/puma1.jpg" alt="puma shoes">
                                        <div class="annonce_main_content">
                                            <h3>Puma Future Rider</h3>
                                            <p>puma</p>
                                            <h4>130 €</h4>
                                        </div>
                                    </a>

                                    <a class="annonce_main_container" href="annonces.php?article=5">
                                        <img class="annonce_image" src="media/nikelemon.png" alt="nike lemon drop">
                                        <div class="annonce_main_content">
                                            <h3>Nike Dunk Low WMNS Lemon Drop</h3>
                                            <p>nike</p>
                                            <h4>300 €</h4>
                                        </div>
                                    </a></div></div>                            </div>
                                    </div>
            </div>
            <!--maincontent end-->
        <footer>
                <div class="section_footer">
                    <p class='title_section_footer'>Une suggestion, Une question ?</p>
                    <a href="contact.php">Contactez nous</a>
                </div>
                <div class="section_footer">
                <p class='title_section_footer'>Plus proches de nous</p>
                    <p>nos résaux</p>
                    <a href="https://instagram.com/">instagram</a>
                    <a href="https://twitter.com/">twitter</a>
                </div>
            </footer>    </body>
</html>

merci beaucoup de votre aide

ChrisLebure

1 octobre 2021 à 14:14:56

Bonjour,

Pour moi, c'est une question de PHP et non de CSS, visiblement tu extrais les annonces d'une base de données, il y a donc une boucle de traitement qui lit les annonces et les affiche : j'ajouterais dans la boucle un compteur qui s'incrémente pour chaque annonce, et toutes les 5 annonces, je ferme la <div> parent et j'ouvre de nouveau une <div> parent, avec remise à zéro du compteur.

Ainsi on aura une ligne ( = div parent) toutes les 5 annonces, la dernière ligne affichant les annonces restantes

Mais si les annonces ont une largeur exprimée en pourcentage du parent (par exemple 20%), il n'y a rien à faire de particulier, si ce n'est de passer la div parent générale en flex, avec flex-wrap:wrap;

tou dépend de ce que tu veux comme affichage pour chaque annonce

-
Edité par ChrisLebure 1 octobre 2021 à 14:38:45

Nicolas Hesse

1 octobre 2021 à 19:16:09

salut merci de ta réponse pour donner un exemple concret le but c'est de faire des annonces comme les miniatures de vidéos sur YouTube et j'ai pas l'impression que ce soit en php chez eux

ChrisLebure

2 octobre 2021 à 8:15:53

OK je vais regarder les miniatures youtube, je te tiens au courant

Nicolas Hesse

2 octobre 2021 à 11:04:56

d'accord merci beaucoup

après recherche ça fonctionne avec --ytd-rich-grid-slim-items-per-row:5;

-
Edité par Nicolas Hesse 2 octobre 2021 à 11:09:41

ChrisLebure

2 octobre 2021 à 11:25:08

oui en fait, le conteneur parent est une flexbox, et la largeur des éléments est calculée avec une variable css --ytd-rich-grid-slim-items-per-row qui fixe le nombre d'éléments par ligne (avec une autre variable pour les marges)

width: calc( 100% / var(--ytd-rich-grid-items-per-row) - var(--ytd-rich-grid-item-margin) - 0.01px );

comme le nombre d'élément par ligne change selon la largeur du viewport, il doit y avoir une redéfinition de la variable --ytd-rich-grid-slim-items-per-row dans les media queries

j'ai fait un essai rapide sur ce principe, ça marche très bien, on redéfinit la variable dans les media queries selon les largeurs de viewport

As tu déja utilisé les variables en CSS ?