Cette FAQ n'est plus mise à jour sur HFR.
 
Elle se trouve désormais sur le site Incongru.
 
Tous les futurs articles/tutoriaux/exemples seront postés là bas.
 
Voir détails ici : http://forum.hardware.fr/hardwaref [...] tm#t638322
 

 
--
 
Voici une première ébauche de la FAQ sur le HTML et les CSS, j'essaierai de la mettre à jour régulièrement en fonctions des différentes contributions.
 
Si vous avez des liens à ajouter ou des topics de HFR qui vous ont été utiles ou qui reviennent souvent, n'hésitez pas à les ajouter !
 
--
 
Sommaire
 
 - Questions générales/liens : tout de suite après
 - Comment déclarer les styles ?
 - Le point sur les frames
 - Comment bien imprimer une page web ?
 - Comment créer une fenêtre pop-up ?
 - En HTML/XHTML strict il n'y a pas d'attribut target ! Comment est-ce que j'ouvre un lien dans une nouvelle fenêtre ?
 - Ma page est en HTML/XHTML strict mais j'ai une ligne blanche sous les images. Comment résoudre ce problème ?
 - Quel sont les équivalent CSS de cellpadding et cellspacing ?
 - Le validateur indique une erreur sur les liens qui comportent des '&'. Que faire ?
 - Comment centrer horizontalement un tableau ou un <div> ?
 - Le positionnement avec les CSS
 - Comment créer des menus avec les CSS ?
 - Comment ajouter un "favicon" dans la barre d'adresse du navigateur ?
 - Qu'est-ce que l'overflow ? Comment l'utiliser ?
 - De la bonne utilisation de vertical-align
 - Comment faire de bonnes citations ?   NOUVEAU !
 
 
--
 
Cette FAQ traite principalement du langage HTML/XHTML et des feuilles de styles CSS, aurement dit les 2 outils indispensables pour diffuser des informations sur le Web. Le JavaScript et le XML (et ses dérivés) ne sont pas forcément hors sujet pour les questions les plus courantes.
 
 
* Qu'est-ce que le HTML ?
 
Le HTML (HyperText Markup Language) est un langage de balises destiné à présenter et structurer des données.
 
La version actuelle du HTML est la 4.01. Etant donnée l'apparition du XHTML, il n'y aura pas d'autre version du HTML.
 
Aux débuts du HTML, celui-ci a été utilisé uniquement pour la diffusion de documents sur le Web et pour être consulté dans un navigateur. Aujourd'hui, le HTML devient plus "généraliste" et peut tout à fait être employé pour réaliser des présentations ou des documents destinés à être imprimés.
 
 
* Qu'est-ce que le XHTML ? Un truc marketing ?
 
Le XHTML est le successeur du HTML. Le XHTML hérite du HTML la plupart des balises et du XML pour l'évolutivité. On peut en effet rajouter des balises en fonction de ses besoins. D'où le nom eXtensible HyperText Markup Language.
 
Etant donné que le XHTML est un document XML, cela implique qu'il soit bien formé, c'est à dire que :
- toute balise ouverte doit être fermée (<p>...</p> ou <br /> )
- les noms des balises et des attributs doivent être écrits en minuscules (<span class="plop"> et non pas <SPAN CLASS="plop">
- les valeurs des attributs doivent être entre guillemets (class="plop" et non pas class=plop)
- les attributs doivent être "complets" (<option value="plop" selected="selected"> et non pas <option value="plop" selected> )
 
Voici un tutoriel très complet sur la démarche à suivre pour créer sa propre DTD et donc ajouter ses propres balises au langage XHTML : http://www.laltruiste.com/coursxhtml/creation.html
 
 
* Qu'est-ce que les normes ? Je suis obligé de faire des pages "aux normes" ?
 
Tout d'abord, je conseille la lecture de ce topic et de celui-là
 
Il y a de cela 5-6 ans le HTML évoluait surtout suivant l'impulsion des éditeurs de navigateurs (d'abord Netscape puis Microsoft) avec pour conséquence l'apparition de balises propriétaires... Bref c'était la jungle et il y a avait un danger réel pour que chacun parle son propre langage sur le Web, ce qui allait à l'encontre des principes d'Internet (libre accès aux données, interopérabilité).
 
