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… 

1000 ressources pour le développement web et WordPress

Vous voulez un bon éditeur de page HTML et CSS, vous cherchez le bon plugin jQuery pour votre projet ou vous êtes tout simplement friand de ressources indispensables pour la création de sites web et vous utilisez WordPress ? Le titre est trompeur : il n’y a pas 1000 ressources, mais bien plus à découvrir… Attention, cette liste est vivante et grandit avec vos suggestions !

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.

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.

Je teste mon navigateur sous Acid2, c’est grave, docteur ?

Acid2 the reference rendering smileyC’est une bonne nouvelle pour tous les webdesigners et autres intégrateurs HTML et CSS : la prochaine mouture d’Internet Explorer (IE8) devrait passer le test Acid2. Enfin, c’est ce qu’on peut lire un peu partout (disons que c’est notre Laure Manaudou à nous, les webeux). Mais qu’est-ce donc que ce test ? Ne risque-t-on pas d’abimer notre navigateur à le passer ainsi à l’Acid ? Pour le savoir, je me suis lancé dans une petite « craduction » de la première partie de l’article Acid2: The Guided Tour paru sur The Web Standards Project qui se bat depuis longtemps pour l’adoption des standards du web par tous pour permettre l’accès du web pour tous.

Les 10 plus beaux designs CSS selon SmashingCoding

Le concours organisé par Smashingcoding est terminé et les membres du jury ont rendu leur copie pour désigner le vainqueur parmi le top 10 des blogs inscrits. Je suis content d’être à la 5ème place et je félicite chaleureusement le 1er (avec une pointe de jalousie, il faut bien le dire) ainsi que tous les autres participants avec une pensée pour SuperChinois 😉

Voici donc les 10 plus beaux design CSS selon SmashingCoding qui avait pris en compte l’apparence du blog, la qualité du code, les astuces CSS utilisées et les difficultés surmontées en terme de webdesign :

  1. Affinity Web
  2. le blog de Damien Alexandre
  3. Webinventif, Kenny-Blog
  4. BizetFamily
  5. css4design
  6. Pixnlov
  7. Pixenjoy
  8. Pilok
  9. Buzz and People
  10. Tux Planet

PS : Vous remarquerez que Britney « CSS » Spears n’était pas très « fatiguée d’être sexy » ! Bien joué eMeRiKa 😀

Mon blog sur Facebook

Après avoir créé un groupe pour Notorious Blog, je viens de créer un groupe Facebook pour ce blog. Pour quoi faire ? Facebook, à nous d’inventer la vie qui va avec ! Pour css4design, la ligne directrice est simple : c’est un groupe dédié à l’intégration html et css, au référencement dans Google et bien sûr au webdesign au sens large (graphisme, technique de mise en page, contraintes cross-browser…).

N’hésitez pas à participer en gribouillant des notes, en partageant des idées ou en postant des liens ! Si vous n’êtes pas inscrit, c’est peut-être l’occasion. A bientôt 🙂

Optimiser et styler les catégories WordPress avec les CSS

Affichage catégorieSuite à la migration de mon blog, j’en ai profité pour réorganiser les catégories en utilisant les sous-catégories qui me semblent un excellent moyen pour structurer l’information sur un blog. Curieusement, j’ai remarqué que les catégories sont souvent traitées par-dessus la jambe : soit il s’agit d’une longue liste tellement exhaustive qu’on ne sait plus de quoi parle le blog, soit les catégories sont placées à un endroit peu visible. Le pire étant évidemment le cumul des deux, ce qui n’est pas si rare…

table vs div : dis papa, racontes-moi encore les tableaux…

La mise en page des sites web avec les tableaux n’a pas que des inconvénients : ça permet d’obtenir une structure à l’épreuve des balles très rapidement. La mise en page en div (5 légumes par jour, on vous dit…) n’a pas que des défauts : grâce aux CSS, il sera possible de moduler l’agencement des différentes parties de votre design. Bien sûr, tout n’est pas toujours aussi simple : les éléments constitutifs d’un tableau ne sont pas allergiques aux CSS, tandis qu’une structure en div mal conçue au départ ne sera pas vraiment modulable, même avec des CSS.