Résumé et pense-bête. Voici les principaux points à retenir de cet article :
-
Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Cela signifie que les CSS ne s'appliquent pas qu'aux éléments <div> contrairement à certaines idées reçues : une image (<img>), une liste (<ul>), un paragraphe (<p>), etc. peuvent être stylés en CSS sans avoir besoin d'être contenus dans un élément <div>. Évitez d'ailleurs de surcharger vos documents d'éléments <div> inutiles.
-
Employez toujours les éléments selon leur fonction et non selon leur aspect (puisque cet aspect pourra facilement être modifié via CSS) : un paragraphe sera défini par la balise <p>, un titre par la balise <h1>, <h2>..., etc. Notez que l'élément <div> est neutre et sert de "bouche-trou" pour englober d'autres éléments ou servir lorsqu'aucun autre élément n'est approprié. N'utilisez pas <div> pour englober des éléments seuls !
-
Il existe deux types généraux d'éléments HTML : les balises de type "en-ligne" et les balises de type "bloc". Cette différence est fondamentale et a de nombreuses implications sur les styles qui peuvent être appliqués.
-
L'imbrication des éléments les uns dans les autres, et les notions de parenté (parent, ancêtre, frère, ...) permettent de styler facilement les éléments en utilisant cette hiérarchie dans les sélecteurs CSS. Cela évite d'employer des noms de classes ou d'id multiples et inutiles, qui complexifient la lecture et la compréhension des styles.
-
Il existe plusieurs schémas de positionnement en CSS : un schéma de positionnement dans le Flux (positionnement par défaut), et trois schémas de positionnement qui sortent l'élément du Flux (positionnement absolu, positionnement fixé et positionnement flottant). Un dernier "positionnement" (relatif) est en fait une variante du positionnement courant qui provoque un décalage. La notion de Flux est fondamentale.
-
Chaque schéma de positionnement a ses règles et spécificités. Mieux vaut bien comprendre ces règles pour éviter des interactions ou des comportements non sollicités... et déclarer que les CSS ne fonctionnent pas ! :)
Les balises de bloc et les balises en-ligne
Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne.
Voici un résumé pour les lecteurs pressés
- les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <p>) ou les éléments d'une liste (balise <li>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur.
- les éléments de rendu "en-ligne" se placent toujours l'un à côté de l'autre afin de rester dans le texte. Par exemple : le renforcement d'une partie de texte à l'aide de la balise <em>.
- sauf exceptions, les éléments de type en-ligne n'ont pas de dimension à proprement parler par défaut (il n'occupent que la place minimum nécessaire à leur contenu). C'est le cas des éléments <a>, <strong>, <em>, <span>, etc.
Ancêtre, Parents, Enfants, Frères
Comprendre l'imbrication des éléments (boites) les uns dans les autres est essentiel.
Chaque document HTML est toujours composé de conteneurs. Ceux-ci peuvent être ancêtres, parents, enfants ou frères. Ces différents éléments composent une hiérarchie d'imbrications.
- Un élément Ancêtre est un élément qui contient un élément ou une hiérarchie d'éléments
- Un bloc Parent est un élément contenant directement un autre bloc. Par exemple, un DIV contenant un paragraphe P. Attention : si ce paragraphe contient lui-même des éléments (ex: strong), DIV ne sera pas Parent de l'élément strong mais uniquement son Ancêtre. Le Parent est donc l'Ancêtre immédiat.
- Un bloc contenu directement dans un autre bloc est dit Enfant de cet élément. Par exemple, ici les éléments LI sont enfants de leur conteneur UL.
- Les éléments ayant le même élément Parent sont appelés Frères.
Le Flux
La mise en place des différents éléments de la page se fait par défaut selon le Flux courant.
Les éléments (balises) sont placés les uns après les autres dans le code HTML de la page.
L'ordre dans lequel apparaissent les balises dans le code HTML sera l'ordre dans lequel ils seront affichés et apparaitront dans le document, c'est le Flux. Cela signifie que, par défaut, chaque élément est dépendant des éléments frères qui l'entourent.
Par défaut, les balises Bloc et les balises En-ligne ont un comportement différent dans le flux normal (voir tutoriel sur la structure des balises).
NOTE : les blocs positionnés en "absolu" ou "fixé" sortent du flux naturel et échappent quelque peu à cette règle.
Ils ne sont alors plus dépendant des éléments frères.
Pour se placer, un tel bloc se réfère non pas à son Parent direct, mais au premier Ancêtre positionné qu'il rencontre.
Sachez utiliser chaque balise à bon escient !
- Il est souvent inutile de faire des imbrications multiples de <div>, ceux-ci ne servant qu'à délimiter des zones de page
- Evitez d'utiliser les balises <table> pour la mise en page de votre site : ils ne sont pas fait pour ça mais pour des données tabulaires et statistiques
- Utilisez les balises <h1>...<h6> pour vos titres et non des balises <p> améliorées
- Utilisez les listes <ul> <li> pour vos menus, car leur utilisation est tout à fait appropriée pour ça
Pour aller plus loin
Passez à la seconde partie de cet article / tutoriel : Initiation au positionnement CSS (partie 2) (de Benjamin)