En-tête, 2 colonnes, 1 pied de page (fixe ou liquide)
Au menu Design CSS, je vous propose un exemple de mise en pages classique composé d’un header, de deux colonnes et d’un footer. Pour profiter de l’avantage des CSS par rapport aux tableaux, je ferais en sort qu’en supprimant deux lignes dans la feuille de style CSS, nous passions de deux à une colonne.
Cela passe d’abord par l’utilisation de la propriété float. Elle permet au contenu de se placer à gauche ou à droite de celui qui le précède dans le flux. Ensuite par l’utilisation des pourcentages attribués à la propriété width de chaque colonne. Ainsi, peu importe que la largeur globale soit fixe ou liquide.
La largeur passe facilement d’une valeur relative à une valeur fixe en modifiant la valeur width du container. Les valeurs pour chaque colonne étant en pourcentage, elles s’adapteront parfaitement à vos exigences. Notez que je vous laisse le soin de bidouiller pour afficher fièrement chez vous l’exemple ci-dessous ;)
Et puis non, finalement, puisque vous le valez bien, je vous mâche le travail.
Mais je parle, je parle… et j’en oublierai presque d’aller me coucher ;) Quant à vous, prenez encore dix minutes pour afficher le code source des exemples et amusez-vous, les CSS, s’est fait pour ça !
Télécharger le fichier .html ou .php et les images
Tags : Colonnes, CSS, Design liquide, Tutoriels, Webdesign
Une participation à l'article
Comme d’habitude j’en apprends toujours un peu plus en passant par ce blog… Donc très bon l’utilisation des pourcentages pour définir la longueur des blocs. Idem pour l’association des styles (lier la class .cols avec .intro), je sais c’est un peu la base de la mise en page CSS mais bon j’ai encore un peu de mal :s !!!!!
Bref je mets ce code dans un coin cela peu toujours servir !!!!