Quelques notes sur XHTML et CSS, au fil de l'eau…

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Quelques notes sur XHTML et CSS, au fil de l'eau…

Le quotidien de l’intégrateur XHTML et CSS est parfois ponctué de vide téléologique concernant les bonnes balises à utiliser en fonction du type de contenu. J’ai longtemps cherché à produire un document-type pouvant servir à n’importe quelle commande. Hélas ! Chaque projet demande des réponses graphiques et structurelles ajustées. Néanmoins, je ne résiste pas au plaisir de partager avec vous, à l’occasion du 100ème jour depuis la mise en ligne de css4design, une sorte de medley mashup de quelques thèmes liés à l’intégration web. Restez vigilant : malgré toute l’attention apportée à la rédaction de ce billet, il reste encore des traces d’humour sous le tapis de souris.

… ou comment sortir « téléologique1 » du même chapô que « mashup2 »

Le design : centré, fixe, liquide…

C’est sur ces contraintes de structure mettant en jeu les balises XHTML que je voudrais m’attarder un peu en votre compagnie. Notre mise en pages doit-elle être de largeur fixe, ou variable ? Centrée, ou pas ? Il m’est difficile de choisir à votre place, mais en ce moment la tendance est de présenter des pages minimalistes de largeur fixe, centrées dans le navigateur.

Dans l’échantillon de code qui suit, on crée un container d’une largeur de 750 pixels, centré horizontalement grâce au raccourci margin: 0 auto. Ainsi, tout le contenu placé dans la balise identifiée par #container sera centré dans la page.

html, body {
     margin: 0;
     padding: 0;
     text-align: center;
}
#container {
     position: relative;
     width: 750px;
     margin: 0 auto;
     text-align: left;
}
La position: relative n’est pas indispensable pour le centrage, mais permet d’initialiser les valeurs top et left à partir du point situé en haut et à gauche de notre container, et non plus à partir du coin supérieur gauche de la fenêtre du navigateur, comme c’est le cas par défaut, avec bien sûr, des différences entre les navigateurs.

C’est pourquoi, il est judicieux de mettre le padding et le margin des balises html et body à zéro. Par ailleurs, IE5 ayant du mal avec margin: 0 auto, on prendra soin de centrer l’ensemble du document avec text-align: center, et ensuite d’expliciter la valeur d’alignement du texte par défaut dans le container.

MAJ : Pour la remise à zéro des style par défaut des balises HTML, je vous invite à lire 5 Resets CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs pour en savoir plus.

Dans la plupart ces cas, le choix d’un design à largeur fixe permet de mieux contrôler le nombre de mots par ligne pour offrir une lecture confortable (qu’on trouve raremment dans les pages où le texte s’étire d’un bout à l’autre de la fenêtre du navigateur…). A condition toutefois de permettre l’agrandissement de la taille du texte, en utilisant des unités relatives em, ex ou %, à la place des px qu’IE ne sait pas agrandir…

Dans d’autres cas, ce choix est dicté par les difficultés liées à la conception d’un design liquide (ou fluide) comportant des visuels en haut, en bas, sur les côtés et dans les coins ! En effet, si la réalisation d’un design composé d’images qui se répètent verticalement est aisée, ce n’est pas toujours le cas lorsqu’on veut que la mise en pages s’adapte horizontalement et verticalement à la taille de la fenêtre (cf. mon billet «Design CSS : fixe, élastique ou liquide ?» pour plus d’information sur la question).

Une page web toute simple

La structure que l’on rencontre le plus souvent sur le web est composée d’un titre h1 suivi des différents niveaux de sous-titre h2, h3… le tout, agrémenté de texte p et d’image img. Notez que pour les images, on peut mettre la balise img dans la même balise p que le texte, ou dans sa propre balise p. On divisera ensuite (en fonction de la nature du contenu) le document en plusieurs parties avec les balises div dont c’est précisément la fonction.

Si l’on ajoute la gestion des colonnes, on obtient une structure qui ressemble à la plupart des pages que l’on trouve à portée de clic ; les différences étant souvent le fruit d’un travail sur l’identité visuelle et du soin apporté à la réalisation-intégration des divers éléments composant la page.

MAJ : Lire Conception dans le navigateur avec HTML5 & CSS3 sur le marquage structurel d’une page web avec HTML5.

Des colonnes avec float

Pour en revenir aux colonnes, la propriété float, associée aux valeurs right ou left, donnera rapidement forme à votre document, à condition de ne pas oublier le clear: right, left ou both pour ajouter un élément de type pied de page que nous voudrons voir, comme son nom l’indique, à la fin de notre page, et ce, quelque soit la hauteur des contenus respectifs de nos deux colonnes !

C’est vrai qu’Internet Explorer n’a pas toujours besoin que l’on explicite un clear après un float, contrairement aux navigateurs respectant les spécifications du W3C comme Firefox ou Opera. L’esprit humain non plus, puisqu’il faut souvent passer de bons longs moments avec les spécifications pour s’en convaincre. Quoiqu’il en soit, souvenez-vous que si votre div est placée correctement dans un navigateur et pas dans l’autre, c’est souvent la faute à float ;)

