CSS : on reprend tout à zéro ! (épisode 7)
Par Joe Gillespie
Cet article est le septième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.
Septième étape : les boîtes CSS
Nous avons déjà vu que le texte dans une page Web peut être découpé en titres ou en paragraphes, et que le langage HTML prend en charge ces opérations. Nous avons également vu comment les styles par défaut peuvent être modifiés à votre convenance, en leur attribuant de nouvelles définitions de style qui remplacent celles d'origine. Maintenant, je vais me pencher sur la façon de créer vos propres définitions de style pour étendre les possibilités du HTML et faire des mises en page plus intéressantes.
La partie « body » d'une page contient tout ce qui est visible ; cependant, comme je l'ai montré à l'étape 3, il est possible de découper cette partie en divisions plus petites et qui ont leurs propres styles. Ces divisions peuvent ne contenir qu'un simple caractère, ou au contraire inclure de grands pans rectangulaires de la page. Tout ce que nous avons à faire, c'est d'entourer la zone que nous voulons styler d'une paire de balises <div>...</div>. Chacune de ces divisions est comme une mini-page, et on les appelle souvent « boîtes CSS ». Les boîtes CSS sont les matériaux de base que l'on utilise pour construire des mises en page pour le Web, et je vais m'attarder sur la façon dont elles fonctionnent parce que c'est très important.
Les boîtes CSS peuvent avoir une hauteur et une largeur, une couleur de fond ou même une image de fond que l'on peut faire répéter pour créer un effet graphique. Par défaut, une boîte CSS s'étend de la marge gauche à la marge droite du corps de la page. Si vous n'avez pas indiqué de marge pour la partie « body », elle prendra donc toute la largeur de la fenêtre du navigateur. Si vous n'indiquez pas de hauteur pour une boîte CSS, elle n'en aura pas. Si vous y placez du texte, elle s'étendra verticalement pour contenir ce texte (ou cette image).
Pour éloigner du texte du bord d'une boîte, on peut ajouter du remplissage (« padding ») comme ceci :
Mieux vaut faire très attention avec le remplissage, parce que son interprétation dans Internet Explorer est très différente de celle de tous les autres navigateurs. Contrairement à notre illustration, IE place le remplissage à l'intérieur de la boîte, de telle sorte que sa hauteur et sa largeur ne changent pas. Tous les autres navigateurs placent le remplissage en-dehors de la boîte, ajoutant ainsi à sa largeur et à sa hauteur. Donc la taille de votre boîte peut varier selon le navigateur avec lequel vous voyez la page, ce qui peut avoir des conséquences désastreuses si vous êtes tenus à des mesures précises au pixel près.
Après le remplissage, vous pouvez placer une bordure (« border ») :
Les bordures existent dans plusieurs styles différents, et vous pouvez traiter chacun des quatre côtés séparément pour ce qui concerne l'épaisseur, le style et la couleur. Leur aspect varie un peu selon les navigateurs, mais voici à quoi elles ressemblent dans Mozilla :
L'épaisseur de la bordure augmente d'autant la taille d'une boîte.
Et pour séparer les boîtes les unes des autres, vous pouvez leur donner des marges (« margins »).
Il est fréquent de confondre les marges et le remplissage, surtout que ce qu'on appelle couramment la « marge » d'une page dans un livre ou une page Web est en fait du « remplissage » dans la mesure où c'est un espace qui ne peut sortir de la page, il est forcément à l'intérieur. Mais souvenez-vous que c'est un cas particulier. Pour le « body » d'une page Web, la marge va des côtés vers l'intérieur, tandis que toutes les autres marges CSS vont vers l'extérieur.
Le positionnement absolu
En plus d'avoir une hauteur et une largeur, les boîtes CSS peuvent être placées à n'importe quel emplacement sur la page en indiquant position: absolute;
Le principe du positionnement absolu est facile à comprendre, il correspond à la façon de voir les choses dans la vie de tous les jours. Par exemple, votre maison peut être située à 50 mètres de la Rue du Nord et à 100 mètres de la Rue de l'Est.
La façon la plus courante de donner une position à une boîte est tout simplement d'indiquer quelque chose comme top:50px; left:100px, mais on n'est pas obligé d'utiliser top et left, cela peut aussi bien être top et right, bottom et left ou bottom et right.
Voici quelques boîtes CSS avec différents styles, chacune affichant sa définition de style. Les possibilités de combinaisons sont infinies.
Quand les boîtes sont placées à des coordonnées absolues, avec des largeurs et hauteurs bien précisées, cela ressemble beaucoup à un travail de collage de coupures de presse ou de photos dans un cahier de souvenirs. Le problème, c'est que les cahiers conservent toujours la même taille, et pas les pages Web.
Le positionnement relatif
Si vous cherchez à décrire la position de la maison du voisin d'à-côté, vous pouvez dire qu'elle est à 70m de la rue du Nord et à 100m de la rue de l'Est, mais vous pouvez aussi dire qu'elle est à 5m, juste après la vôtre. Le positionnement relatif part du principe que les boîtes CSS sont placées l'une après l'autre. La première boîte est celle du dessus, la suivante est en-dessous, et la suivante encore en-dessous. De fait, elles flottent de haut en bas, à partir du haut de la page. Ce n'est peut-être pas très réaliste, mais imaginez une piscine couverte, avec à l'intérieur toute une pile de matelas gonflables. Le premier flotterait jusqu'à la surface, le suivant flotterait vers le haut et se retrouverait coincé sous celui du dessus, et ainsi de suite.
Pour obtenir que les boîtes CSS soient côte-à-côte au lieu de l'une au-dessous de l'autre, il faut leur dire de flotter à gauche ou à droite : float:left; ou float:right;. Tout comme nos matelas gonflables si la piscine est suffisamment large, elles se tiendront côte-à-côte, tant qu'il y aura de l'espace disponible. Puis elles glisseront à l'étage inférieur. Mieux vaut éviter cette situation, en vous assurant que les largeurs cumulées de toute une rangée de boîtes n'excèdent pas la largeur de la page. On peut le faire en précisant la largeur en pixels, mais en maintenant le total en-dessous de la largeur minimum d'un navigateur. On peut aussi utiliser les pourcentages, à condition de vérifier que la somme des pourcentages arrive bien à 100, ou mieux, un peu moins. Dans un tel contexte de positionnement relatif, évitez de mélanger pixels et pourcentages, sans quoi les résultats sont imprévisibles.
Ces exemples de boîtes flottantes montrent le comportement de boîtes positionnées de manière relative, en colonnes simples ou multiples.
http://www.wpdfd.com/editorial/basics/cssbasics7.html