Faire des colonnes intelligentes avec du CSS & JQuery

jquery-colonnes

Tutorial pour JQuery vu ce matin sur le blog sohtanaka.com. Le tutorial propose une manière de créer des colonnes « intelligents » avec JQuery & CSS.

Le CSS permet ici de gérer l’affichage des colonnes par défaut, de définir leur taille, les marges entre les colonnes… Et le JQuery permet de répartir les colonnes s’il reste de l’espace sur le côté, de gérer dynamiquement l’affichage (si la taille de la fenêtre est modifiée).

Tout le code nécessaire est donné dans le tutorial. Il peut permettre un bon gain de temps, plus besoin de calculer la taille au pixel entre les colonnes, les marges, les paddings et le conteneur ! :)

Pas encore de billet sur le même sujet !

Cette entrée a été publiée dans HTML / CSS, JQuery, avec comme mot(s)-clef(s) , , . Vous pouvez la mettre en favoris avec ce permalien.

4 reponses a Faire des colonnes intelligentes avec du CSS & JQuery

  1. FGRibreau dit :

    Ou sinon, en pure CSS3:

    column-count:2; /* nombre de colonne */
    column-rule:2px solid #E5E5E5; /* barre verticale entre les colonnes */

    Pour le moment seul Firefox & Safari supportes ce type de propriété CSS (via -moz & -webkit).

  2. arnaud dit :

    Si ça ne tenait qu’à moi, je n’adapterai les sites que pour Firefox…

    Il va falloir continuer à bidouiller en attendant :)

  3. FGRibreau dit :

    Clair, heureusement que Javascript est là pour combler les lacunes CSS de tel ou tel navigateur (IE) :) .

  4. bill dit :

    On dirait que ton lien pour le tutorial est un lien qui pointe sur une redirection vers … http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/

    Sinon ça avait l’air intéressant.
    salut

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">