Souci structure de SITE

Par Levendivin, il y a 4 ans

Les bases HTML/CSS

Bonsoir,

Je ne sais pas où poster ce topic, cela concerne plus la structure d'un site, mais comme il n'est fait qu'en HTML et CSS, je l'ai mis ici.

Je crée un site en HTML/CSS avec Bootstrap, mon souci est la mise en publication des travaux, voici le code d'une ligne avec 4 colonnes, je place mes miniatures en 4 colonnes, chaque miniature correspond à un projet, le projet le plus récent est au début, c'est logique, mais comme le navigateur lit le code du haut en bas, c'est très fastidieux quand j'ai un nouveau projet à ajouter, je suis obligée de tout décaler :

<div class="row no-gutters">
    <div class="col-xs-6 col-md-6 col-lg-3">
        <img class="card-img" src="img/graphisme/mirage-mini.jpg" alt="mirage sur l'eau">
    </div>
    <div class="col-xs-6 col-md-6 col-lg-3">
        <img class="card-img" src="img/graphisme/violinist-mini.jpg" alt="violoniste">
    </div>
    <div class="col-xs-6 col-md-6 col-lg-3">
        <img class="card-img" src="img/graphisme/analects_mini.jpg" alt="analecte">
    </div>
    <div class="col-xs-6 col-md-6 col-lg-3">
        <img class="card-img" src="img/graphisme/shiquan-mini.jpg" alt="logo shiquan">
    </div>  
</div>

Avez-vous des pistes pour détourner cela ? Je serai preneuse. Merci.

Bonne journée

10 réponses

Arzou, il y a 4 ans

Hello !
Je n'utilises pas bootstrap donc mes connaissances sur le sujet sont assez limitées, mais pourquoi n'utiliserais tu pas css grid natif plutôt ? Au moins tu définis le nombre de colonne de ta grille, et au fur et a mesure des projets, ils s'ajouterons automatiquement :)

Sinon avec bootstrap il n'y a pas une histoire de col auto ? A mon avis ça doit être possible .. peut être un pro du framework passera par la ;)

Levendivin, il y a 4 ans

Salut !
Car je veux une grille responsive, j'ai passé du temps pour apprendre et ai fait déjà pas mal de chose pour le site. C'est juste que je rends compte que cette structure (Bootstrap ou sans) est vachement pénible en terme de maintenance et mise à jour.

Arzou, il y a 4 ans

Justement, avec css grid, tu parametre par exemple que tu veux 4 colonnes, que sur tablette, tu en veux 3, et sur mobile 1 par exemple. Et après peut importe ce que tu rajoute, tes projets seront rajouté dans ta grille automatiquement.
Après, le top bien entendu pour ne pas trop galérer à copier coller des nouveaux projets sans cesse, c'est d'utiliser du php par exemple, pour boucler.

Levendivin, il y a 4 ans

Je crois que tu n'as pas trop cerné mon problème, ce n'est pas cela. Mais bon, là après réflexion, j'ai peut-être trouvé la solution, je vous dirai.

Levendivin, il y a 4 ans

Non, cela ne marche pas, car cela laisse les colonnes vides au début, ce n'est pas bon.
En fait, ce que je veux est un système qui place les miniatures les plus récentes au début, et les plus anciens à la fin, là dans mon cas c'est l'inverse, est-ce qu'on peut changer l'ordre des miniatures ?

Arzou, il y a 4 ans

D'accord, du coup regarde sur la doc de bootstrap, il y a des classes order mais bon à mon avis ça va revenir au même ..
En natif, avec css grid et flexbox, tu peux le gérer plus facilement .. tu peux inverser l'odre des colonnes

Levendivin, il y a 4 ans

Je me suis penchée sur les Grid CSS, cela a l'air pas mal, je vais essayer. L'ordre des colonnes peut avoir des conséquences néfastes par la suite, donc ce n'est pas une piste que je vais explorer.

Levendivin, il y a 4 ans

Hello,
J'ai réussi avec le Grid CSS, et en plus la grille des miniatures est responsive. Merci d'avoir partagé les conseils.

Bonne soirée

Arzou, il y a 4 ans

Ah super, bonne nouvelle :)

cinquiemeDimension, il y a 4 ans

Salut,
T'as trouvé mais je réponds pour les autres mecs qui vont tomber sur ce sujet.
Tu peux utiliser flexbox avec un flex-direction:row-reverse peut-être. C'est aussi inclus dans bootstrap.
Donc une <div class="row d-flex flex-row-reverse"></div> qui va contenir tous tes projets, le plus récent en dernier et ça t'affichera le plus récent en premier.
Je ne saurais que trop, par contre, te conseiller de te pencher sur le PHP qui va rendre cette tâche beaucoup plus simple.