jeudi 3 Avr 2008

Bien démarrer avec les CSS

CSSLes développeurs web sont de plus en plus formés directement aux CSS au lieu de la vielle présentation en tableaux. :twisted: Toutefois certains sont toujours dans la transition et trouve cela compliqué.

Petit guide des choses à penser avant de se jeter dans le code.

La première chose à faire est de raisonner par "blocs". Lisez bien ce qui suit même si vous croyez bien connaitre l'HTML, surtout si ces connaissances datent de quelques années! ;-)


Vous avez en HTML des éléments de type bloc (<p>, <table>, <div>...) et d'autres de types en ligne (<strong>, <em>, <span>...). Tous indique "quelque chose", c'est à dire un texte dans une balise <strong> est plus important. S'il s'agit de mettre uniquement le texte en gras pour faire joli, il faut utiliser <span> avec un style.

Une balise en ligne doit être contenu dans une balise bloc, et une balise bloc ne peut pas être contenu dans une balise en ligne. Ceci vous expliquera peut-être certaines erreurs au validateur du W3C! <div> et <span> sont 2 balises qui n'ont pas de signification et servent uniquement à la présentation. L'une de type bloc, pour la grosse présentation. L'autre de type en ligne pour mettre en valeur un bout de texte.


Prenons l'exemple de ce blog, même si ce n'est pas l'idéal*. Il y a un bloc titre en haut, 2 colonnes à placer et le corps central du site.
Inutile de chercher la complication: le corps va dans la balise <body> auquelle on va assigner des marges et du "padding" pour laisser de la place en haut et sur les cotés.

*Remarque: Ce blog n'est pas un très bon exemple parce que le créateur du thème a encadré le texte principal avec 3 balises div qui sont parfaitement inutiles. Les 2 éléments html et body dans le fichier CSS étaient tout à fait suffisant pour obtenir exactement la même présentation. Je n'ai pas eu le courage de refaire le thème, mais cela a surement un léger impact sur le référencement et complique le CSS inutilement. N'oubliez pas qu'en XHTML, la balise html peut aussi recevoir de la présentation en CSS, ce qui peut permettre de se servir de body comme d'un conteneur au fond différent comme ici.

Le titre et les 2 colonnes vont dans des <div>, balise sans "poids" qu'on placera à la fin de nos pages HTML. On les positionne ensuite en CSS en utilisant la position absolue. Par exemple:

div.colonne-gauche
{
  position: absolute;
  top: 200px;
  left: 10%;
}

Pourquoi à la fin? Parce que ça sert surtout à la présentation. Le texte important est le texte central, c'est lui qui doit démarrer la page. De plus, les moteurs de recherche lisent le texte HTML sans présentation. Il vaut mieux qu'il tombe tout de suite sur le texte intéressant, plutôt que de se taper un menu et 2 colonnes qui sont identiques sur toutes les pages! :-)


Pour vérifier comment un site est vu sans le style CSS, il suffit

  • avec Firefox d'aller dans le menu Affichage, Style de la page, Aucun style
  • avec Opera de cliquer sur l'icone avec des lunettes, puis sur le bouton Mode auteur dans la barre qui apparait

C'est comme ça que vous verrez le 9 avril 2008, tous les sites qui participent à l'opération «CSS naked day»... ;-)


café Cet article vous a aidé? 
Offrez-moi un café!
Agrégateur informatique

Laisser un commentaire

Azur Dev