Article en plusieurs parties : 1 2 3 4
L’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine…
La page à transformer provient d’un template SPIP dont l’étude du code source nous fait remonter assez loin dans le temps pour nous dévoiler les joies de la géologie htmlienne ;) Alain, l’éditeur du site sivom-nautique, m’a demandé de jeter un œil sur la page d’accueil et de moderniser le gabarit HTML.
Note : L’intégration du gabarit live n’étant pas prévue dans l’immédiat, les liens vers «l’original» mènent, dans la suite de cet article, vers une copie de la page qui peut présenter des différences par rapport à celle qui est en ligne.
La structure de la page en question s’appuie largement sur des tableaux, tandis que des balises div encadrent les titres et d’autres portions de texte. Par exemple la colonne de gauche est composée de <div class= »bloc » style= »width: 145px; »><div class= »titre_bloc »> Dernières images </div><div style= »max-width: 135px; » class= »cadrimage »>…On voit ici que les styles CSS sont utilisés en ligne avec l’attribut style, alors qu’il existe une feuille de style externe perso.css. On remarquera que le titre Dernières images
se trouve dans un container div dont la sémantique se rapproche dangereusement de zéro ;)
Dis papa, racontes-moi encore les tableaux ! »
Article en plusieurs parties : Page suivante
PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour
(Jean Cocteau) ;) Merci d'avance.
http://www.googlefight.com/index...
Je propose de rajouter ce lien dans ta linkographie… Utile n’est ce pas ?
Si tu ne l’a pas encore fait, je te conseille d’aller faire un tour dans les templates spip, que j’ai trouvé très intéréssants au niveau de la manière de coder (boucles, affichages des différents éléments d’un article…)
Les résultats sont éloquants : 666,000,000 résultats pour table. C’est bien ce que je pensais : le tables sont diaboliques ;)
Je pensais tester un cms, et j’hésite entre spip et plume
Chouette article, manque un peu d’exemples visuels à mon goût :)
Merci beaucoup.
Pour les articles, tu as raison, je me fais souvent la réflexion, mais je préfère paufiner le texte et les exemples. J’essaierai néanmoins de prendre ta remarque en compte pour le prochain article ;)
Très bon article, bien détaillé et clair.
C’est parfait ! Avec les exemples et tout et tout. Merci !
bonjour, je découvre votre site d’aide, merci!! j’essaie, petit à petit de comprendre et « avancer » jusqu’à me faire mon site , j’en suis encore très loin….mais c’est super de trouver de l’aide! Bonnes fêtes!!