En-tête, 2 colonnes, 1 pied de page (fixe ou liquide)

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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.

Nous utiliserons la propriété float : elle permet au contenu de se placer à gauche ou à droite de celui qui le précède dans le flux. Nous attribuerons ensuite des valeurs en pourcentages à la propriété width de chaque colonne pour obtenir une largeur globale fixe ou liquide.

1 en-tête, 2 colonnes, 1 pied de page

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.

1 en-tête, 1 colonne, 1 pied de page

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

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



Un commentaire pour “En-tête, 2 colonnes, 1 pied de page (fixe ou liquide)”

  1. Cap° dit :

    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 !!!!



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site