Depuis cette date le World Wide Web Consortium a sorti plusieurs normes sur le HTML (2.0, 3.2, 4.0...) qui se sont efforcées de coller le plus possibles aux fonctionnalités des navigateurs. Aujourd'hui la situation est inversée : les normes actuelles (XHTML 1.1, CSS 2.1) sont clairement en avance par rapport aux naviagateurs.
 
Le XHTML 1.0 et le HTML 4.01 existent en fait en 2 versions :  
- une version dite transitional. Elle intègre beaucoup de balises et d'attributs HTML propriétaires ou destinés à la mise en page. C'est la version idéale lorsqu'on veut qu'un site passe parfaitement avec des navigateurs "anciens" comme Netscape ou Internet Explorer 3/4
- une version dite strict. Beaucoup de d'éléments ou d'attributs sont dépréciés (et donc interdits). Ce sont en particuliers les balises de mise en forme (<center>, <font>...). Le but et de pousser les developpeurs à utiliser le CSS pour la présentation et de ne laisser dans le document HTML que le contenu.
 
 
Faire un site aux normes, revient à faire 2 choses :
- Dire quelle version du HTML ou du XHMTL on utilise. On doit pour cela déclarer au début du document HTML un DOCTYPE
- Se conformer à cette norme. On peut pour celà utiliser les validateurs du W3C.
 
 -> Le validateur HTML : http://validator.w3.org/
 -> Le validateur CSS : http://jigsaw.w3.org/css-validator/
 
 
Bien entendu, rien n'oblige un développeur à se conformer à une norme, mais cela présente plusieurs avantages :
- C'est la certitude d'avoir des documents syntaxiquement corrects, et on exclu donc les erreurs d'interprétation par les navigateurs
- Le document a plus de chance d'apparaître de la même façon sur un large panel de navigateurs
- Meilleure accessibilité
 
De plus, faire un site aux normes "strict" c'est faire un code plus propre et plus facilement évolutif (par rapport aux futures normes). L'inconvénient et qu'il est beaucoup plus difficile d'avoir un site qui passe parfaitement sur les anciens navigateurs et sur les nouveaux.
 
 
* Qu'est-ce que les CSS ? En ai-je besoin ?
 
Aux débuts du Web, la mise en forme de la page (alignement du texte, couleurs, polices...) était gérée par le HTML lui-même via certaines balises (<center>...) ou certains attributs (<font color="red">...). Cette manière de faire à vite montré ses limites à mesure que les exigeances en termes de mise en page se faisaient fortes (positionnement précis, multiples effets de styles sur le texte, les bordures ou les fonds, etc.). De plus comme les documents HTML se destinaient à être consultés sur autre chose qu'un écran d'ordinateur, il fallait rendre ceux-ci indépendants du support de visualisation.
 
C'est ainsi que les feuilles de styles en cascade ont été inventées. Les CSS permettent :
- de dissocier le contenu de la mise en forme. Un document (X)HTML correct ne devrait contenir aucune information sur l'apparence de la page mais uniquement les données et leur structure.
- de réutiliser du code. On définit une feuille de style unique pour un site entier ce qui assure une certaine cohérence graphique et une mise à jour aisée (il suffit de modifier la feuille de style).
- de redéfinir n'importe quelle balise HTML. Si par exemple on veut qu'une certaine catégorie de liens soient encadrée en pointillés, avec un fond rouge sombre et qu'avec la souris par dessus le cadre devienne continu et le fond rouge clair, on peut le faire avec les CSS. Pas en HTML.
- d'avoir un contrôle précis sur :
  o les images de fond (positionnement, répétition, fixation...)
  o les bordures (nombreux styles, épaisseurs...)  
  o l'overflow (gestion barres de défilements dans un cadre)
  o les listes (choix de la puce, de la méthode de numérotation...)
  o le curseur de la souris
  o le positionnement des éléments (absolu, relatif, flottant, caché...)
  o les polices (style, espacement des lettres, épaisseur...)
  o les paragraphes (alinéa, hauteur des lignes, veuves & orphelines...)
  o les tableaux (application de styles à des colonnes ou des lignes, contrôle au niveau des cellules du padding, des bordures...)
  o ...  
