Mail d’une amie :

J’ai une colle pour toi :

1 – 4 colonnes de 240px => largeur totale 960px

2 – je rajoute un margin-right de 5px et soustrais 5px de la largeur de la colonne => largeur totale 960px

Et pourtant dans le 2ème cas, visuellement la largeur totale est inférieure à 960px.

How is it possible ?

Elle n’était vraisemblablement pas bien réveillée parce qu’elle connaissait la réponse, mais je vais développer la méthode ici pour ceux qui auraient des soucis.

Largeur totale ≠ largeur utilisée

Si vous avez un espace total de 480 pixels de large et que vous y mettez, côte à côte, 4 colonnes de 120px de large, alors tout l’espace horizontal est rempli.

120 * 4 = 480

Maintenant, si l’on diminue la largeur des colonnes jusqu’à 90px mais qu’on rajoute à leur droite 30px de marge, le compte total ne va pas changer.

(90 + 30) * 4 = 480

Le souci, c’est la dernière marge à droite. Elle rentre dans le calcul des 480px de large, mais visuellement, c’est du vide.

n colonnes, n-1 marges

Quel que soit le nombre de colonnes, le nombre de marges sera toujours inférieur de 1.
Pour n colonnes on a bien n-1 marges.

Ce que l’on veut : supprimer la dernière marge à droite. ¹

nth child : le sélecteur providentiel

Au lieu d’appliquer une classe à la dernière colonne de chaque ligne, on va utiliser la fabuleuse pseudo-classe CSS 3 :nth-child.

Dans mon exemple, on veut virer la marge de chaque colonne multiple de 4.
Il faut faire :

.column:nth-child(4n){ margin-right:0;}

En fait, le nombre n correspond à un nombre qui va incrémenter indéfiniment, en commençant par 1. Donc on a :

• 4*1 = 4 (la 4e colonne)
• 4*2 = 8 (la 8e colonne)
• 4*3…

Il permet donc de sélectionner toutes les colonnes multiples de 4.

Etant donné que nth-child n’est pas supporté par IE6, IE7 et IE8, il vous sera sans doute nécessaire d’utiliser plutôt une classe “last” sur la dernière colonne de chaque ligne.

Calcul des largeurs optimales

Comment être sûr d’occuper totalement l’espace horizontal disponible ? En d’autres termes, comment faire en sorte que :

largeur totale des colonnes
+ largeur totale des marges
= largeur totale du conteneur

Ici, je veux que que mes 4 colonnes fassent 90px de large.
Largeur totale des colonnes = 90*4 = 360px.
Il reste donc 480-360 = 120px pour 3 marges.
Chaque marge fera donc 120/3 = 40px de large.

Ici, le compte est bon, j’ai envie de dire.
Toutes les colonnes ont la même largeur, et les marges aussi, et la largeur utilisée est égale à la largeur totale.
L’utilisation de l’espace est donc optimale.

Trouver facilement les valeurs optimales

Imaginons des colonnes qui font 85px de large.

• Largeur totale des colonnes = 85*4 = 340px
• Largeur restante pour les marges = 480 – 340 = 140px
• Largeur de chaque marge = 140/3 = 46,6666666666666666666667

Le drame ! Bien sûr, on pourrait essayer de trouver la solution en tâtonnant, en testant 86, puis 84, puis 87… Quelle perte de temps !

Pour calculer la largeur optimale, voici la règle :

La marge gagnée sur chaque colonne doit être un multiple du nombre de marges.

Ok. Alors, repartons au début. On avait 4 colonnes à 120px de large et 0px de marge.
On a 3 marges, donc faut procéder par palier de 3px :

• 120 – 0 = 120px
• 120 – 3 = 117px (de large pour une colonne)
• 120 – 6 = 114px
• …
• 120 – 30 = 90px (notre exemple)
• 120 – 33  = 87px
• 120 – 36 = 84px

Du coup, on voit bien que 85px de large pour une colonne, c’est pas bon. Il faut choisir soit 87px ou bien 84px.

Prenons 84px qui est le plus proche :

• colonnes = 84*4 = 336px
• marge totale = 480-336 = 144px
• chaque marge = 144/3 = 48px

Avec des colonnes à 84px de large et des marges à 48px de large, l’espace horizontal de 480px est utilisé en entier.

Après mon tutoriel CSS : l’Art et la Science, voici un tutoriel sur l’autre partie importante de mon expérience d’intégrateur : WordPress le Tutoriel.

Je considère mes connaissances comme étant open-source. Et, de peur de les voir perdues à jamais, je préfère les écrire et les faire partager gratuitement avec la communauté des intégrateurs que nous sommes.

Ce tutoriel WordPress vous aidera à créer vous-même votre propre thème WordPress, mais contient aussi un thème WordPress vide gratuit sur lequel vous pouvez vous baser.

Il est des connaissances que l’on veut transmettre telles qu’on les ressent. Celle des CSS que j’ai acquise au fil des ans est celle que je souhaite à présent léguer à travers une histoire peu commune mais très ludique.

Que vous soyez novice ou qualifié, l’Art & la Science saura je l’espère vous apporter un savoir mais aussi (et peut-être avant tout) une conception des CSS. Mon intention est de vous faire parvenir la perception clairvoyante d’une compétence vivante et expressive qui saura séduire celui qui l’embrassera.

Le SVG vous connaissez ? C’est des graphes vectoriels en XML. C’est cool parce que c’est du vecto et c’est donc scalable très facilement (j’avais fais des icônes en SVG une fois avec Illustrator pour un site mais ça marchait uniquement sous Opera).  C’est pas cool parce que c’est chaud à mettre en place, les navigateurs le gèrent mal et ça peut être moche en taille réduite.

Sur tapper[ware), un gars (un malade), a fait une sorte de Mario Kart en SVG. Vous pouvez voir la démo ici (ça ne marche que sous Firefox). Bon, c’est pas vraiment un jeu, mais juste une démo pour simuler le très célèbre Mode 7!

PS : mon record du tour est de 8:28 sec.