Manipulez, il en restera toujours quelque chose

Pour mieux observer ce phénonème, je vous propose quelques manipulations à faire chez vous sur un exemple de positionnement avec float. Tout est précisé dans le code source, mais pour les jedi, un résumé devrait suffire :

  1. Dans #container, enlevez les commentaires autour de width: 900px;, réaffichez cette page dans IE6 et FF et observez le déplacement du footer dans FF.
  2. Puis, dans #footer, enlevez délicatement les commentaires autour de clear: both, et réaffichez cette page dans IE6 et FF. Que s’est-il passé avec le footer ?
  3. Pour terminer, remettez tout comme au début, et ajoutez du texte dans la sidebar. Que se passe-t-il ? Que faut-il faire ?

Tant que nous somme dans la float, et les colonnes, j’en profite pour vous proposer un autre exemple de mise en page sur une ou deux colonnes.

Pour la boite, vous prendrez quel modèle ?

Dès que l’on applique une largeur à un élément de type block, on prend le risque de tomber dans le maelström des différents modes de calcul concernant le modèle de boite : Internet Explorer a une façon bien à lui de mettre border, padding et zone de contenu dans le même sac, contrairement au modèle standard qui dissocie bien chaque élément dans le calcul final de la boite.

Grosso modo, un bloc de 250px de large avec un padding de 20px et un border de 5px donneront 250 + 20 + 20 + 5 + 5 = 300 pixels dans le modèle standard, tandis que cette valeur sera ramenée à 250 pixels sur IE, puisque la bordure et la marge intérieure seront assimilés à la zone de contenu :(

Ok, quelques mots sur le DocType switching… Ou comment forcer l’une ou l’autre interprétation des dimensions du modèle de boite. Pour résumer la fin de l’article d’Openweb cité plus haut, la plupart des navigateurs modernes (si si, même IE6) basculeront dans le modèle de boite standard si une DTD XHTML (strict, transitional ou frameset) est spécifiée dans l’en-tête de la page. Sauf pour IE6 (faut pas trop rêver non plus…) qui rebascule dans son modèle de boite propriétaire dès qu’il voit le méchant prologue XML

Il existe de nombreux contournements (hacks) plus ou moins funky pour régler ce problème de compatibilité des modèles de boite. Pour ma part, je m’en tiens à une ligne de conduite simple : j’applique le padding aux éléments enfants du bloc qui possède une propriété width. Lorsque celà n’est pas possible, je spécifie une feuille de style pour IE en utilisant les commentaires conditionnels.

Si votre page contient des formulaires, je vous invite à lire ce billet sur la conception de formulaires sans tableau qui a gardé toute sa fraicheur ;) Souvenons-nous toutefois de ne pas troubler l’utilisateur avec des formulaires trop funkydéliques. L’utilisateur ne fait pas que remplir des champs de saisies, il donne un peu de lui-même : respectons-le !

Et comme vous voudrez certainement mettre de beaux visuels en fond de page, je vous propose ce billet sur l’utilisation, non pas d’un, mais de deux background pour enjoliver votre fond de page !

Il n’y a pas que les div dans la vie

Après la mise au point du squelette de notre page, nous allons nous occuper des autres éléments qui nous aideront à structurer le contenu. J’ai évoqué rapidement la balise h1 et ses petites soeurs h2…, h6 qui doivent être utilisées pour les titres et sous-titres de vos documents.

Par exemple, plutôt qu’un div id= »titre1″, on stylera la balise h1 pour le plus grand plaisir des moteurs de recherches et navigateurs alternatifs ! La balise p encadre les paragraphes ; blockquote sert lorsqu’on cite une portion conséquente de texte.

A noter que cette balise peut contenir d’autres éléments de type bloc, comme p ou table, mais la réciproque n’est pas vraie. Pour mieux connaître les mœurs subtiles des balises HTML, j’abuse de la bande passante de gotapi.com.

Lorsque la structure du contenu implique une idée de liste, le mieux, c’est encore, d’employer les listes ordonnées ol ou non ordonnées ul avec leur cohorte de li. Ces listes sont très pratiques et permettent de nombreuses fantaisies en matière de CSS.

Mais on oublie trop souvent les listes de définitions qui peuvent rendre de grands services, comme présenter la chronologie de ma loupanthère, par exemple… Le sujet des listes de définitions est inépuisable, ce qui n’est pas mon cas : je vous ai donc laissé quelques liens à suivre dans la linkographie.

Les éléments en ligne c’est pour aujourd’hui ou pour demain ?

Après sur survol des éléments de type block, il nous reste tout juste assez de temps pour jeter un oeil sur les éléments en ligne. J’utilise assez souvent les éléments suivants : samp pour spécifier les échantillons de code ; em pour l’emphase (en gros, ça met de l’italique) ; strong pour marquer un renforcement du texte (en gros, ça met du gras), q pour les citations courtes mais pas forcément vulgaires…, a pour les liens, etc.