- de définir des styles pour différents types de médias de visualisation : l'écran de l'ordinateur, de la télé, les feuilles de papier, les transparents, les navigateurs à synthèse vocale...
 
 
* Les spécifications officielles du W3C
 
HTML/XHTML
 
Le HTML 4.01 : http://www.w3.org/TR/html4/   En français : http://www.la-grange.net/w3c/html4.01/
Le XHTML 1.0 : http://www.w3.org/TR/xhtml1/   En français : http://www.la-grange.net/w3c/xhtml1/
Le XHTML 1.1 : http://www.w3.org/TR/xhtml11/
 
Les feuilles de style
 
Les CSS 1 : http://www.w3.org/TR/REC-CSS1/   En français : http://www.yoyodesign.org/doc/w3c/css1/index.html
Les CSS 2.1 : http://www.w3.org/TR/CSS21/   En français : http://www.yoyodesign.org/doc/w3c/css2/cover.html (CSS 2)
 
Les normes en développement
 
XHTML 2.0 : http://www.w3.org/TR/2002/WD-xhtml2-20020805/ (spec de travail)
XFrames : http://www.w3.org/TR/2002/WD-xframes-20020806/ (spec de travail)
CSS 3 : http://www.w3.org/Style/CSS/current-work (spec de travail)
 
XML & Co.
 
XML 1.0 : http://www.w3.org/TR/2000/REC-xml-20001006   En français : http://babel.alis.com/web_ml/xml/REC-xml.fr.html
XSL 1.0 : http://www.w3.org/TR/xsl/
XSLT 1.0 : http://www.w3.org/TR/xslt   En français : http://xmlfr.org/w3c/TR/xslt/
XPath 2.0 : http://www.w3.org/TR/xpath20/   En français : http://xmlfr.org/w3c/TR/xpath/ (XPath 1.0)
SVG : http://www.w3.org/Graphics/SVG/
 
 
* Les liens qui-vont-bien (Tutoriels, articles, FAQ, index...)
 
Sites généraux
- http://openweb.eu.org/ [fr] (la référence francophone pour les standards du Web)
- http://www.laltruiste.com/ [fr]
- http://webstandards.org/learn/faq/faq_fr.html [fr] (une bonne FAQ pour bien commencer et savoir de quoi on parle)
- http://www.w3schools.com/ (de très bon tutoriels, dans l'esprit des normes du W3C)
- http://www.blooberry.com/indexdot/index.html (index exhaustif des balises HTML et propriétés CSS)
- http://www.htmlcompendium.org/Menus/0framefn.htm (similaire au précédent avec pas mal d'exemples)
- http://www.nypl.org/styleguide/ (introduction au XHMTL et aux CSS)
- http://www.digital-web.com/tutorials/ (articles généraux sur le web-design, les normes, le Flash, le SVG...)
 
HTML/XHTML
- http://fr.selfhtml.org/html/ [fr]
- http://www.w3.org/MarkUp/Guide/
- http://www.w3.org/MarkUp/Guide/Advanced.html
- http://www.topxml.com/xhtml/ (divers articles autour du XHTML)
 
