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

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le (18022 lectures)

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

Niklaus a dit le

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

giz404 a dit le

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

leGizz a dit le

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

Bob Marcel a dit le

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

Raphael a dit le

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

Bob Marcel a dit le

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

Sopo a dit le

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

Bob Marcel a dit le

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

Sopo a dit le

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

Hum a dit le

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

billy a dit le

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

Aureance a dit le

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 !

Florent V. a dit le

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

k-ny a dit le

Merci pour ce tuto ! Excelent !

Nouky a dit le

Excellent tutoriel ! Il va me servir je le sens bien