Vous connaissiez déjà le tutoriel d'Olivier Patry, "Réalisation d'un design complet (XHTML / CSS) en 5 étapes".
Voici une variante réalisée par Thomas Dedericks (Sopo sur le forum) qui va un peu plus loin et qui nous propose un autre type de gabarit à concevoir.
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).
Découvrez ce nouveau tutoriel étape par étape dans la section Faire une mise en page sans tableaux.
Et merci encore à Thomas pour son initiative !
Commentaires
Bonjour,
J'apprécie toujours ce genre d'initiative qui permet la pratique des standarts d'aujourd'hui. Merci à son auteur.
Niklaus
Excellent ce tuto ! Simple, efficace, la méthode de construction est rigoureuse, vraiment que du bon ! Hop bookmarké.
Très bon tuto qui vient compléter celui d'Olivier Patry !
Bravo !
C'est marrant j'avais trouvé exactement cette méthode tout seul comme un grand il y a un peu plus d'un an...
@Bob Marcel > Et tu n'as pas proposé de tutoriel ? Honte à toi :D
<chieur>En fait il y a une chose qui me chiffone : si je zoome suffisament le pied de page finit par recouvrir le contenu car sa hauteur est en pixels</chieur>
Merci les gens, content que ça vous plaise & que ce soit utile
@Bob Marcel > ça veut dire quoi, zoomer suffisament ? Parce que sous Firefox, je dois zoomer 4 fois pour que le peid de page commence à recouvrir le reste. C'est déjà pas mal, non ? :)
@Sopo>C'est bien ça. Est ce qu'on ne pourrait pas encore améliorer la chose en mettant une hauteur en em ?
@Bob Marcel > Si, ça n'aurait probablement aucune conséquence sur la mise en page. Juste une précision : ce n'est pas la hauteur du pied de page qui est imposée en px, mais le padding-bottom de l'élément central.
Je ne l'ai pas encore lu, mais d'avance merci et chapeau bas pour cette contribution.
Raah j'ai enfin appris a faire des pieds de page ! merci.
Génial aussi la technique du padding: 0 10px; sur le #global pour avoir le background nikel
Mention: très bien.
Bien raconté, pas rebutant, mais s'adresse à des personnes qui ont fait "le premier pas" depuis assez longtemps…
Vous avez les capacités d'exprimer au plus grand nombre.
Une suggestion ?
Continuez !
Vraiment un très bon tutoriel. Bravo et merci à Thomas. :)
Merci pour ce tuto ! Excelent !
Excellent tutoriel ! Il va me servir je le sens bien