Design XHTML/CSS complet avec 2 colonnes de même hauteur

Tutorielcss

Publié par le , mis à jour le (110787 lectures)

css design fluide hauteur

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 non 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é :

Résultat avec un contenu court Résultat avec un contenu long

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 ;)

Voir également un autre article d'Alsacréations : Mise en page sans tableau