Team-Masters.com
Que du Gratuit pour Webmasters
Mise en page avec les CSS : Comprendre le modèle de boîte
Tout élément HTML peut être considéré comme situé dans une boîte rectangulaire qui possède un contenu (paragraphes, images, listes,etc...) et un environnement extérieur (marges et bordures).
Une page HTML peut être structurée à l’aide de plusieurs boîtes, imbriquées les unes aux autres. Ainsi, on peut avoir une boîte pour l’en-ête (qui contient le logo), une pour le contenu principal (texte) de la page, une pour le menu, et une pour le pied de page. C’est le conteneur neutre "div" qui est le plus utilisé pour représenter les boîtes et effectuer des mises en page. Les paragraphes sont aussi des boîtes. On voit donc que ces boîtes ont une importance dans la mise en page des documents HTML. Il importe alors de comprendre leur comportement.
Voyons comment représenter l’environnement d’une boîte. Elle est entourée d’une première marge (padding) qui permet l’ajustement du contenu. Ensuite vient une bordure, puis la véritable marge (margin). L’épaisseur de chacun de ces trois éléments n’est pas nécessairement le même pour les quatre côtés et elle peut même être nulle.
Les tailles de la marge, de l’espacement et de la bordure sont fixées respectivement avec les propriétés "margin", "padding" et "border". La zone d’espacement est sur le fond de l’élément lui-même. La couleur et le style de la bordure est donnée par les propriétés de bordure. Les marges sont toujours transparentes, on voit donc le parent de l’élément à travers.
Chacun des éléments padding, border et margin, possède des propriétés qui permettent de définir leurs caractéristiques. Il existe plusieurs façons d’attribuer les valeurs à ces propriétés, que ce soit pour les bordures ou les marges.
Chaque bordure ou marge peut être définie de façon individuelle en CSS. Il faut indiquer le côté concerné en y ajoutant le mot-clé approprié : top pour le haut, bottom pour le dessous, right pour le côté droit et left pour le côté gauche.
Par exemple, pour définir les épaisseurs de bordure en CSS, on écrira :
border-top-width: épaisseur de la bordure supérieure
border-right-width: épaisseur de la bordure droite
border-bottom-width: épaisseur de la bordure inférieure
border-left-width: épaisseur de la bordure gaucheQuand on pense aux boîtes, les deux propriétés qui viennent à l’esprit sont d’abord leurs dimensions telles la largeur et la hauteur. La largeur est définie par width et la hauteur par height. Elles peuvent s’exprimer en unités absolues (pixels, cm, mm ...) ou en pourcentage de la largeur de la fenêtre du navigateur.
Exemple :
div {
width: 80%;
height: 300px;
}Quand la largeur d’une boîte est exprimée en unités absolues, elle conservera ses dimensions et sera coupée à droite si la largeur de la fenêtre est trop petite. En pourcentage, au contraire le bloc s’adaptera en fonction de la largeur de la fenêtre : si on réduit celle-ci, le bloc se rétrécira.
Les CSS permettent de définir les propriétés des boîtes en groupe, c’est à dire de définir les valeurs des quatre côtés en une seule commande (notation raccourcie). Pour cela, elles sont énumérées implicitement dans un ordre « tournant » les unes à la suite des autres, séparées par un espace. L’ordre de définition étant le suivant : haut(top), puis droit (right), bas (bottom) et enfin gauche (left).
On peut donc trouver entre une et quatre valeurs définies. Par exemple, pour définir l’épaisseur des bordures d’une boîte, on peut avoir le code CSS suivant :
div { border-width: 10 20 30 40 }
Les valeurs des quatre côtés sont ici définies : la bordure supérieure aura une épaisseur de 10 pixels, la bordure droite 20 pixels, le coté inférieur une épaisseur de 30 pixels et enfin 40 pixels pour la bordure gauche.
On peut aussi avoir trois valeurs définies, la valeur du côté « manquant » étant définie implicitement par rapport à son opposé, par exemple :
p {border-width: 10 20 30}
N’oubliez pas l’ordre de définition, soit : haut-droite-bas-gauche.
Ici, le côté gauche qui n’est pas défini dans le code aura donc la même valeur que le côté droit, soit 20 pixels.
Lorsqu’on a deux valeurs définies :
div {border-width: 10 30 }
Ici, les bordures haut et bas ont une épaisseur de 10 pixels tandis que les bordures gauche et droite ont une épaisseur de 30 pixels. Lorsqu’on a une seule valeur, par exemple : border-width: 10 , cela implique que les quatre côtés prennent la même valeur.
Continuons notre découverte des boîtes en allant voir comment traiter les bordures.
27 décembre 2004
Mise en page : Le positionnement flottant avec les CSS
CSS : Une mise en page sur 2 colonnes avec la propriété float
Construire un menu avec les CSS
Le recouvrement de blocs
Positionner des blocs en absolu en CSS
Le positionnement relatif en CSS
Le positionnement des blocs en CSS : Le flux normal
Mise en page en CSS : les types de boîtes
CSS : Les bordures
Les pseudo-classes
