Nous allons réaliser une mise en page comportant deux colonnes de même hauteur. Pour corser la difficulté par rapport au tutoriel précédent, en plus de l'ajout d'une colonne, nous allons nous imposer une structure un peu plus complexe :
Puisqu'une image vaut mieux qu'un long discours, voici 2 captures du résultat recherché :
Refaites-le ! Reconstruisez les pages au fur et à mesure, avec les images du tutoriels ou les vôtres. C'est la meilleure façon de comprendre la succession des différentes étapes, et de visualiser les difficultés rencontrées (et apprendre à les reconnaître par la suite).
Suivez le fil du tutoriel en vérifiant le résultat dans un navigateur respectueux des standards (Firefox, Opera, IE7 ?, ...) jusqu'à la cinquième étape. Ensuite, ouvrez la page dans IE6 et attaquez la dernière étape !
La compréhension de certaines parties du tutoriel nécessite une base minimale en CSS, et en particulier une bonne compréhension des méthodes de positionnement en CSS. Si vous êtes perdu, essayez éventuellement de réaliser l'autre design d'abord. En cas de panne sèche ou d'échec critique, rendez-vous sur le forum ;)
Attention ! en plus des fautes d'orthographe et de frappe, deux jeux de mots foireux se sont glissé dans le tutoriel ! N'ayez pas peur, ce n'est pas contagieux.
Quoique ...