Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Pour commencer, nous allons donc réfléchir à la structure de notre fenêtre pour pouvoir, dans le chapitre d'après, écrire le code XHTML/CSS en résultant.
C'est une bonne question : à quoi nos fenêtres vont-elles ressembler ?
Dans ce TP, nous allons faire des fenêtres qui ressemblent à cela :
Avec évidemment un titre, éventuellement une icône, et un bouton pour fermer la fenêtre.
Le schéma de notre fenêtre nous amène à établir une structure pour celle-ci, structure qui repose sur 9 blocs :
Les quatre blocs rouges sont les coins de la fenêtre, les blocs verts en sont le haut et le bas, les blocs oranges les côtés, et le bloc blanc, le contenu.
Comment arriverons-nous à aligner 9 blocs de la sorte en XHTML/CSS ?
Avec les tableaux ?
Non, pour
diverses raisons nous n'allons pas utiliser les tableaux. Nous allons utiliser des
div que nous allons positionner avec CSS.
Manière de procéder
1) Création du bloc principal
On va en effet tout d'abord créer un bloc principal qui contiendra toute la fenêtre :
2) Création de trois blocs : un pour le haut, un pour le milieu, un pour le bas
Nous allons ensuite créer trois blocs à l'intérieur de ce bloc rouge ainsi :
3) Création de trois blocs (gauche, centre, droite) dans chacun de ces trois blocs
Nous allons ensuite séparer ces trois blocs pour arriver au résultat attendu :
Nous avons donc, dans ce chapitre, réfléchi à la structure de notre fenêtre et aux étapes nécessaires à l'établissement de celle-ci.
Essayez maintenant d'écrire le code XHTML/CSS en conséquence !
C'est en tout cas ce que nous allons faire dans le chapitre suivant.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
438 Zéros connectés |
8 requêtes |
1.0806s (1.0675s)
