« Le langage CSS/Le positionnement des éléments » : différence entre les versions

Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises <code>div</code>, <code>p</code>, <code>h1</code>, <code>ul</code>, <code>li,</code> etc.) ainsi que leur positionnement en CSS est dorénavant indispensable.

Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "« calques" » en général), ce qui les rend souvent peu compatibles et peu pratiques.

* Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionné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 (<code><nowiki><img></nowiki></code>), une liste (<code><nowiki><ul></nowiki></code>), un paragraphe (<code><nowiki><p></nowiki></code>), etc. peuvent être stylés en CSS sans avoir besoin d'être contenus dans un élément <code><nowiki><div></nowiki></code>. Évitez d'ailleurs de surcharger vos documents d'éléments <code><nowiki><div></nowiki></code> 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 <code><nowiki><p></nowiki></code>, un titre par la balise <t><nowiki><h1></nowiki></code>, <code><nowiki><h2></nowiki></code>..., etc.… Notez que l'élément <code><nowiki><div></nowiki></code> est neutre est sert de "« bouche-trou" » pour englober d'autres éléments ou servir lorsqu'aucun autre élément n'est approprié. N'utilisez pas <code><nowiki><div></nowiki></code> 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, ...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 désirés...désirés… et déclarer que les CSS ne fonctionnent pas ! :)