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

Actualitéalsacréations

Publié par le (18283 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

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

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

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

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 !

Commentaires clos