Comment positionner les éléments en CSS ?
Les tableaux utilisés pour la mise en forme, ont toujours été déconseillés. Par contre, l'utilisation correcte de chaque balise (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS devient petit à petit indispensable au regard des avantages résultants.
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.
Voici comment positionner les éléments en CSS de façon optimale, bien que résumé schématiquement.
Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne
La compréhension de la structure des éléments va avoir de nombreuses implications par la suite, et paradoxalement c'est souvent un sujet peu connu des webmasters.
Hébergement de votre site Internet
Ce tutorial fait le point sur l'hébergement de votre site web. Nous allons voir quel est le principe de l'hébergement, comment ouvrir un compte chez un hébergeur et comment transférer les fichiers par FTP.
Le rendu par défaut des éléments HTML
Les documents web sont globalement régis par deux normes de langages : la norme (X)HTML et la norme CSS.
Le langage HTML définit la structure du document à l'aide d'éléments (les balises) porteurs de sens. Le langage CSS apporte le rendu (visuel, auditif, imprimé, ...) sur les différents supports (écran, plage braille, imprimante,...). Les deux entités sont donc complémentaires mais dissociées : la première apporte le sens (la sémantique); la seconde ajoute du rendu d'affichage.
Cependant, même lorsqu'aucun style CSS n'est défini, chaque élément hérite d'un affichage par défaut (rendu initial) qui peut être légèrement différent d'un navigateur à un autre.
Voici comment comprendre le principe et s'en servir pour corriger les différences de rendus entre les navigateurs.
Les DTD HTML4.01 et XHTML1.0 : comment choisir ?
Si vous avez adopté la démarche de mise en conformité de votre site Web avec les Standards (X)HTML et CSS définis au sein du W3C, ou si vous vous apprêtez à le faire, vous ne pouvez manquer d'avoir à placer, en tête de chacune de vos pages, une étrange portion de code du type :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Il s'agit de ce que l'on appelle une Déclaration de Type de Document (DTD), également nommée "doctype". Voici une introduction à cette notion, suivie d'un rapide descriptif des 6 DTD entre lesquelles vous serez le plus souvent amenés à faire votre choix. Ce problème du choix de la DTD est développé ici en 2 versions successives :
- une première version, détaillée
- une seconde version très simple, si vous voulez une réponse immédiate à la question : qu'est-ce que je mets au début de ma page Web ?
Mon site validé en XHTML Strict n'est pas compatible partout. Pourquoi ?
Vous venez de créer votre premier site web que vous avez validé avec succès sur l'outil de validation du W3C.
Mais oh surprise ! Votre site web ne se comporte pas de façon identique sur tous les navigateurs. Naturellement, tout le monde vous a dit qu'un site en XHTML strict et CSS était le meilleur moyen d'avoir une compatibilté maximale partout.
Quelle est la différence entre un DIV et un "calque"
Résumé : les logiciels WYSIWYG automatiques, comme Macromedia Dreamweaver (jusqu'aux versions très récentes), continuent de véhiculer les concepts et termes obsolètes de "calques".
En mode Création de Dreamweaver, il est possible de concevoir sa mise en page soit grâce aux tableaux, soit grâce aux "calques", c'est à dire - selon lui - les balises <layer>, <div> ou <span>.
Or, cet abus de langage est malheureusement demeuré très ancré et induit de nombreux amalgames.
Quelle est la différence entre une classe et un id ?
Chaque terme permet de créer des propriétés CSS personnalisées, que vous pouvez appliquer à vos balises, mais il existe des différences entre une classe (.toto) et un id (#toto)
XHTML : trop de DIV tue les DIV ! (livre)
L'ère des mises en page avec tableaux imbriqués est révolue, ce n'est pas un secret ni un scoop.
L'utilisation des "calques" <div> associés aux styles CSS devient le nouveau courant d'intégration et de mise en forme des documents.
Cette nouvelle "mode" apporte son lot de fanatismes et surtout d'incompréhensions et de mauvaises utilisations. Pour résumer, les gens se disent : "chouette, je vire les tableaux et je remplace par des divs". Ensuite ils se retrouvent avec autant de divs qu'ils avaient de cellules de tableaux et se disent : les "calques" / CSS c'est nul, ça sert à rien !
XHTML, CSS, accessibilité : confusions et amalgames
L'utilisation des éléments (X)HTML (DIV en général) associés aux styles CSS devient le nouveau courant d'intégration et de mise en forme des documents pour de nombreuses raisons.
Cette nouvelle "mode" apporte son lot de fanatismes et surtout d'incompréhensions et de mauvaises utilisations.
Pour exemple le plus classique : les concepteurs se lancent : "chouette, je vire les tableaux et je remplace par des divs" (ensuite ils se retrouvent avec autant de divs qu'ils avaient de cellules de tableaux et se disent : "les calques / CSS c'est nul, ça sert à rien !")...
