XHTML

Version imprimable

10/09/2003, 23h25
Community Management

Contribuez à la FAQ HTML/DHTML/XHTML

Salut à tous,

La FAQ (X)HTML est actuellement en ligne avec plus de 60 questions/réponses et en évolution constante.

Vous pouvez la consulter avant de poser une question sur le forum. De plus, pour faciliter vos investigations, un moteur de recherche y a été intégré.

Toutefois nous pouvons la faire grandir avec votre collaboration. En effet, pour participer à son évolution, vous pouvez poster dans le forum Contribuez toutes les questions/réponses qui vous semblent pertinentes.

Merci de mettre les Q/R sous ce format :

Citation:

Question ? (Version: XXX)

Réponse à la question

Code:

agrémentée d'un bout de code le cas échéant

:merci: pour votre future participation :wink:
18/08/2004, 11h36
davidc2

Est-ce vraiment le bon DOCTYPE ?
Il s'agit de compléter la doc sur le choix d'un DOCTYPE pour XHTML ou HTML. En espérant que ces précision saillent rejoindre les documents déjà présents. Cet article concerne ceux qui utilisent XHTML histoire d'avoir du HTML propre et moderne.
(ceux qui font du vrai xml y trouveront des informations intéressantes mais ne sont pas directement concernés.)

Une question fréquente est de savoir quel DOCTYPE mettre.
Et heureusement on trouve de plus en plus de doc à ce sujet.

Malheureusement (et malgré moi) je me suis retrouvé contraint de pousser les recherches un peu plus loin. Les choses ne sont pas si simples qu'elles le semblent.

Si vous voulez faire du XHTML, vous allez fier de vous débuter le document par:
Code:

