Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

Il y a quelques temps, je m’étais interrogé sur les différentes manières de rétablir le flux après un float. A l’époque, mon vocabulaire en la matière était rustique mais solide : je contentais souvent d’un coup de clear: both appliqué soit à une balise div, hr ou br. Comme j’en ai appris un peu plus sur le clearing suite aux commentaires qui ont suivi, j’assure le service après-vente, ce qui fait de moi une espèce de Darty Monsieur Plus du CSS… 

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

petit-nautile.pngDans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1 proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. C’est la démontration réussie que l’on peut appliquer les règles de mise en page du monde de l’imprimé à l’écran, sans rien sacrifier. Je l’avais presque oublié.

Design CSS liquide (ou fluide) encadré d’images répétées… sans table

Exemple de design css liquide sans tableauxIl y a deux choses que l’on passe généralement sous silence lorsqu’on fait la promotion des CSS pour la mise en page d’un site web : 1) la conception d’un design fluide contenant des visuels aux quatres angles et sur les 4 côtés, et 2) l’équilibrage des colonnes sur le pied de page quelque soit leurs contenus. Et oui, dès que l’on sort des designs avec une largeur fixe, c’est le « brodel » ! Alors que c’est si facile avec les tableaux… Alors, j’ai pensé au jeune Padawan qui désire échanger son design Old School contre une mise en page CSS plus sexy : je présenterais deux exemples de design liquide ou fluide tableless.

Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards

Avec le script IE7, IE est copain avec FirefoxLe quotidien de l’intégrateur HTML est parfois ponctué de vide existentiel lorsqu’il s’agit de livrer des pages web compatibles avec la majorité des navigateurs dont la liste se divise grosso modo en deux groupes : ceux qui intègrent au mieux les standards recommandés par le W3C en matière de rendu CSS (Firefox, Safari, Opera et Konqueror, etc.) et les autres, principalement les versions 5 et 6 d’Internet Explorer.

Une blogroll 2.0 avec la liste de partage des flux RSS de Google Reader

Les plus attentifs auront peut-être remarqué que j’ai déplacé ma blogroll de la page d’accueil vers une page dédiée (vu la baisse constante de mon PageRank, personne n’y perd). A la place, j’ai préféré introduire une liste de mes lectures de flux RSS via la « liste de partage » de Google Reader. Cette liste étant dynamique, elle reflète, mieux qu’une liste de liens statique, mes intérêts du moment.

Styles CSS par défaut : après Reset Reloaded, Eric Meyer fait encore risette avec Resetting Again

Pour notre plus grand plaisir, Eric Meyer – le gourou des CSS – a mis à jour son célèbre Reset CSS. Après Reset Reloaded, voici donc Resetting Again ! Le plus gros changement est la suppression de l’héritage (inherit) des propriétés font-weight, font-style et font-family : la mauvaise prise en charge de la valeur inherit par Internet Explorer ne permet pas un reset satisfaisant dans tous les navigateurs.

Supprimer une catégorie WordPress dans le flux RSS avec le plugin « Advanced Category Excluder »

En participant au concours de référencement zobibi, je me suis attaché à ne pas trop polluer la Home de ce blog en masquant les billets de la catégorie zobibi avec un position: absolute;left: -50000px pour les visiteurs équipés d’un navigateur moderne. Les robots des moteurs de recherche comme GoogleBot de Google ne tiennent pas (encore) compte des feuilles de styles CSS et indexent allègrement ce contenu masqué aux êtres humains.

WordPress : masquer des billets seulement sur la « home » avec Sandbox

Vous n’êtes pas sans ignorer que je participe à un petit concours de référencement sur le mot-clé zobibi. Pour ne pas (trop) gêner la lecture « normale » du blog, j’ai décidé de masquer les billets de la catégorie zobibi. A la demande de Plouf, j’ai fait en sorte que les billets de cette catégorie soient masqués sur la Home tout en restant visible lorsqu’on affiche le billet seul ou lorsqu’on clique sur la catégorie idoine.

Ecrire sur son blog WordPress avec Live Writer

Suite à ma saute d’humeur à propos de l’éditeur de billet intégré à WordPress (et à mon passage tout récent à Vista), je me suis intéressé à Live Writer qui permet de rédiger sa prose en local dans une interface reprennant l’essentiel de la charte graphique du blog (ce qui est déjà assez bluffant) tout en offrant un confort de rédaction appréciable grâce aux outils de mise en forme disponibles. Petit tour du propriétaire :

Quelques lignes de PHP pour protéger la SERP-diversité

Pour tenter à la fois de limiter l’impact de Google en tant qu’apporteur de trafic sur mon blog et promouvoir d’autres moteurs de recherche pour favoriser la SERP-diversité, j’ai envisagé de proposer un encart spécifique au visiteur en provenance de Google pour qu’il teste sa requête sur d’autres moteurs de recherche. Je vois ça comme une sorte de service après-vente pour ceux qui n’auraient pas trouvés leur bonheur sur ce blog ou pour ceux qui voudraient en savoir plus. Dans ce cas, pourquoi ne pas leur faciliter la tâche ?