CSS
- http://fr.selfhtml.org/css/ [fr]
- http://mammouthland.free.fr/cours/css/ [fr] (comme son nom l'indique)
- http://lorandw.free.fr/css/ [fr] (introduction aux CSS, pour débuter)
- http://www.scolagora.com/EcoleFour [...] mestre.asp [fr] (tutoriels intéressants autour du positionnement et du modèle de boîtes)
- http://www.esi.umontreal.ca/~gauvin/Cours08/css.html [fr] (l'essentiel en une page pour commencer)
- http://www.ophiuchus.org/bob/images_css [fr] (le point sur la gestion des images avec les CSS : fonds, contenu généré, listes...)
- http://css.alsacreations.com/ [fr]
- http://www.w3.org/MarkUp/Guide/Style.html (un guide pour commencer)
- http://home.tampabay.rr.com/bmerkey/cheatsheet.htm (beaucoup de choses sur une seule page)
- http://www.hwg.org/resources/faqs/cssFAQ.html (une FAQ très complète sur les CSS)
- http://www.nic.fi/~tapio1/Teaching/CSSSiteMap.php3 (un site quasi exhaustif sur les CSS avec notamment des infos sur les particularismes de chaque navigateurs)
- http://pixels.pixelpark.com/~koch/ [...] _browsers/ (comment masquer des CSS à certains navigateurs)
- http://www.westciv.com/style_maste [...] index.html
- http://www.webreview.com/style/index.shtml (voir également le tableau de compatibilité CSS des différents navigateurs, pas tout à fait à jour mais bien utile)
- http://www.xs4all.nl/~ppk/css2tests/ (beaucoup de tests autour des CSS 2 et un tableau de compatbilité des navigateurs)
- http://www.macedition.com/cb/resou [...] pport.html (tableaux de compatibilité pour les navigateurs sous Mac et IE 6 Win)
- http://www.meyerweb.com/eric/css/ (divers articles et liens sur les CSS ainsi que des exmples de layouts
- http://www.ericmeyeroncss.com/ (un autre site de Eric Meyer)
- http://www.v2studio.com/k/css/fixed/ (un exmple de boîtes fixes sans utiliser la propriété 'fixed' des CSS)
- http://www.thenoodleincident.com/tutorials/box_lesson/ (plein de modèles pour une mise en page sans tableaux)
- http://www.bluerobot.com/web/layouts/ (modèles de mise en page)
- http://glish.com/css/ (d'autres modèles)
- http://webdesign.about.com/cs/css/ (une présentation des CSS et surtout, un bon article sur les feuilles de style auditives)
- http://www.sovavsiti.cz/css/ (pas mal de "trucs & astuces" autour des CSS)
 
Sites d'information autour des langages du Web / Sites d'évangélisation
- http://pompage.net/ [fr] (traductions de A List Apart)
- http://www.alistapart.com/index.html (incontournable !)
- http://www.webstandards.org/
- http://glish.com/
- http://www.mozilla.org/projects/tech-evangelism/
 
Développement
 
Netscape :
   - http://devedge.netscape.com/ (articles généraux)
   - http://devedge.netscape.com/index_fr.html [fr] (version française)
Microsoft :
   - http://msdn.microsoft.com/workshop [...] _entry.asp (CSS)
   - http://msdn.microsoft.com/workshop [...] _entry.asp (DHTML)
Apple :
   -  http://developer.apple.com/internet/index.html (articles généraux)
Macromedia :
   - Mise en page sans tableaux avec Dreamweaver MX  [fr]
   - Créer des pages web professionnelles avec Dreamweaver MX en 5 étapes
 
Listes de diffusion
- http://www.css-discuss.org/
 
Weblogs
- http://standblog.com/ [fr]
- http://www.blogblues.com/blog.asp [fr]
- http://emmanuel.clement.free.fr/blog/ [fr]
- http://www.cybercodeur.net/ [fr]
- http://www.latchman.org/sam/ [fr]
- http://conforme.phidji.com/ [fr]
- http://ljouanneau.com/blog/ [fr]
- http://daniel.glazman.free.fr/weblog/
- http://www.zeldman.com/
- http://www.diveintomark.org/
- http://w3future.com/weblog/
- http://tantek.com/log/
- http://ln.hixie.ch/
- http://www.designdetector.com/
 
Design
- http://www.oswd.org/index.phtml (sites de designs libres à réutiliser)
- http://www.veblog.com/ (articles divers sur la conception d'un site web)
- Les liens de la section Graphisme
 
Accessibilité
- http://www.la-grange.net/accessibilite/ [fr]
- http://www.aful.org/gdt/interop/in [...] essibility  [fr]
- http://www.w3.org/WAI/
- http://www.wave.webaim.org/ (le validateur WAVE, pour vérifier le niveau d'accessibilité d'une page Web)
- http://www.accessify.com/ (très bon tutoriaux sur le sujet)
- http://www.useit.com/
- http://unadorned.org/dandruff/arch [...] tml#001763 (une liste de liens forts utiles : accessibilité des tableaux, des formulaires, conseils génraux...)
 
JavaScript / ECMAScript
- http://www.toutjavascript.com/main/index.php3 [fr]
- http://www.editeurjavascript.com/ [fr]
- http://www.mozilla.org/js/language/E262-3.pdf (les specs de l'ECMAScript)
- http://www.xs4all.nl/~ppk/js/ (plein de tests autour de JS et de DOM)
- http://webfx.eae.net/ (beaucoup de scripts pour IE et Mozilla)
- http://www.bratta.com/ (de très belles réalisation avec JavaScript et DOM)
- http://cross-browser.com/ (nombreuses solutions censée fonctionner avec la plupart des navigateurs : menus, positionnement....)
 
Navigateurs
- http://www.mozilla.org/ (navigateur open-source le plus respectueux des normes avec de nombreuses fonctionnalités)
- http://mozilla.org/projects/phoenix/ (navigateur léger basé sur le moteur de Mozilla, Gecko)
- http://www.opera.com/
- http://channels.netscape.com/ns/browsers/default.jsp (Netscape est basé sur Mozilla)
- http://www.microsoft.com/windows/ie/default.asp (pour ceux qui y tiennent vraiment)
- http://galeon.sourceforge.net/ (Galeon, navigateur pour Linux basé sur Gecko)
- http://www.konqueror.org/konq-browser.html (Konqueror, navigateur pour linux du projet KDE)
- http://www.icab.de/ (iCab, navigateur pour Mac)
 
- http://bugzilla.mozilla.org/ (il est un peu dur de s'y retrouver, mais toutes les réponses sont là, non seulement sur les "problèmes" liés à Mozilla, mais aussi pour des problèmes plus généraux au html & css)

* Comment déclarer des styles ?
 
Soit dans le document html lui-même, à l'aide de la balise <style> :
 

 
Soit dans un fichier séparé (par exemple styles.css) et rattaché au document HTML à l'aide de la balise link qui doit se placer dans la section <head> ... </head> :
 

 
Attention ! Si le fichier .css se trouve dans un répertoire particulier, toutes les URLs déclarées dans celui-ci (par exemple une image de fond) se font relativement au répertoire qui contient le fichier .css.
 
On peut insérer des commentaires dans les CSS /*comme ceci*/
 
 
* Il parait que les frames c'est Mal, pourquoi donc ?
 
Les frames présentent certains désavantages :  
- gènent le référencement des moteurs de recherche
- ne sont pas supportées par tous les navigateurs
- causent des problèmes lors de l'impression
- gâchent le design (en particulier les frames non redimensionnables)
- nuisent à l'accessibilité
 
Pour inclure des éléments qui se répètent sur plusieurs pages (par exemple un menu, une navigation ou de la pub) il est préférable d'utiliser des langages dynamiques comme PHP ou des includes SSI pour générer la page complète.
 
Cependant, dans certains cas, les frames peuvent être utiles : par exemple lorsqu'on veut avoir en permanance un *long* index à l'écran pour accéder à l'ensemble des pages.
 
A noter que les frames n'existent pas en XHTML 1.1, mais qu'elles sont prévues pour le futur XHTML 2.0 grâce aux XFrames. Les XFrames devraient régler un certains nombre de problèmes évoqués en dessus.
 
Voir également ce topic : pour réaliser des pseudo-frames sans passer par des <frame> ou <iframe> : http://forum.hardware.fr/forum2.php3?post=24692&cat=10
 
 
* Comment bien imprimer une page web ?
 
Lire tout d'abord cet article : http://pompage.net/pompe/impression/ (article original en anglais : http://www.alistapart.com/stories/goingtoprint/ )
 
L'idée est de créer une feuille de style spéciale pour l'imprimante et d'utiliser l'attribut "media" lors de l'inclusion du fichier .css dans le document HTML :
 

 
Ou alors dans la feuille de style elle-même avec la règle @media :
 

 
 
* Comment créer une fenêtre "pop-up" ?
 
http://www.webdeveloppeur.com/Tuto [...] netre.html
 
Lire également : http://www.accessify.com/tutorials [...] pop-up.asp
 
 
* Argh ! En HTML/XHTML strict il n'y a pas d'attribut target ! Comment est-ce que j'ouvre un lien dans une nouvelle fenêtre ?
 
Il faut passer par JavaScript. Voir ce topic : http://forum.hardware.fr/forum2.php3?post=26957&cat=10
 
Voir également cette autre méthode : http://www.sitepoint.com/article/1041/1
 
 
* Ma page est en HTML/XHTML strict mais j'ai une ligne blanche sous les images. Comment résoudre ce problème ?
 
En fait ce phénomène est tout à fait normal. Les images sont en fait considérées comme du texte (élément de type en-ligne ou inline) et elles sont donc alignées sur la ligne de base du texte. Si on utilise les images dans un tableau cette ligne blanche peut s'avérer gênante. Il faut donc afficher l'image comme un élément de type bloc :
 

 
Voir cet article pour plus d'informations sur le sujet : http://devedge.netscape.com/viewsource/2002/img-table/

* Quel sont les équivalent CSS de cellpadding et cellspacing ?
 
cellpadding et cellspacing sont encore autorisés dans les dernière versions du XHTML. Donc par souci de compatibilité avec les anciens navigateurs, on peut les garder.
 
Voici néanmoins les équivalents CSS de ces attributs HTML :
 
cellpading -> c'est la propriété classique padding qu'il faut l'utiliser. Il faut l'appliquer à une cellule (<td> ou <th> )
 
cellspacing -> son équivalent est border-spacing, à appliquer sur un élément <table>. Attention toutefois, Internet Explorer pour Windows ne supporte pas cette propriété. Il faut donc garder cellspacing.
 
 
Remarques
 
* S'il semble difficile de se séparer de cellspacing à cause d'IE, on peut en revanche oublier sans regret cellpadding. Il n'y a que des avantages à utiliser padding :
   - On a le choix de l'unité (px, pt, em...)
   - On peut appliquer un padding particulier à une cellule ou à un groupe de cellule (via les classes)
 
Une manière élégante de déclarer le padding par défaut pour les cellules d'un tableau pourrait être celle-ci :
 

 
Avec la CSS associée :
 

 
 
* Si on définit un espacement entre les cellules nul (cellspacing="0" ou border-spacing: 0 il bon de se pencher sur la propriété border-collapse. Cette propriété prend 2 valeurs :
   - separate : les bordures des cellules adjacentes sont collées les unes aux autres. Si par exemple les bordures des cellules ont une épaisseur de 2px, la largeur apparente des bordures entre les cellules sera de 4px.
   - collapse : les bordures des cellules adjacentes sont fusionnés. Autrement dit l'épaisseur apparente sera toujours de 2px (si on reprend l'exemple précédent).

* Le validateur indique une erreur sur les liens qui comportent des '&'. Que faire ?
 
Pour les URL de ce style : http://mon.site.com/index.php?coin=0&plop=1 le validateur détecte une erreur de ce style :
 
Line 15, column 28:  general entity "plop" not defined and no default entity
 
Il faut pour corriger cela remplacer le & par son entité HTML : & amp;
 
(sans l'espace, car le forum interprète les entités HTML)

 
je l'ai également remis dans la liste des liens utiles

Voilà chef !
 
En fait la coquille était plus grosse que ça, le "et de ses stantards" n'avait même pas à être là

Hop ! mise à jour avec le topic sur l'ouverture d'une fenêtre en HMTL strict.
 
 
Bon personne n'a de liens à proposer ? Ne me dites pas que j'ai écumé tout Internet !?

Ben j'ai donné le lien http://pixels.pixelpark.com/~koch/ [...] _browsers/ plus haut et qui va beaucoup plus loin

Quelques liens supplémentaires :
 
Sites généraux
http://webstandards.org/learn/faq/faq_fr.html [fr] (une bonne FAQ pour bien commencer et savoir de quoi on parle)
 
CSS
http://mammouthland.free.fr/cours/css/ [fr] (comme son nom l'indique)
http://www.scolagora.com/EcoleFour [...] mestre.asp [fr] (tutoriels intéressants autour du positionnement et du modèle de boîtes)
 
Sites d'information autour des langages du Web / Sites d'évangélisation
http://pompage.net/ [fr] (traductions de A List Apart)
http://mozilla-evangelism.bclary.com/
 
Accessibilité
http://www.aful.org/gdt/interop/in [...] essibility  [fr]
http://www.w3.org/WAI/
 
Weblog
http://www.nitot.com/standards/intro/ [fr]

* Comment centrer horizontalement un tableau ?
 
Il y a plusieurs méthodes, mais aucune ne marche avec tous les navigateurs.
 
  1. Avec margin: auto;
   
   

  Compatibilité : IE-Win 6, Opera 6, Mozilla (sans-doute IE-Mac 5, à vérifier)
   
  2. Avec text-align: center;
   
  Il faut placer le tableau dans un <div> qui a les propriétés suivantes :
 

  Compatibilité : Netscape 4, IE-Win 5/6
   
  Attention ! text-align: center; n'est pas une méthode conforme aux normes pour centrer un tableau. text-align ne doit normalement centrer que le texte. En conséquence le texte qui se trouve dans le <div> sera centré
   
  3. Avec text-align: center et inline-table
   
  On peut faire en sorte que le tableau se comporte comme du texte avec la propriété display: inline-table. Dans ce cas, text-align: center; a un sens sur le centrage d'un tableau.
 

  Compatibilité : Opera 6
  (le tableau est centré avec Netscape 4 et IE-Win 5-6 mais c'est à cause du 2.)
   
  4. Avec le positionnement absolu
   
  Admettons qu'on veuille centrer un tableau de 500 pixels de large :
 

  Compatibilité: : IE-Win 5/6, Opera 6, Mozilla (sans-doute IE-Mac 5, à vérifier)
 
Note : cette méthode fonctionne aussi pour positionner un bloc verticalement. Voir http://www.wpdfd.com/editorial/wpd0103.htm#toptip

Tiens au fait, juste pour mentionner en passant l'existence d'un chouette browser basé sur Gecko (le moteur html/css le plus "aux normes" actuellement) tout comme Moz & NS7 :
 
http://mozilla.org/projects/phoeni [...] notes.html
 
En fait il s'agit d'une version "light" des autres browsers, donc sans tous les bidules genre Java, AIM etc.
 
Je l'aime déjà

Au fait, un truc dans la FAQ :
 
<br /> marche mieux que <br/> et est tout aussi valide

W3C Compliant a écrit a écrit : Au fait, un truc dans la FAQ :   <br /> marche mieux que <br/> et est tout aussi valide

Merci. Corrigé. Et j'ai mis ton lien sur Phoenix, avec d'autres navigateurs.

W3C Compliant a écrit a écrit : Au fait, un truc dans la FAQ :   <br /> marche mieux que <br/> et est tout aussi valide

hu ? marche mieux, c'est a dire ?

NN4

opera supporte pas la dom completement ?
je veux juste faire un document.getElementById('toto'.style.display='none'; et ca passe pas
 
Edit: supaire :

http://www.opera.com/support/searc [...] ?index=581

Hop, je rajoute ce lien http://www.stopdesign.com/wired/docs/ qui explique toute la démarche qui a conduit le site wired.com à utiliser les standards (XHTML/CSS) lors du récent restylage.
 
J'encourage tout le monde à lire cet article car outre les arguments habituels en faveurs de l'utilisation des normes, une large partie est dédiée à la mise en place concrète de celles-ci (architecture du site, des feuilles de styles, méthodes utilisées pour l'accessiblité...)
 
Wired a fait preuve là d'une grande transparence, c'est suffisament rare pour être signalé.
 
Une vraie référence AMHA.

Bientôt je vais faire pareil sur mon site (qui est consacré à tout sauf au net, au html ou autre) : une page qui détaille les efforts consentis, l'architecture du site (CGI/SSI/XHTML/CSS) et les motivations (surtout que j'ai malheureusement une anecdote assez désagréable...).
 
Enfin bon, chuis pas sorti de l'auberge, j'ai quasi terminé le design, déjà pas mal de contenu dispo, mais faut que je refasse tout le moteur de recherche... mon Perl est un peu rouillé  

http://w3blacklist.tuxfamily.org/

Cool on va pouvoir faire de la délation  
 
 
 
 
 
Nan sans blague c un peu abuser de faire une "black list" comme ça... pas vraiment constructif...

pq pas constructif ?

[mode=balance]
De toute façon pour tous les commentaires, c'est un lien donné par Zion
[/mode]

W3C Compliant a écrit a écrit : Cool on va pouvoir faire de la délation     Nan sans blague c un peu abuser de faire une "black list" comme ça... pas vraiment constructif...

Bof, de telles initiatives existent déjà sur bugzilla.mozilla.org (il un bug pour le site de la Société Générale, et il y en avait un pour le site de Renault ; il y en a sans doute d'autres pour des sites francophones).
 
Il y aussi l'AFUL (Association Francophone des Utilisateurs de Linux et des logiciels libres) qui a un groupe de travail chargé de prévenir les sites (institutionnels) qui passent mal avec certains navigateurs : http://www.aful.org/gdt/interop/index.html
 
En fait il faut voir quelles sont les actions entreprises lorsqu'un site est mis dans la "black list". Si c'est juste pour le mettre dans une liste c'est sûr ça sert pas à grand chose. Si en revanche il y a travail derrière pour prendre contact avec le webmaster, lui expliquer ce que sont les normes et tout les bazard, là ça devient constructif. Mais il n'y a pas trop d'infos sur le site

Allez 2 sites pour la soirée :
 
CSS
 - http://lorandw.free.fr/css/ [fr] (introduction aux CSS, pour débuter)
 
Accessibilité
 - http://www.useit.com/ (bon en fait je l'avais posté il y a quelques jours)

superstar

--greg-- a écrit a écrit : superstar

 
+1    
 
 

Yeah cool

http://amigaphil.planetinternet.be/Welcome.html

Moui, bof, il est pas tout jeune ce site

bah c'était pour ta liste, pour si tu le connaissais pas

 
aussi  

euh
j'ai un ou des <div id="page">
blablbal</div>
 
et dans mon css
#page {
page-break-after: always;
}
 
... y'a pas moyen d'éviter qu'il ne sorte une page blanche
apres le dernier div...?

page-break-before ?

ben pareil, il va me sortir une page blanche avant les autres alors

Mais ils sont disposés comment tes <div> ?

http://www.cl.cam.ac.uk/users/dlg10/

ben celui dont on parle... euh les uns en dessous des autres...
<div class="page">
plein de trucs...
</div>
<div class="page">
plein de trucs...
</div>
<div class="page">
plein de trucs...
</div>
comme ça
 
bon, on s'excite pas, de toutes façons, c la mega merde avec le truc qui me servait à generer ces trucs, donc, je vais me rabbatre sur un vieux document qui pue, et basta
et une journée de perdue, une.