28.04.08
Astuce HTML et CSS pour les div et tableaux
Retrouvez aujourd’hui une petite astuce pour ceux qui tiennent un site ou un blog. Si vous êtes déjà dans le web, vous n’apprendrez pas grand-chose mais j’espère que cela servira à certains visiteurs du blog.
Le but est d’expliquer la différence entre l’HTML “old school” (avec des table, tr, td, etc.) et le nouveau HTML orienté CSS (avec des div et des styles à tout va), à partir d’un exemple concret. Je voulais utiliser pour mes posts sur les jeux PSP un fond avec la console et la possibilité de mettre n’importe quelle image de jeu au milieu.
Voici la version HTML avec un table :
 |
On crée un table que l’on fixe à 480×203 (la taille de mon image de fond), on fixe les cellpadding et cie à 0, on crée une ligne (tr) puis une cellule (td) que l’on va aligner au centre horizontalement. On insère l’image en lui appliquant un style avec un margin-top pour l’écartement vers le bas (on utilise ici un style pour être compatible IE/ FF), puis on ferme le tout :
<table width="480" height="203" background="http://www.chevalier dutemps.com/wp-content/sony-psp-bg.gif" cellpadding="0" cellspacing="0" border="0" > <tr> <td align="center" valign="top"><img src="http://www. chevalierdutemps.com/tools/phpthumb/phpThumb.php?src=../../wp- content/final-fantasy-vii-crisis-core-02.jpg&w=276" alt="Test table" style="margin-top: 19px;" /></td> </tr> </table>
Voici maintenant la version CSS avec aucun table, uniquement en div et en style :
On crée un div avec le style qui va bien : l’image de fond, la largeur (480 - le padding à gauche) et la hauteur (203 - le padding du haut), on inclut l’image et on ferme notre div :
<div style="background-image:url(http://www.chevalierdutemps.com/ wp-content/sony-psp-bg.gif); width: 377px; height: 184px; padding-left: 103px; padding-top: 19px"> <img src="http://www.chevalierdutemps.com/tools/phpthumb/ phpThumb.php?src=../../wp-content/final-fantasy-vii-crisis-core- 02.jpg&w=276" alt="Test div" width="276" /> </div>
En 3 lignes vous réussissez à inclure une image centrée comme il faut sous IE et Firefox au sein d’une div avec une image de fond sympa. Voici une utilisation concrète de cet exemple :
L’avantage d’utiliser une div est que l’on peut placer l’image où l’on veut très simplement (sans des tr, td, etc.) et cela permet aussi d’afficher du HTML avec seulement quelques lignes de code. J’espère que ce post vous sera utile si vous voulez commencer un peu à coder du HTML. Voici un autre exemple de l’utilisation du CSS : http://www.chevalierdutemps.com/musique-cds/lisa-gerrard-une-artiste-magique.html. Cela peut donner des résultats très sympas et très simplement.
