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 ! 🙂

Ce contenu a été publié dans HTML / CSS, JQuery, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

5 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

  5. Aly dit :

    Hi,The right sidebar is tocnihug the middle column in the homepage as you can see. I want to change the size same like left sidebar, not tocnihug the middle column.Thanks for reply.

Laisser un commentaire

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