[Résolu] Aide sur css/Bootstrap

Lunatic

Bonjour à tou·te·s,

Le non expert que je suis a besoin d'un petit coup de main avec les css, et plus particulièrement avec Bootstrap.

J'ai utilisé le site layoutit.com pour concevoir l'architecture — simple — d'un site en préparation. Celle-ci est conçue autour de 3 colonnes. L'idée est de reproduire mutatis mutandis l'organisation des « billets » sur Scoop.it, comme sur l'image suivante :



Le soucis que j'ai est immédiatement visible :



Comme on le voit donc, la hauteur différente des billets produit des espaces vides, que je ne sais combler.

Voici à quoi ressemble le bout de code dans home.php :

        <div class="row clearfix">
                <?php while($plxShow->plxMotor->plxRecord_arts->loop()): ?>
                <div class="col-md-4 column jul-boite-article">
                        <h2>
                                <?php $plxShow->artTitle(); ?>
                        </h2>
                        <p>
                                <?php $plxShow->artChapo(); ?>
                        </p><?php $plxShow->artTags('<span class="label label-default">#tag_name</span>',''); ?>
                        <hr />
                        <p>
                                Repéré par <?php $plxShow->artAuthor() ?>
                        </p>
                </div>
                <?php endwhile; ?>
        </div>

Ma demande est-elle facile à satisfaire ? Sinon… tant pis :P

Merci et bonne journée !

je-evrard

Tu as le choix d'utiliser plusieurs libs javascript pour ça :

masonry (plus léger)
ou
isotope (plus lourd)


La doc de masonry est simple et ne nécessite pas jquery obligatoirement.

Lunatic

Ah super, merci ! Je ne pensais pas qu'il fallait en passer par du javascript.

Du coup, selon toi, je peux « greffer » ça à bootstrap ou j'ai intérêt à réaliser ça sur un thème neuf, sans bootstrap ?

(désolé pour les questions de noob…)

je-evrard

tu peux greffer à bootstrap sans soucis regarde mon exemple dans le projet spx ici

Lunatic

Je viens de tester, ça fonctionne très bien.

Merci beaucoup

Jerry Wham

J'espère que tu nous feras partager ce fameux thème ]:D

Lunatic

Oui oui c'est prévu ; mais faudra être indulgent, hein !

Gzyg

Je pense que tu te serais moins embếté avec knacss qui gère ça en natif sans javasscript...

<div class="grid">
<div class="grid3">

ta boucle

</div>
</div>

Et hop !

Bootstrap, qui a d'autres arguments, a aussi ce type de système mais le code est plus long à fouiller et moins lisible (à mon avis).

Bon l'avantage de Bootstrap c'est que tu touches à peu de choses pour avoir un design correct, avec knacss, il faut partir de zéro.


Bon design !


à plus,

Gzyg

Lunatic

Juste pour info, je viens de découvrir que ce style « Masonry » peut se faire en pur css avec la propriété « column-count », cf. cette page. En changeant le display des articles en « inline-block », afin que ceux-ci ne risquent pas d'être répartis sur 2 colonnes, ça marche vraiment très bien.

Le seul soucis est que ça ne passe pas sous IE9…

je-evrard

Tout le problème est la !

Lunatic

J'ai tout de même oublié de préciser que le résultat est légèrement différent puisqu'en « pur css », l'organisation des articles se fait véritablement par colonne (donc les articles en bas de la colonne 1 sont plus récents que ceux en haut de la colonne 2) ; avec une solution reposant uniquement sur Masonry, on a bien une lecture de gauche à droite, les articles les plus récents se trouvant donc en haut…