infographiste@gmail.com

Bienvenue sur cet article

Malgré le soin apporté à la rédaction de cet article, des fautes d'orthographes, de grammaire ou de conjugaison ont sans doute échappés à ma vigilance. Plus grave, des erreurs ou inexactitudes sur le fond ont pu se glisser à l'insu de mon plein gré. N'hésitez pas à me signaler ce qui est perfectible dans les commentaires ou en utilisant la page de contact. Bonne dégustation !
infographiste@gmail.com

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

Ce soir, dans le menu design css, un exemple de mise en pages classique. Je voulais qu’en supprimant deux lignes dans la feuille de style, nous passions de deux à une colonne. Et celà sans que rien d’autre ne change.

Celà passe d’abord par l’utilisation de la propriété float, qui permet à du contenu de se placer à gauche ou à droite de celui qui le précède dans le flux, et 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.

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 exigeances. 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

Tags : , , , , , , , , |
Publié le 27 juin 2006 par Bruno Bichet.

Une participation à l'article

  1. Cap° a parlé le 2 juillet 2006 à 11:52 | Permalien

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