Publicité
Discussion fermée Actualité déjà publiée
Affichage des résultats 1 à 15 sur 15
  1. #1
    Responsable Développement Web

    Avatar de Bovino
    Homme Profil pro Didier Mouronval
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    21 255
    Détails du profil
    Informations personnelles :
    Nom : Homme Didier Mouronval
    Âge : 43
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 21 255
    Points : 83 110
    Points
    83 110

    Par défaut 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 :

    Question ? (Version: XXX)

    Réponse à la question

    Code :
    agrémentée d'un bout de code le cas échéant
    pour votre future participation
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum
      0  0

  2. #2
    Invité de passage
    Inscrit en
    février 2004
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : février 2004
    Messages : 3
    Points : 3
    Points
    3

    Par défaut 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
      0  0

  3. #3
    Membre actif Avatar de Ricou13
    Inscrit en
    août 2002
    Messages
    292
    Détails du profil
    Informations forums :
    Inscription : août 2002
    Messages : 292
    Points : 175
    Points
    175

    Par défaut

    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;
    	}


    Testé sous IE6-SP1 et FF 1.0.4, sous W2K Pro - SP4
    il ne faut pas de tout pour faire un monde. Il faut du bonheur et rien d'autre. Paul Eluard
    Des fois ça malche, des fois ça malche pas. Garcimore
      0  0

  4. #4
    Membre habitué
    Inscrit en
    juin 2003
    Messages
    223
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : juin 2003
    Messages : 223
    Points : 108
    Points
    108

    Par défaut 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
      0  0

  5. #5
    Expert Confirmé Avatar de Maxoo
    Profil pro Maxime Pasquier
    Expert PHP
    Inscrit en
    novembre 2004
    Messages
    2 123
    Détails du profil
    Informations personnelles :
    Nom : Maxime Pasquier
    Âge : 30
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Expert PHP
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2004
    Messages : 2 123
    Points : 2 704
    Points
    2 704

    Par défaut

    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

    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.
    Pour une bien meilleur lisibilité, utilisez la balise [code], c'est le [#] dans votre éditeur.
    Mon espace Développez : mes Créations.


    Rencontre & Carte des Membres de Developpez.com, version 3.0
      0  0

  6. #6
    Expert Confirmé Sénior
    Avatar de denisC
    Profil pro
    Développeur Java
    Inscrit en
    février 2005
    Messages
    4 081
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Java
    Secteur : Service public

    Informations forums :
    Inscription : février 2005
    Messages : 4 081
    Points : 7 727
    Points
    7 727
      0  0

  7. #7
    Modérateur
    Avatar de Bisûnûrs
    Profil pro Josselin
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 404
    Détails du profil
    Informations personnelles :
    Nom : Josselin
    Âge : 30
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 404
    Points : 14 906
    Points
    14 906

    Par défaut

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

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

    Code HTML :
    <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 HTML :
    <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.
      0  0

  8. #8
    Expert Confirmé Avatar de Maxoo
    Profil pro Maxime Pasquier
    Expert PHP
    Inscrit en
    novembre 2004
    Messages
    2 123
    Détails du profil
    Informations personnelles :
    Nom : Maxime Pasquier
    Âge : 30
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Expert PHP
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : novembre 2004
    Messages : 2 123
    Points : 2 704
    Points
    2 704

    Par défaut

    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 ?
    Pour une bien meilleur lisibilité, utilisez la balise [code], c'est le [#] dans votre éditeur.
    Mon espace Développez : mes Créations.


    Rencontre & Carte des Membres de Developpez.com, version 3.0
      0  0

  9. #9
    Modérateur
    Avatar de Bisûnûrs
    Profil pro Josselin
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 404
    Détails du profil
    Informations personnelles :
    Nom : Josselin
    Âge : 30
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 404
    Points : 14 906
    Points
    14 906

    Par défaut

    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.
      0  0

  10. #10
    Membre habitué
    Inscrit en
    avril 2003
    Messages
    255
    Détails du profil
    Informations forums :
    Inscription : avril 2003
    Messages : 255
    Points : 120
    Points
    120

    Par défaut

    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">
    Christophe
      0  0

  11. #11
    Membre Expert Avatar de Linaa
    Profil pro
    Inscrit en
    avril 2005
    Messages
    987
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2005
    Messages : 987
    Points : 1 191
    Points
    1 191

    Par défaut

    Citation Envoyé par FremyCompany

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

    1) Sur IE :
    Code HTML :
    <obj onselectstart="return false;" />
    2) Sur Mozilla :
    Code HTML :
    <obj style="-moz-user-select: none" />
    3) Sur certains autres navigateurs
    Code HTML :
    <obj unselectable="on" />
    4) Ce code marche sur FF, dans une moindre mesure, mais est beaucoup moins propre :
    Code HTML :
    <obj onmousedown="return false;" >

    Ce qui donne :
    Code HTML :
    <obj unselectable="on" onselectstart="return false;" style="-moz-user-select: none;" />
      0  0

  12. #12
    Candidat au titre de Membre du Club
    Inscrit en
    janvier 2006
    Messages
    109
    Détails du profil
    Informations forums :
    Inscription : janvier 2006
    Messages : 109
    Points : 11
    Points
    11

    Par défaut

    est comment puis je l'integrer dans ma page?
      0  0

  13. #13
    Expert Confirmé
    Avatar de FremyCompany
    Étudiant
    Inscrit en
    février 2006
    Messages
    2 532
    Détails du profil
    Informations personnelles :
    Âge : 22

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : février 2006
    Messages : 2 532
    Points : 3 026
    Points
    3 026

    Par défaut

    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>
    Fremy
    Pour vos développements Web et une navigation agréable, le tout gratuit :
    1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !)
    2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
      0  0

  14. #14
    Invité de passage
    Inscrit en
    octobre 2006
    Messages
    27
    Détails du profil
    Informations forums :
    Inscription : octobre 2006
    Messages : 27
    Points : 3
    Points
    3

    Par défaut erreur

    Son :
    Code HTML :
    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"
      0  0

  15. #15
    Membre Expert Avatar de Erwan31
    Inscrit en
    février 2008
    Messages
    2 140
    Détails du profil
    Informations forums :
    Inscription : février 2008
    Messages : 2 140
    Points : 2 058
    Points
    2 058

    Par défaut

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

    Mes proposition:

    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.
    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.
    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.
    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.
      0  0

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •