Team-Masters.com
Que du Gratuit pour Webmasters
Mise en page en CSS : les types de boîtes
Pour faire de belles mises en page, quoi de plus simple que d’utiliser les feuilles de style. Comme nous l’avons vu, les éléments qui composent une page peuvent être considérés comme faisant partie d’une boîte. Il existe un certain nombre de propriétés qui permettent une mise en place précise des blocs, ce qui facilite la mise en page qui peut s’effectuer avec beaucoup plus de précision que ce qu’on faisait en HTML à l’aide de tableaux.
Nous avons vu qu’un document HTML peut être défini comme une structuration de diverses boîtes qui s’empilent, s’imbriquent, se côtoient et qui en somme définissent différentes zones sur lesquelles on peut appliquer des styles en jouant sur des propriétés telles que la largeur et la hauteur, les bordures, la couleur...Avant de passer aux notions de positionnement proprement dit, il nous paraît essentiel de comprendre un certain nombre de notions indispensables concernant les boîtes.
2 types de boîtes : block ou inline ?
Il existe en réalité deux familles de boîtes : les boîtes de type bloc ("block") et celles de type en ligne ("inline"). En fonction de son appartenance à un type bloc ou en ligne, un élément HTML se comportera d’une façon différente. Quelle est la différence entre les éléments de type bloc et ceux de type en ligne ?
Les types bloc, même s’ils sont écrits côte à côte dans le code HTML (deux paragraphes par ex.) vont se placer par défaut l’un sous l’autre dans le navigateur .
Les éléments HTML de type en ligne, comme son nom l’indique, vont s’écouler au fil du texte. En fait, ils s’appliquent essentiellement à des portions de texte, comme des groupes de mots dans une phrase. Quand on veut mettre une partie de texte d’un paragraphe (type bloc) en gras, on va utiliser la balise "strong" qui est de type en ligne pour donner l’effet recherché à la portion du texte. Deux éléments en ligne qui se suivent dans le code HTML s’affichent l’un à côté de l’autre dans le navigateur.
De ce qui précède, il ressort que les boîtes de type bloc seront affichées dans une succession verticale. Ainsi, deux paragraphes (type bloc) qui se suivent dans le code HTML s’afficheront l’un au-dessous de l’autre avec un espace (interligne) entre les deux blocs qui correspond à leurs marges, aucun positionnement n’ayant été défini dans le code CSS, comme dans l’exemple suivant :
<p class="vert">La boîte verte s'affiche en premier</p>
<p class="jaune">Et la boîte jaune qui suit se place sous la précédente</p>dont voici le simple code CSS :
.jaune {
background-color: yellow;
}
.vert {
background-color: green;
color: white;
}
Les éléments de type bloc peuvent prendre des dimensions (largeur, hauteur, padding, marges externes). Une de leur propriétés importante est la possibilité de les placer (de les positionner) en les sortant du flux du document HTML pour effectuer des mises en page. Nous reviendrons là-dessus. Jusqu’ici c’est OK non ? Bien !
Et si on voulait afficher les deux boîtes non pas l’une sous l’autre, mais l’une à côté de l’autre ? On peut alors utiliser des boîtes de type "inline" comme la balise HTML <span>. En effet, par défaut, les boîtes de type en-ligne sont affichées dans une succession horizontale, tel dans l’exemple :
Le code HTML est le suivant :
<p>
<span class="jaune">Une boîte jaune</span>
<span class="verte">Une boîte verte</span>
</p>On voit donc que selon le type de boîte utilisée, on aura par défaut une mise en page avec des éléments l’un au dessous de l’autre (type bloc) ou l’un à coté de l’autre (type inline).
Voici les balises HTML qui par définition sont de type block :
L’élément div ;
Les titres h1, h2, h3, h4, h5, h6 ;
le paragraphe p ;
Les listes et éléments de liste ul, ol, li, dl, dd ;
Le bloc de citation blockquote ;
Le formulaire form ;
Le tableau table ;
Et voici les balises HTML qui par nature sont de type inline :
l’élément span ;
Le lien a ;
L’image img ;
Les emphases em et strong ;
La citation q ;
Les abréviations et acronymes abbr, acronym ;
Ces deux familles se distinguent aussi par le contenu qu’elles acceptent (en dehors du texte) :
Les éléments bloc peuvent contenir un ou plusieurs éléments bloc et/ou en ligne , sauf les paragraphes "p" et les titres "h1,h2,h3..." qui ne peuvent contenir que des contenus en ligne. Ils acceptent les propriétés comme largeur, hauteur, bordure, arrière-plan...
Les éléments en ligne ne peuvent renfermer que d’autres éléments en ligne . Certains éléments en ligne acceptent des propriétés de dimensions (largeur, hauteur) comme les balises HTML "img, input, textarea, object et select". Les autres éléments en ligne comme "em, strong, a" n’ont pas d’attributs de dimensions car ils n’occupent que la place nécéssaire à leur contenu. Par exemple, on ne peut pas écrire <a href="..." width="12%"> blablabla</a>.
Soient les exemples HTML suivants :
<div><p>Un premier paragraphe</p><p>suivi d'un deuxième comme son ombre</p></div>
<span><p>Et ici un paragraphe dans un span</p></span>La première ligne de code est valable car un div (type bloc) peut contenir d’autres éléments bloc comme les paragraphes.
Mais pour la deuxième ligne, l’écriture n’est pas valable car une balise (span) de type en ligne ne peut contenir un paragraphe (de type bloc).
Tout cela est bien compris ? Si oui, nous allons pouvoir passer aux notions de flux et de positionnement des blocs.
15 février 2005
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
CSS : Les bordures
Mise en page avec les CSS : Comprendre le modèle de boîte
Les pseudo-classes