Bon, c’est comme le café, je crois que ce n’est pas la peine d’en rajouter. Et puis vous êtes sûrement déjà parti faire un tour sur gotapi ou pire, sur bashfr où vous trouverez des vrais morceaux d’humour, pas comme ici :)

Et vous, quelles sont vos balises préférées ?

Linkographie :

Maxdesign
Sans doute l’un des meilleurs site au monde concernant les 1001 façons de styler les listes ;)
Selfhtml.org
Tout sur le formatage des listes.
Pompage
L’essentiel et un peu plus sur les listes de définitions.
Alsacreations
Utilisez les listes de définition pour structurer vos menus déroulants.
Giminik
Liste des attributs et événements associés à la balise dl

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



8 commentaires pour “Quelques notes sur XHTML et CSS, au fil de l'eau…”

  1. Pierre6020 dit :

    Il faut tout de même préciser qu’IE 6 respecte tout à fait le modèle de boîte standard, sauf si aucun Doctype n’est spécifié, ou encore qu’un prologue xml est utilisé (ce qui est illogique puisque IE 6 n’accepte pas le XHTML en application/xml).

    Quand à IE 5… Voilà maintenant 5 ans (!) qu’IE 6 existe. On passe à autre chose ?

  2. Je n’en ai pas parlé explicitement puisque le sujet était abordé dans le lien donné au début paragraphe "Pour la boite, vous prendrez quel modèle ?". Mais suite à votre commentaire, je pense rajouter une phrase sur le sujet ;) Concernant l’obsolescence d’IE5, je suis assez d’accord, surtout quand je lis dans mes stats que les utilisateurs d’IE5.x ne représentent pas 1%

  3. Intéressant de parler de cela a 15 jours de l’arrivée de Internet Explorer 7, qui d’ailleur va poser problème pour nous intégrateur :

    • L’installation d’ie7 va être obligatoire
    • Aucun retour vers ie6 ne sera possible.

      Alors que beaucoup d’entreprises ont des systèmes personnalisés pour gérer les installations des mises à jours, comment on va faire nous pour tester un site internet sous :

    • Firefox
    • Ie6
    • Ie7

      ? De plus certaines entreprises sont encore resté à ie5 ou ie4 … comment faîtes vous pour gérer cette problèmatique ?

      Merci.

  4. br1o dit :

    Le fait qu’IE7 supporte un peu mieux les standarts qu’IE6 suffit à me rendre heureux qu’il soit obligatoire et irréversible ;)

    Pour tester sous IE6 après avoir installé IE7 ? Je suis resté à w2k et n’ai donc pas la possibilité de tester sous IE7 ;)

    Comme je l’ai précisé dans le billet, les commentaires conditionnels sont nos amis (pour la vie ?) pour rendre un site visible par toutes les versions d’IE, sans pour autant sacrifier la pureté de la feuille de style "standard". Et pour tester dans différents navigateurs, j’utilise l’excellent browsershots.org/ ;)

  5. Eric dit :

    je ne comprend pas pourquoi doit on s’évertuer à utiliser des div pour la trame de base alors qu’un simple tableau permet facilement de créer des colonnes, un titre un footer, etc…

    ma remarque est stupide ?

  6. br1o dit :

    @Eric -> En règle générale, je ne m’évertue pas à pousser quiconque à ne plus utiliser les tableaux pour autre chose que la mise en forme des données tabulaires… J’essaie simplement de partager ce que je connais du design web ; la mise en page par tableaux n’en fait tout bonnement pas partie (enfin, plus depuis pas mal d’années déjà ;)

    Je me suis vite rendu compte qu’afficher un site "full table" sur un PDA était une expérience très décevante sur le potentiel des "table" en matière d’universalité d’accès au contenu… c’était il y a 4 ans, j’ai changé de PDA depuis ;)

    Pour connaître toutes les implications de l’accessibilité, je vous propose de rendre visite à quelqu’un de plus qualifié, à l’adresse http://www.blog.webatou.be/

    P.S. Ca me donne presque envie d’écrire un petit billet sur ce troll de sujet : table vs div ;)

  7. Eric dit :

    Merci pour ta réponse.

    Je suis en train de refaire entièrement le site zyvon, étant plutôt programmeur et non graphiste au départ, je suis très friant de conseils d’experts.

    Je galère un peut à faire la trame de mon nouveau site qu’avec des divs et j’imaginais faire une version spécifique du site pour pda/telephone (genre mobile.zyvon.com) car le contenu d’un site qui s’affiche sur un mobile et bien évidement adapté : on affiche le strict minimum (et sans faire des pirouetes genre display:none; :-)… enfin j’imagine.

    Etant un lecteur assidu de ce site, un billet sur table vs div serais interressant.

  8. Valider du XHTML avec un XML Schema Comme ce n’est pas indiqué dans la recommendation du W3C sur XHTML 1.0, il est possible de valider du contenu avec un XML Schema! Dans la recommendation, il n’y avait que des DTD, mais c’est de moins en moins usité… Le XML schema se trouve .



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site