09/11/14

Boite bloc : placement horizontal

C'est à dire comment placer une boite dans son conteneur plus ou moins vers la droite ou la gauche.

Télécharger Dziedzik.zip

Créez un document dziedzik.html (html5 utf-8) avec le balisage conseillé ci-dessous pour la partie BODY :

<p>the only intuitive interface is the nipple</p>
<div>
<p>marcel</p>
<p>dziedzik</p>
</div>
<p>simplicity matters</p>

Combien de boites en tout dans le document ?
Quelles classes et identificateurs à prévoir pour la mise en forme ?
Visualisez les boites...
Identifiez le conteneur de chaque boite

Remarque : ici toutes le boites sont par défaut des boites bloc.

Principes

Pour placer horizontalement une boite on dispose de 7 propriétés : width, margin-left, margin-right, padding-left, padding-right, border-right-width, border-left-width.

Une boite bloc est placée par rapport à sa boite parente (pour être très précis il faudrait dire : son conteneur est son premier ascendant de type bloc).

width:auto est sa largeur par défaut ; elle signifie ici "occuper toute la largeur restante du conteneur". Le navigateur se servira de ce paramètre comme variable d'ajustement après avoir calculé ou choisi les 6 autres. (N'oubliez pas que les marges et espacements peuvent avoir des valeurs par défaut non nulles choisies par le navigateur).

Dans l'exemple : a t-on besoin de régler la boite html pour pouvoir faire toutes les couleurs de fond (rouge et blanc) ou peut-on ne régler que body ? Les boites p ont-elles des marges ou espacements fixés par le navigateur ?

Donnez une largeur fixe à body : 700px

Attention : la largeur d'une boite (width) est la largeur de sa zone de contenu ; pour connaitre l'encombrement d'une boite, il faut y ajouter les marges, espacements, et l'épaisseur de la bordure.

Valeurs utilisables

Quelles valeurs peut-on donner aux propriétés CSS d'une boite de niveau bloc ?

• Les marges peuvent avoir une valeur positive ou négative.
• Les bordures, les espacements, la largeur doivent avoir une valeur positive.
• Parmi les 7 propriétés, 3 seulement (largeur, marges) peuvent avoir pour valeur indiquée : auto ; cela signifie que le navigateur calculera la valeur réelle en fonction de la LARGEUR disponible dans le conteneur.

On peut spécifier les valeurs avec une unité (pixels, mm, ...) ou un pourcentage ; exemple : width:50% signifie la moitié de la largeur calculée du conteneur.

Le navigateur contrôle toujours la contrainte suivante : tout l'espace occupé par une boite bloc (à savoir : 2 marges + 2 bordures + 2 espacements + largeur) doit "remplir" exactement la boite conteneur.

Pour cela il va d'abord calculer les dimensions de la boite enfant à partir des valeurs indiquées (soit par défaut soit vos règles CSS). Si la contrainte n'est pas vérifiée, le navigateur modifiera la marge droite de la boite en la remplaçant par la valeur appropriée pour que la contrainte soit respectée.

Donner une marge gauche à body permet de la déplacer par rapport à son conteneur : la boite html. Testez.

Essayez de coller body (avec une largeur fixée) à droite de son conteneur (html).

Mettez l'arbre en fond de DIV (pour l'instant n'essayez pas de couper le bas des lettres des boites marcel et dziedzyk).

Centrage du contenu d'une boite bloc :

Si on veut centrer body par rapport à la fenêtre de navigation, c'est pour l'instant impossible ; pourquoi ? Quelle valeur faudrait-il donner à ses marges ? C'est impossible à savoir. Body est dans html qui a par défaut la largeur de la fenêtre qui est par principe inconnue. Fixer la largeur de html ne résoudrait pas la question.

Il faut savoir faire la différence entre aligner le contenu d'une boite, c'est à dire par exemple centrer le contenu d'un paragraphe et aligner une boite dans son conteneur en jouant sur ses marges.

La propriété text-align s'applique au contenu d'une boite Bloc et agit sur le centrage de ce contenu et pas sur le centrage de cette boite dans son parent. De plus, text-align n'agit que sur le contenu En-ligne de la boite, le contenu "Bloc" n'est pas centré par cette propriété.

Donnez une largeur de 500px aux boites p ; centrez le contenu de body et constatez que les boites p ne sont pas centrées.

Question : si on veut centrer ces boites p, est-ce possible ? Pour centrer horizontalement une boite de niveau bloc dans son conteneur, il faut mettre les deux marges horizontales de la boite (margin-left et margin-right) à auto et fixer la largeur de la boite. Essayez.

Pourquoi fixer la largeur de la boite ? Sinon c'est la valeur par défaut de width qui s'applique et donc la boite prend toute la largeur disponible.

En résumé

Dans l'image ci-dessous, on a représenté plusieurs résultats de centrage à partir du balisage suivant: <body><p>lorem</p></body>.

Sans règles css quelle est la largeur du p ci-dessus?

• Sur le premier Lorem, p est sans règles; il est difficile de voir quoi que ce soit.
• Sur le deuxième on voit p avec des bordures : il semble y avoir des petites marges droite et gauche sur p mais est-ce certain ? non, pourquoi ?
• Sur le troisième : centrage du contenu de p (propriété text-align)
• Sur le quatrième diminution de la largeur de p (width)
• Sur le cinquième centrage de p dans body (marges mises à auto)