1 2 3 4 5 <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="fr" xml:lang="fr">
( XHTML n'étant pas du html mais du xml, il lui faut la première ligne si vous utilisez un encodage ISO et non UTF. C'est notre cas à nous les francophones, d'où la présence de cette première ligne. De même pour le dédoublement de la langue "fr". Qu'importe, tel n'est pas notre sujet.)

Et là vous êtes fier mais le problème est que la pesque totalité des navigateurs ne passeront PAS en mode XHTML !!!
(mais qu'est-ce qu'il nous dit ???)

Et oui... d'après la norme du W3C, le type MIME d'un document Xhtml doit être application/xhtml+xml au lieu de text/html

c'est un détail ? Oui mais un détail qui change tout...
on retrouve parfois cela dans une balise META:
Code:

1 2 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
vous voyez ce petit text/html ?
(il est d'ailleurs souvent envoyé d'office par le serveur donc on ne joue pas dessus si facilement)
c'est lui le fautif !

à cause de cela le navigateur va passer dans son "quirk mode" c'est à dire qu'il va considérer que vous ne suivez aucune norme (ça valait le coup de mettre un DOCTYPE) et va essayer d'interpréter votre code comme un vieux html fin 80, début années 90

et cela est dommage parce que vos belles balises <br />
fermantes deviennt des attributs étranges et inconnus.
( < /> c'est pas permis en html)

donc l'effort de faire du propre tombe à l'eau.

Les optimistes diront, ok, qu'à ne cela ne tienne, envoyons le bon type mime au navigateur, allez une ligne php et c'est réglé:
Code:

1 2 <?PHP header('Content-Type: application/xhtml+xml; charset=ISO-8859-1') ?>
Essayez pour voir... les utilisateurs Internet Explorer (IE6) ne pourront plus consulter le site !!!! (et MacOS plantera carrément). Certes les autres navigateurs commuteront comme il faut en XHTML, mais bon...
se priver des nombreux utilisateur de IE, c'est pas malin !

Alors, pas le choix, il FAUT rester en text/html

mais là, le W3C est clair dans sa norme:
XHTML 1.1 exige le type mime application/xhtml+xml (text/html interdit)

et si XHTML 1.0 pourrait accepter text/html, cela est très fortement déconseillé et banni par cette même norme. Motif ayant poussé les navigateurs à ne pas en tenir compte ! (sauf 1 ou deux très rares, mais aucun des connus, pas même Opera ou Mozilla qui restent en vieux HTML comme on l'a dit)

(NB: le CSS peut en pâtir car les dimensions des boîtes ne sont plus calculées pareil non plus dans ce cas de figure. )

Bilan ? Seule façon de respecter les normes du W3C, d'en profiter dans les navigateurs et d'écrire un code propre:
c'est de rester en HTML 4.01 strict
(du moins dans le doctype)

Bien sûr, en ayant écrit quand même du XHTML pour être prêt pour plus tard (un jour, IE acceptera le XHTML)...

on n'aura plus qu'à convertir les <br> en <br />
et idem pour les img et hr

on peut déjà même en html écrire les balises en minuscules, les attributs entre guillemets, etc.

Mais à l'heure actuelle, le seul DOCTYPE utilisable à grande échelle est le bon vieux html (100% de réussite, bien sûr on laisse le type mime habituel text/html)

En espérant avoir apporté une contribution utile.
Mes sources:

http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html

un fou a même eu l'amabilité et le courage de tout tester (tous OS, tous navigateurs, tous doctype)

http://www.w3.org/People/mimasa/test...-types/results

Salut,

La même question posée 2 fois en 7 jours. C'est un peu un mélange entre CSS et Javascript. Il faudrait peut-être la mettre dans les 2 FAQ.

Q : Comment surligner toute une ligne de tableau en la survolant

R : En utilisant 2 classes différentes et en basculant d'une classe à l'autre avec un peu de Javascript puisque IE ne reconnait le pseudo-code :hover QUE sur les balises <a>
Code:

1 2 3 4 5 6 7 8 9 10 <table border="1"> <tr class="trnormal" onMouseOver="this.className='trhover';" onMouseOut="this.className='trnormal';"> <td>aaaaaaa</td> <td>bbbbbbb</td> </tr> <tr class="trnormal" onMouseOver="this.className='trhover';" onMouseOut="this.className='trnormal';"> <td>ccccccc</td> <td>ddddddd</td> </tr> </table>
Avec le code CSS :
Code:

1 2 3 4 5 6 7 8 .trnormal { background-color: #fff; color: #000; } .trhover { background-color: #000; color: #fff; }
De plus, si on veut que la ligne réagisse comme un lien, il suffit d'ajouter

Code:

onclick="location.href='page1.html';"

dans les balises <tr> et de modifier le CSS pour ajouter la petite main :
Code:

1 2 3 4 5 6 7 8 9 10 .trnormal { background-color: #fff; color: #000; cursor: default; } .trhover { background-color: #000; color: #fff; cursor: pointer; }
:wink:

Testé sous IE6-SP1 et FF 1.0.4, sous W2K Pro - SP4

14/09/2005, 22h42
elraton

CSS different pour IE et Gecko (firefox)
Trop bien le truk du menu :

Tout d'abord un petit hack CSS tres important qui permer de corriger les bug de IE.
Code:

1 2 3 padding-left:18px; /** Code interpreter par FF et IE **/ _padding-left:14px; /** Code interpreter uniquement par IE **/
Et voila comment faire pour avoir des propriété differentes entre IE et FF, sans se prendre la tete avec du java ou du php
03/08/2006, 11h53
Maxoo
Question qui devrait être dans la FAQ HTML, même si le code n'est quasiement que du javascript. Parce que hier je cherchais ce bout de code, et déja je ne le trouve pas dans la FAQ HTML, alors je vais dans la FAQ javascript, car je sais que c'est en javascript que l'on peut faire cela, mais du coup il n'y avait pas le code HTML ( href="javascript: ) et du coup, j'ai chercher super longtemps avant de comprendre mon erreur ... sniff :cry:
Citation:
Question :
Comment aller à la page précédente, suivante ?

Réponse à la question :
En javascript, il y a l'objet history qui permet de gérer l'historique du navigateur.

Pour aller à la page précédente, il faut faire un lien du type :
(deux solutions)

Code:

1 2 <a href="javascript:history.back();">précédente</a> <a href="javascript:history.go(-1);">précédente</a>

Pour aller la page suivante, il faut faire un lien du type :

Code:

<a href="javascript:history.next();">suivante</a>
j'ai mis la FAQ comme au format demandé dans le forum PHP.
31/10/2006, 17h17
denisC

Pour les cadres sur les liens :

http://www.developpez.net/forums/sho...49#post1476349
02/12/2006, 11h01
Bisûnûrs

Q : Comment faire passer un div au-dessus d'une balise object ?

R : En rajoutant cette ligne dans la balise <object> :

Code:

<param name="wmode" value="opaque" />

Q : Comment rendre le fond de mon animation flash transparent ?

R : En rajoutant cette ligne dans la balise <object> :

Code:

<param name="wmode" value="transparent" />

NB : Ne fonctionne qu'à partir de la version 6 de Flash PLayer. Les utilisateurs qui ont une version inférieure verront un fond opaque.
03/12/2006, 13h54
Maxoo

Citation:

Envoyé par Bisûnûrs

Comment rendre le fond de mon animation flash transparent ?
NB : Ne fonctionne qu'à partir de la version 6 de Flash PLayer. Les utilisateurs qui ont une version inférieure verront un fond opaque.

Qu'entends tu par le fond ?

Ca rend le fond d'un animation transparente, quelque soit l'animation ?
03/12/2006, 14h10
Bisûnûrs

Citation:

Envoyé par Maxoo

Qu'entends tu par le fond ?

La couleur de fond définie dans ton document flash.

En effet, quand tu créés une animation flash tu es obligé de définir une couleur de fond (blanc par défaut). Sans cette balise, si tu mets ton animation sur un fond rouge, tu auras le fond de ton animation blanc. Avec cette balise, le fond blanc sera devenu transparent et laissera apparaître le rouge derrière.

Citation:

Envoyé par Maxoo

Ca rend le fond d'un animation transparente, quelque soit l'animation ?

Oui.
12/12/2006, 15h43
Christophe P.
Comment ne pas mettre ma page HTML dans le cache ?

Il semble que pragma ne fonctionne pas correctement avec tous les navigateurs, les lignes suivantes semblent fonctionner :
Code:

1 2 3 <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache,no-store"> <meta http-equiv="expires" content="0">
Utilité de la suivante ?

Code:

<meta http-equiv="cache" content="no store">
04/02/2007, 15h52
Linaa

Citation:

Envoyé par FremyCompany

Comment rendre un élément inselectionnable (HTML+JS+CSS) ?

1) Sur IE :

Code:

<obj onselectstart="return false;" />

2) Sur Mozilla :

Code:

<obj style="-moz-user-select: none" />

3) Sur certains autres navigateurs

Code:

<obj unselectable="on" />

4) Ce code marche sur FF, dans une moindre mesure, mais est beaucoup moins propre :

Code:

<obj onmousedown="return false;" >

Ce qui donne :

Code:

<obj unselectable="on" onselectstart="return false;" style="-moz-user-select: none;" />
24/02/2007, 11h47
ANISSS

est comment puis je l'integrer dans ma page?
02/03/2007, 20h07
FremyCompany

Citation:

Envoyé par ANISSS

est comment puis je l'integrer dans ma page?

Tu parles de quel script ?

Si c'est du miens tu copies les attributs et tu les places sur la balise de ton choix, body pour que cela porte sur le document entier...

Exemple :

Code:

<body unselectable="on" onselectstart="return false;" style="-moz-user-select: none;" onmousedown="event.stopPropagation(); e.preventDefault(); return false;">Vous ne pourrez pas sélectionnez ce texte, quelque soit le navigateur</body>

erreur

Son :

Code:

1
2
3
4
5
6
<object type="audio/mpeg" data="monfichier.mp3" height="0" width="0">
   <param name="filename" value="monfichier.mp3" />
   <param name="autostart" value="true" />
   <param name="loop" value="true" />
   Texte alternatif
</object>

Il y a une error dans le code de Bisûnûrs.
object type="audio/mpeg"
doit être
object type="audio/mp3"

Bonjour,
il y a quelques erreurs et imprécisions dans certaine réponses.

Mes proposition:

Citation:

Déclarer un doctype qui ne déclenche pas le mode Quirks permet de:

* valider son document avec les validateurs (x)HTML et leur indiquer
à quelles règles d'écriture le document doit obéir en l'informant de la version de (x)HTML que vous utilisez.

* déclencher tel ou tel mode de rendu (Quirks, Standard ou
Almost standard) selon le Doctype choisi sur les navigateurs modernes.

* assurer une plus grande cohérence d'affichage d'un navigateur à
l'autre grâce à un comportement plus conforme aux spécifications (x)HTML en vigueur.
Citation:
Comment centrer horizontalement n'importe quel élément en CSS ?

On peut le faire en CSS grâce au code présenté ci-dessous
Corps de la page (X)HTML
Code:

1 2 3 <body> <div class="centrer">Mon bloc centré horizontalement</div> </body>
Et le code CSS utile au positionnement
Code:

1 2 3 4 5 6 7 8 9 10 11 12 body { margin : 0; padding : 0; text-align: center; /* pour centrer le bloc enfant dans les anciennes version d'IE et en mode Quirks*/ } .centrer { margin: 0 auto; width : 400px; text-align : left; /* pour récupérer l'alignement par default*/ }
Note : Il faut obligatoirement spécifier une largeur width au bloc à centrer.
Citation:

Comment décaler un objet vers la droite, sans pour autant le centrer ?

Note : Les marges latérales peuvent être appliquées à n'importe quel élément et les marge verticales au éléments de niveau bloc et aux élément en-ligne remplacés.

Citation:

Comment éviter dans une page le retour à la ligne d'une phrase ?

Code:

p {white-space: nowrap;}

Je pense à priori que l'ancien code date un peu : l'attribut nowrap est déconseillé et le nobr ne fait pas partir des spéc.