Design XHTML/CSS complet avec 2 colonnes de même hauteur
Le 08-11-2006 par Collectif Alsacreations dans Faire une mise en page sans tableaux.
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 :
- La page occupera toujours au minimum 100% de la hauteur de la fenêtre, quel que soit le contenu ;
- Le pied de page se trouvera toujours tout en bas de la page, quel que soit le contenu ;
- Le menu sera vertical et plus horizontal (ce n'est pas plus compliqué, mais c'est un peu différent).
Puisqu'une image vaut mieux qu'un long discours, voici 2 captures du résultat recherché :
Comment profiter au maximum du tutoriel ?
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 ...
Sommaire
- Le code (x)HTML
- Le positionnement des différentes zones de la page
- Les images & couleurs de fond
- La mise en forme du menu de navigation
- Mise en forme du contenu de la page
- Ajustements à apporter pour IE6
Nota : Le support du tutoriel (graphisme et code) est libre d'utilisation à condition de préciser l'auteur (Thomas Dedericks) et la source (Alsacreations). Ceci veut dire que vous n'êtes pas autorisé à vous approprier le travail d'autrui (licence Creative Commons CC-BY).
Un problème, une question ?
Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon Spécifique aux tutoriels et articles du Forum Alsacréations.
