Nouveau tutoriel étape par étape pour la conception d'un design en CSS

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 !

Par Raphael GOETTER - mercredi 8 novembre 2006 à 15:53

Tutoriels Alsa - #301 - Lu 9279 fois - Intérêt du billet: 3.25(12) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le mercredi 8 novembre 2006 à 20:26, par Niklaus :: site :: #

Bonjour,
J'apprécie toujours ce genre d'initiative qui permet la pratique des standarts d'aujourd'hui. Merci à son auteur.
Niklaus

Le jeudi 9 novembre 2006 à 10:51, par giz404 :: site :: #

Excellent ce tuto ! Simple, efficace, la méthode de construction est rigoureuse, vraiment que du bon ! Hop bookmarké.

Le jeudi 9 novembre 2006 à 15:01, par leGizz :: site :: #

Très bon tuto qui vient compléter celui d'Olivier Patry !
Bravo !

Le jeudi 9 novembre 2006 à 16:39, par Bob Marcel :: #

C'est marrant j'avais trouvé exactement cette méthode tout seul comme un grand il y a un peu plus d'un an...

Le jeudi 9 novembre 2006 à 16:44, par Raphael :: site :: #

@Bob Marcel > Et tu n'as pas proposé de tutoriel ? Honte à toi :D

Le jeudi 9 novembre 2006 à 16:55, par Bob Marcel :: #

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

Le jeudi 9 novembre 2006 à 20:17, par Sopo :: #

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 ? :)

Le vendredi 10 novembre 2006 à 12:48, par Bob Marcel :: #

@Sopo>C'est bien ça. Est ce qu'on ne pourrait pas encore améliorer la chose en mettant une hauteur en em ?

Le vendredi 10 novembre 2006 à 13:29, par Sopo :: #

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

Le vendredi 10 novembre 2006 à 21:14, par Hum :: #

Je ne l'ai pas encore lu, mais d'avance merci et chapeau bas pour cette contribution.

Le dimanche 12 novembre 2006 à 03:42, par billy :: #

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

Le vendredi 17 novembre 2006 à 03:31, par Aureance :: #

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 !

Le vendredi 17 novembre 2006 à 18:23, par Florent V. :: site :: #

Vraiment un très bon tutoriel. Bravo et merci à Thomas. :)

Le lundi 20 novembre 2006 à 11:24, par k-ny :: site :: #

Merci pour ce tuto ! Excelent !

Le lundi 20 novembre 2006 à 21:11, par Nouky :: site :: #

Excellent tutoriel ! Il va me servir je le sens bien

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.