[Résolu] Aide sur css/Bootstrap

LunaticLunatic Member
janvier 2014 modifié dans Entraide et S.A.T
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 :

1389772570.png

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

1389772654.png

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 !

Réponses

  • je-evrardje-evrard Member
    janvier 2014 modifié
    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.
  • 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…)
  • tu peux greffer à bootstrap sans soucis regarde mon exemple dans le projet spx ici
  • Je viens de tester, ça fonctionne très bien.

    Merci beaucoup :)
  • J'espère que tu nous feras partager ce fameux thème ]:D
  • Oui oui c'est prévu ; mais faudra être indulgent, hein !
  • 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
  • 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…
  • Tout le problème est la !
  • LunaticLunatic Member
    février 2014 modifié
    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…
Connectez-vous ou Inscrivez-vous pour répondre.