[XHTML] Remplacer des <table> par des ...

Remplacer des <table> par des ... [XHTML] - HTML/CSS - Programmation

Marsh Posté le 11-07-2006 à 17:34:01    

http://www.bci-logs.fr/medias/cadre/cadre.htm
 
=> Tout est dans l'url.
 
J'ai un joli truc tout pourrave qui marche bien avec un tableau.
Je veux pareil, mais sans tableau, puisqu'il parait qu'on peut faire (mais moi j'y arrive jamais :o)

Reply

Marsh Posté le 11-07-2006 à 17:34:01   

Reply

Marsh Posté le 11-07-2006 à 17:38:46    

Reply

Marsh Posté le 11-07-2006 à 17:39:01    

http://openweb.eu.org/articles/initiation_flux/
tu mets ton beau menu dans un div et voila
pour reproduire exactement le comportement du cadre (c est a dire que ton menu ne bouge pas avec le reste de la frame page) il faudrait par contre qu ie comprenne l attribut fixed  
je sais pas si c est en cours de projet sur ie7 (je l ai toujours pas dl d ailleurs :P)
 
edit
http://forum.hardware.fr/hardwaref [...] 7190-1.htm
et bien oui le bug est corrigé donc tout est nickel

Message cité 1 fois
Message édité par mIRROR le 11-07-2006 à 17:41:49
Reply

Marsh Posté le 11-07-2006 à 17:42:49    


celui-là ne vas pas. je dois être extensible en hauteur et en largeur. deplus, les bords (pas les coins, les bords) sont impactés aussi par un fond (à cause de la transparence, j'utilise du png32)
 
(le but, c'est de faire un template incluable dans une page, et de taille différente selon là où c'est mis)


Message édité par Arjuna le 11-07-2006 à 17:46:32
Reply

Marsh Posté le 11-07-2006 à 17:45:39    

mIRROR a écrit :

http://openweb.eu.org/articles/initiation_flux/
tu mets ton beau menu dans un div et voila
pour reproduire exactement le comportement du cadre (c est a dire que ton menu ne bouge pas avec le reste de la frame page) il faudrait par contre qu ie comprenne l attribut fixed  
je sais pas si c est en cours de projet sur ie7 (je l ai toujours pas dl d ailleurs :P)
 
edit
http://forum.hardware.fr/hardwaref [...] 7190-1.htm
et bien oui le bug est corrigé donc tout est nickel


je suis sous IE7, mais hors de question d'utiliser des spécificités de l'un ou l'autre des navigateurs.
 
si je veux faire un truc au standard xhtml, c'est pas pour foutre du proprio toutes les deux lignes afin de reproduire correctement un truc faisant en utilisant un plus ancien standard.
 
bref, si y'a pas moyen de faire "proprement", je vais garder ce que j'ai fais. après tout, ça marche, c'est simple, et ça passe au validateur xhtml...

Reply

Marsh Posté le 11-07-2006 à 17:48:31    

Pour le PNG, je n'ai (malheureusement) jamais trouvé de moyen de les faire passer sur IE s'ils sont placés en background (CSS).


---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine
Reply

Marsh Posté le 11-07-2006 à 17:50:51    

euh position:fixed;
c est du css
donc tout le monde devrait comprendre sauf ie
ce qui est corrigé depuis la version 7
et pour ie < 7 le seul truc que ca fera c est que le menu se deplacera avec ta page si elle a un scroll

Reply

Marsh Posté le 11-07-2006 à 17:56:35    

j_lecruel a écrit :

Pour le PNG, je n'ai (malheureusement) jamais trouvé de moyen de les faire passer sur IE s'ils sont placés en background (CSS).


IE7 powa :D

Reply

Marsh Posté le 11-07-2006 à 17:57:28    

mIRROR a écrit :

euh position:fixed;
c est du css
donc tout le monde devrait comprendre sauf ie
ce qui est corrigé depuis la version 7
et pour ie < 7 le seul truc que ca fera c est que le menu se deplacera avec ta page si elle a un scroll


c'est quoi cette histoire de "fixed" ? moi je veux pas fixed mon truc, je veux faire un div avec de jolis contours, comme on peut faire en toute simplcité avec un tableau :o

Reply

Marsh Posté le 11-07-2006 à 18:04:54    

je disais ca juste pour reproduire exactement le comportement de la frame
si t as un scroll sur la page principale le menu restera toujours visible
et fixed c est juste un attribut ... pour ton div avec tous les contours que tu veux
lis l article que je t ai donné et apres tu pourras :o:o:o  a volonté
 
 
:o

Reply

Marsh Posté le 11-07-2006 à 18:04:54   

Reply

Marsh Posté le 11-07-2006 à 18:44:37    

mais pkoi vous me parlez de frame ? :o
 
j'ai pas de frame ;)
 
j'ai juste un tableau, avec des image tout autour de façon à ce qu'il soit "joliement" détouré avec un effet d'ombrage.
 
pour le reste, la page est on ne peut plus normale...

Reply

Marsh Posté le 11-07-2006 à 18:45:52    

et sinon, ton article ne marche pas dans mon cas : ils ne font que des tableaux de largeur fixe, ou des tableaux de largeur/hauteur variable, mais sans bordures "haut / bas / droite / gauche" (seulement des coins)

Reply

Marsh Posté le 11-07-2006 à 18:47:36    

t as dit "tout est dans l url"
j ai pas regardé le code et j ai pensé que tu etais en frames stou :D
 
par contre le "joliment" du biseau trois clics bof :P

Reply

Marsh Posté le 11-07-2006 à 20:31:02    

d'où les " :p
 
moi je suis développeur.
là je m'écrit une lib réutilisable et personnalisable pour mettre de jolies images à la place de mes trucs tout caca ;)

Reply

Marsh Posté le 11-07-2006 à 20:34:15    

Voilà la version "XHTML" que j'ai pondu.
 
Ca marche parfaitement sous Mozilla, en utilisant la propriété "display" du CSS pour simuler un tableau, mais sous IE... Du moins le 7... C'est, comment dire... Raté.
 
http://magicsite.manga-torii.com/cadre/cadre.htm
 
(je suis en train d'essayer de me dépatouiller pour activer le site... pour le moment il était hébergé sur mon vista béta 2, mais y'a une c**** dans le potage, et du coup ça marche pas -répond au ping, mais ne veut pas répondre sur le port 80-. j'en suis à tenter de remettre en était mon 2k3 serveur, c'est pas gagné, surtout avec les 200 Mo de patchs à dwl depuis que je l'ai éteinds -il était en pré-retraite, faut dire qu'il a un peu 5 ans mon serveur... :D-)

Reply

Marsh Posté le 11-07-2006 à 20:40:15    

pourquoi un display en tableau ?
sinon balance ton code on se debrouillera sans le site ;)

Reply

Marsh Posté le 11-07-2006 à 20:40:33    

Tu peux me dire si tu peux accéder à la page là ?

Reply

Marsh Posté le 11-07-2006 à 20:41:23    

mIRROR a écrit :

sinon balance ton code on se debrouillera sans le site ;)


 
tu l'auras voulu  [:anathema]  
 

Code :
  1. <html>
  2. <head>
  3.  <title>Cadre</title>
  4.  <style rel="stylesheet" type="text/css">
  5.   div.cadre
  6.   {
  7.    width: 150px;
  8.    display: table;
  9.   }
  10.   div.haut
  11.   {
  12.    height: 5px;
  13.    width: 100%;
  14.    display: table-row;
  15.   }
  16.   div.haut-gauche
  17.   {
  18.    display: table-cell;
  19.    width: 8px;
  20.    height: 5px;
  21.    background-image: url('medias/cadre/ul.png');
  22.   }
  23.   div.haut-milieu
  24.   {
  25.    display: table-cell;
  26.    height: 5px;
  27.    background-image: url('medias/cadre/u.png');
  28.   }
  29.   div.haut-droite
  30.   {
  31.    display: table-cell;
  32.    width: 10px;
  33.    height: 5px;
  34.    background-image: url('medias/cadre/ur.png');
  35.   }
  36.   div.centre
  37.   {
  38.    display: table-row;
  39.   }
  40.   div.centre-gauche
  41.   {
  42.    display: table-cell;
  43.    width: 8px;
  44.    background-image: url('medias/cadre/l.png');
  45.   }
  46.   div.centre-milieu
  47.   {
  48.    display: table-cell;
  49.    padding: 10px;
  50.    background-color: #f1f1f1;
  51.   }
  52.   div.centre-droite
  53.   {
  54.    display: table-cell;
  55.    width: 10px;
  56.    background-image: url('medias/cadre/r.png');
  57.   }
  58.   div.bas
  59.   {
  60.    height: 10px;
  61.    display: table-row;
  62.   }
  63.   div.bas-gauche
  64.   {
  65.    display: table-cell;
  66.    width: 8px;
  67.    height: 10px;
  68.    background-image: url('medias/cadre/bl.png');
  69.   }
  70.   div.bas-milieu
  71.   {
  72.    display: table-cell;
  73.    height: 10px;
  74.    background-image: url('medias/cadre/b.png');
  75.   }
  76.   div.bas-droite
  77.   {
  78.    display: table-cell;
  79.    width: 10px;
  80.    height: 10px;
  81.    background-image: url('medias/cadre/br.png');
  82.   }
  83.  </style>
  84. </head>
  85. <body>
  86.  <div class="cadre">
  87.   <div class="haut">
  88.    <div class="haut-gauche"></div>
  89.    <div class="haut-milieu"></div>
  90.    <div class="haut-droite"></div>
  91.   </div>
  92.   <div class="centre">
  93.    <div class="centre-gauche"></div>
  94.    <div class="centre-milieu">
  95.     Test de cadre<br/>
  96.     Test de cadre<br/>
  97.     Test de cadre<br/>
  98.     Test de cadre<br/>
  99.     Test de cadre<br/>
  100.     Test de cadress<br/>
  101.     Test de cadre<br/>
  102.     Test de cadre<br/>
  103.     Test de cadre<br/>
  104.     Test de cadre<br/>
  105.     Test de cadre<br/>
  106.     Test de cadre<br/>
  107.    </div>
  108.    <div class="centre-droite"></div>
  109.   </div>
  110.   <div class="bas">
  111.    <div class="bas-gauche"></div>
  112.    <div class="bas-milieu"></div>
  113.    <div class="bas-droite"></div>
  114.   </div>
  115.  </div>
  116. </body>
  117. </html>


Message édité par Arjuna le 11-07-2006 à 20:41:39
Reply

Marsh Posté le 11-07-2006 à 21:01:50    

ok a vue de nez sans les images c est pas evident mais bon
laisse tomber les display:table&co
je te montre vite fait l idee  
 
tu precises un width sur ton div.cadre
donc on va dire que la largeur est fixe sinon je te montrerai comment l elargir dans les deux dimansions
tu n as besoin que de trois images
 
le haut une d une hauteur de 1 ou deux pixels pour le fond du contenu et celle du bas

Code :
  1. <div id="mon_cadre">
  2.   <div id="haut_du_cadre>&nbsp;</div> //par principe on laisse pas un div vide  
  3.   <div id="milieu">mon texte bla bla of ze bla bla sans les couettes c est plus classe</div>
  4.   <div id="bas">&nbsp;</div>
  5. </div>


 
en css tu mets les backgrounds qui vont bien tralala
 

Reply

Marsh Posté le 11-07-2006 à 21:07:43    

nan, pas possible.
 
j'ai 8 images en tout :
 
4 coins
 
2 images de 1 px de large pour indiquer les bordures haut et bas
2 images de 1 px de haut pour indiquer les bordures droite et gauche
 
je ne dois pas être dépendant de la taille du cadre, ni en largeur, ni en hauteur (sinon ça fait longtemps que ce serait torché... je suis nul en CSS, mais pas à ce point ;)

Reply

Marsh Posté le 11-07-2006 à 21:08:10    

voilà, mon lien de là-haut marche maintenant
 
comme un con je m'étais planté d'ip sur mon routeur pour l'ouverture du port 80 :D

Reply

Marsh Posté le 11-07-2006 à 21:24:41    

Arjuna a écrit :


Je veux pareil, mais sans tableau


C'est bien le problème actuel : on continue à rester ancré dans un visuel de tableau... mais sans tableau.
Il va bien falloir comprendre un jour que c'est tout un esprit à changer.
 
Si tu veux "faire du tableau", utilise les tableaux. C'est aussi simple que ça. Et profites-en pour te demander pourquoi tu voudrais t'en passer : par mode ou par réelle philosophie ?
Si un jour tu veux raisonner en éléments (titre, menu, illustration, etc.) et non en cellules et en cloisons, tu auras fait la moitié du travail ;)
 
Bonne chance :)


Message édité par sibelius le 11-07-2006 à 21:26:04

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 11-07-2006 à 21:39:09    

Moi on m'a dit, à juste titre, que les <table>, c'était d'un point de vue sémentique, pour afficher des donnés tabulaires.
Moi, je veux afficher une illustration, ce qui n'est en rien une donnée tablulaire.
Par contre, <div> permet de faire des divisions, généralement avec pour objectif de faire de la mise en page d'illustrations.
 
Donc d'un point de vue sémantique, le <table> ici n'a rien à faire.

Reply

Marsh Posté le 11-07-2006 à 21:39:12    

toujours aussi sage sibelius bonjour  :jap:  
 
mais bon je lui ai fait sa bidouille me casse pas mon effet  :P
 

Code :
  1. <html>
  2. <head>
  3.  <title>Cadre</title>
  4.  <style rel="stylesheet" type="text/css">
  5.   div.cadre
  6.   {
  7.    width: 150px;
  8.   }
  9.   div.haut
  10.   {
  11.    height: 5px;
  12.    line-height:5px;
  13.    width: 100%;
  14.    background: url('u.png') repeat-x;
  15.   }
  16.   div.haut-gauche
  17.   {
  18.    width: 8px;
  19.    height: 5px;
  20.    background-image: url('ul.png');
  21.    float: left;
  22.   }
  23.   div.haut-droite
  24.   {
  25.    width: 10px;
  26.    height: 5px;
  27.    background-image: url('ur.png');
  28.    float: right;
  29.   }
  30.   div.centre-milieu
  31.   {
  32.   padding:10px;
  33.   width: "100%";
  34.   }
  35.   div.centre-gauche {  background: url('l.png') repeat-y left;}
  36.   div.centre  { background-color: #f1f1f1; }
  37.   div.centre-droite {  background: url('r.png') repeat-y right; }
  38.   div.bas
  39.   {
  40.    height: 10px;
  41.    background: url('b.png') repeat-x;
  42.   }
  43.   div.bas-gauche
  44.   {
  45.    width: 8px;
  46.    height: 10px;
  47.    background-image: url('bl.png');
  48.    float: left;
  49.   }
  50.   div.bas-droite
  51.   {
  52.    width: 10px;
  53.    height: 10px;
  54.    background-image: url('br.png');
  55.    float: right;
  56.   }
  57.  </style>
  58. </head>
  59. <body>
  60.  <div class="cadre">
  61.   <div class="haut">
  62.    <div class="haut-gauche">&nbsp;</div>
  63.    <div class="haut-droite">&nbsp;</div>
  64.   </div>
  65.   <div class="centre">
  66.    <div class="centre-gauche"><div class="centre-droite">
  67.    <div class="centre-milieu">
  68.     Test de cadre<br/>
  69.     Test de cadre<br/>
  70.     Test de cadre<br/>
  71.     Test de cadre<br/>
  72.     Test de cadre<br/>
  73.     Test de cadress<br/>
  74.     Test de cadre<br/>
  75.     Test de cadre<br/>
  76.     Test de cadre<br/>
  77.     Test de cadre<br/>
  78.     Test de cadre<br/>
  79.     Test de cadre<br/></div>
  80.    </div></div>
  81.   </div>
  82.   <div class="bas">
  83.    <div class="bas-gauche">&nbsp;</div>
  84.    <div class="bas-droite">&nbsp;</div>
  85.   </div>
  86.  </div>
  87. </body>
  88. </html>

Reply

Marsh Posté le 11-07-2006 à 21:50:08    

Mouais.
 
Nan, je vais laisser tomber.
Déjà, sous IE7 ça marche pas bien (en bas ça déconne).
 
Mais surtout,j'utilise du PNG32, avec donc de la transparence (et surtout, des dégradés de transparence)
 
Du coup, ça chevauche dans les coins et c'est tout moche :/

Reply

Marsh Posté le 12-07-2006 à 01:49:57    

Voilà ce que ça donne (et donc ce que je voulais au départ, avec mon tableau)
 
http://magicsite.manga-torii.com

Reply

Marsh Posté le 12-07-2006 à 09:58:45    

Arjuna a écrit :

Donc d'un point de vue sémantique, le <table> ici n'a rien à faire.


Je n'ai pas dit le contraire :) C'est tout à fait exact.
Mais dans ce cas, autant faire la démarche jusqu'au bout et ne plus essayer de "faire des tableaux" sans tableaux.

Reply

Marsh Posté le 12-07-2006 à 10:46:14    

Je cherche pas à faire des tableaux sans tableau.
 
J'ai une charte graphique et je veux la respecter.
 
Le XHTML + CSS est censé n'avoir aucune régression par rapport au HTML 4, et pour cette raison, je dois m'attendre à pouvoir faire la même mise en page.
 
Hors là ça coince.
 
Je vais pas me mettre à dire à la créa "nan ça on peut pas faire" alors que jusqu'à présent on pouvait le faire... "appelle-moi con" qu'on va me répondre...

Reply

Marsh Posté le 12-07-2006 à 10:57:46    

Heuuuu par contre les scripts derrière, c'est de toi ? ...  
Parce qu'il y a un beau plantage ...
 
Crée un label .. [mettre à jour] ..  
Puis supprime-le ...
Reload la page du browser .. selon toute logique, il va te dire "la page bla bla bla contient des données envoyées par POST bla bla bla" ..
Si tu fais "ok" tu te chopes une belle exception:
"Exception Details: System.IndexOutOfRangeException: There is no row at position 0."
( accompagné évidemment d'un beau gros pavé genre "tiens prends ça dans les dents" ;) )

Message cité 1 fois
Message édité par Mr Mala le 12-07-2006 à 10:58:18
Reply

Marsh Posté le 12-07-2006 à 11:02:25    

Arjuna a écrit :

Le XHTML + CSS est censé n'avoir aucune régression par rapport au HTML 4


Aucune régression en effet... si ce n'est celle des navigateurs.
 
A ce propos, merci de ne pas faire l'amalgame classique "HTML = tableaux" / "XHTML = CSS" : les CSS s'accomodent très bien aussi avec HTML ;)
 
Bref, je ne voudrais pas paraître rude mais je vais te donner mon avis, à prendre ou à laisser mais il n'est pas volontairement prévu de te froisser :
1- les CSS existent depuis bien avant XHTML, mais les navigateurs (dont certains plus que d'autres), ont toujours été à la traîne de ce côté, et le sont encore (suivez mon regard)
2- pour cette raison, les tableaux ont toujours été employés pour faire des sites web. C'était plus facile à faire (surtout en Wysiwyg) et il était plus facile de prendre le média Web pour du média Print, figé... ce qu'il n'est pas
3- "passer de tableaux à CSS" n'est pas seulement changer la balise <table> contre une balise <div>, c'est (beaucoup) plus que ça. C'est surtout ce point qui a du mal à passer : c'est une autre vision à avoir, une autre appréhension du média Web, une autre façon de penser et surtout... un nouvel apprentissage ! Cet apprentissage ne vient pas tout seul, il prend du temps, et un Wysiwig n'est pas capable de penser "sémantique" et de savoir que le contenu de ce <td> est censé être un titre de niveau 1.
 
Bref, sans vouloir vexer personne, je me répète un peu : si ce n'est que par mode ou "parce qu'on m'a dit de changer", tu vas droit dans le mur car tu vas vouloir adapter une façon de penser obsolète (tableaux) à une méthode radicalement différente (sémantique) et qui sont difficilement compatibles.
 
Soit tu prends le temps d'apprendre vraiment comment réaliser un document sémantique (balises bloc/en-ligne, modes de positionnement en flux, hors-flux, modèles de boîtes, incompatibilités navigateurs, etc.), soit tu perdras énormement de temps... pour un résultat final qui va être complexe, incompréhensible, voire complètement raté et pour dire "les div c'est tout pourri, je reviens aux tableaux".


Message édité par sibelius le 12-07-2006 à 11:03:45

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 12-07-2006 à 11:35:50    

Mr Mala a écrit :

Heuuuu par contre les scripts derrière, c'est de toi ? ...  
Parce qu'il y a un beau plantage ...


Ouais, c'est normal, c'est en cours de développement ;)
Et là j'utilise un truc un peu très gore pour jouer avec les données dans la base, et c'est pas super au point, je suis à la recherche d'une meilleure technique ;)
 
Pour le moment, quand on est gentil avec ça plante pas, c'est déjà ça :D

Reply

Marsh Posté le 12-07-2006 à 11:58:43    

sibelius > tu ne m'apprends rien, je faisais du CSS que tu jouais encore avec ton caca :o
 
En fait, pour moi (et n'ose pas me dire le contraire avant de réfléchir ;))
HTML = aucune mise en forme sémantique du document. mise en page avec le code balisé, et quelques fioritures en CSS pour rendre le rendu plus clean.
XHTML = mise en forme des informations du document selon leur sémantique à l'aide du langage balisé. mise en page intégralement faite en CSS.
 
Par conséquent, je maintiens que le risque de régression est présent, indépendement du navigateur, puisque c'est tout la logique comme tu le dis si-bien qui a été changée.
 
Ensuite, une page HTML peut parfaitement passer au validateur XHTML (à quelques corrections près) sans resecter une seconde la norme XHTML. Suffit de voir le nombre de sites qui affichent des listes dans des divs, ou n'utilisent pas les balises Hx, c'est abérant de recevoir des leçons en retour. Je ne parle même pas de la majorité des gens qui ne connaissent pas les balises "dl", "dt" et "dd"...
 
Bref. Dans tous les cas, logique différente ou non, s'il n'y a pas de régression, alors TOUT ce qui était possible de faire en HTML, même de la façon la plus porcine doit être faisable en XHTML en suivant RIGOUREUSEMENT la norme (c'est à dire en respectant aussi la notion de sémantique).
 
Pour avoir ré-écrit 80% des templates de ce site : http://www.elysee.fr qui, au moment de sa mise en prod tout du moins, respectait l'intégralité des normes les plus stricts qui existent, y compris les considération d'accessibilité et cnie, ne m'apprends pas ce qu'est le XHTML, je pense en avoirfait suffisament.
 
Seulement, la mise en page de ce site est absolument pourrie par rapport à ce que faisait ma société de l'époque quand on utilisait des tableaux en DHTML.
Là, j'ai un besoin spécifique, et que je doive penser différement du HTML, je le sais bien, mais c'est pas mon problème. J'ai passé deux demies journées à tenter de le faire en XHTML, et pas moyen, alors qu'en HTML "classique", ça m'a pris 10 minutes (taper sur un clavier de portable, c'est pas rapide)
 
Bref, je suis toujours dans l'attente d'une soluce qui respecterait la norme XHTML dans son intégralité, même si actuellement je m'en sors en foutant à la poubelle la sémantique.

Message cité 1 fois
Message édité par Arjuna le 12-07-2006 à 12:03:32
Reply

Marsh Posté le 12-07-2006 à 12:36:37    

Arjuna a écrit :

sibelius > tu ne m'apprends rien, je faisais du CSS que tu jouais encore avec ton caca :o

Voilà qui est bien distingué. Mais tu as l'air si sûr de toi.
 
 

Arjuna a écrit :

En fait, pour moi (et n'ose pas me dire le contraire avant de réfléchir ;))
HTML = aucune mise en forme sémantique du document. mise en page avec le code balisé, et quelques fioritures en CSS pour rendre le rendu plus clean.
XHTML = mise en forme des informations du document selon leur sémantique à l'aide du langage balisé. mise en page intégralement faite en CSS..


Grosse méprise malheureusement. HTML est tout aussi sémantique que XHTML. La norme HTML 4.01 est bien plus stricte qu'un XHTML mal fichu.
Pour rappel, les seules différences fondamentales entre HTML et XHTML sont de l'ordre de la rigueur :
    * Toute balise ouvrante doit être fermée
    * Balises et propriétés en minuscules
    * Valeurs entre quotes (apostrophes) ou double quotes (guillemets)
    * Chaque propriété doit avoir une valeur (pas de propriété vide comme checked, qui doit être écrit checked="checked" )
    * Les balises doivent être correctement imbriquées
 
C'est tout ! Aucune notion de tableaux, de CSS, de sémantique ni d'accessibilité : ces termes et domaines existent déjà en HTML.
 
Autre anecdote : le grand Gourou mondial des CSS, qui intervient directement dans les specs W3C, Eric Meyer a un site en XHTML 4.01... intégralement en CSS bien entendu.
 
Je refuse de véhiculer l'idée fausse que "HTML = pas de sémantique" et "XHTML = CSS". C'est ce genre d'idée qui fait que tout le monde mélange et confond des choses très différentes (par exemple : "les CSS ça rend automatiquement un site plus Accessible", et autres idioties" )
 

Arjuna a écrit :

Ensuite, une page HTML peut parfaitement passer au validateur XHTML (à quelques corrections près) sans resecter une seconde la norme XHTML. Suffit de voir le nombre de sites qui affichent des listes dans des divs, ou n'utilisent pas les balises Hx, c'est abérant de recevoir des leçons en retour. Je ne parle même pas de la majorité des gens qui ne connaissent pas les balises "dl", "dt" et "dd"... .


Bien entendu : le Validateur W3C, comme tout outil automatique est incapable de juger de la sémantique d'un document.
Il ne peut (et le reconnait) vérifier que des points varifiables automatiquement (imbrications, fermeture, etc.).
De toute façon, passer le Validateur ne doit jamais être un but en soi et une Norme n'assure pas la compatibilité.
 
 

Arjuna a écrit :

Je ne parle même pas de la majorité des gens qui ne connaissent pas les balises "dl", "dt" et "dd"... .

Pire encore : ceux qui les emploient à mauvais escient (et j'avoue que j'y suis indirectement pour quelque chose à cause de quelque tuto obsolète ;))
 

Arjuna a écrit :

Bref. Dans tous les cas, logique différente ou non, s'il n'y a pas de régression, alors TOUT ce qui était possible de faire en HTML, même de la façon la plus porcine doit être faisable en XHTML en suivant RIGOUREUSEMENT la norme (c'est à dire en respectant aussi la notion de sémantique).


OK, je traduis par "tout ce qu'on faisait en tableau doit être faisable sans tableaux en utilisant la sémantique des balises".
 
Alors je vais apporter une réponse personnelle de par mon expérience relative :
1- En théorie, il est presque possible de faire en CSS tout ce qu'on pouvait faire avant en tableaux.
 
Je dis bien "en théorie", puisque tout est prévu dans les spec CSS, mais que certains navigateurs (comme IE6) obsolètes n'implémentent pas tout. Notamment le fameux "display : table-cell" qui permettrait un centrage vertical de façon enfantine en CSS. D'autres cas, comme la notion de "colonnes de même hauteur" sont difficiles à gérer en CSS pour ces mêmes raisons (navigateurs obsolètes).
Sans parler bien-sûr des bugs inhérents à chaque navigateurs et qui nécessitent des bidouilles.
 
2- Dans la pratique, les tableaux posent un problème de fond : croire que le Web est un média figé, comme le média Print. Ils permettent d'avoir l'illusion que le web peut être paginé (hauteur de page)... alors que la notion de "page" n'existe pas dans le média Web.
Ce genre d'a priori fait que le webdesigner a souvent envie de faire des choses qui n'ont pas lieu d'être dans le media Web. Les structures en tableaux, ou les outils comme Flash permettent de réaliser ce genre de déviations du média.
Cependant - et c'est là qu'il faut bien comprendre le média - les CSS sont vraiment adaptés à chaque média (screen, print, aural, handheld, etc.) et c'est au webmaster de s'adapter au média Web et non l'inverse.
 

Arjuna a écrit :

Pour avoir ré-écrit 80% des templates de ce site : http://www.elysee.fr qui, au moment de sa mise en prod tout du moins, respectait l'intégralité des normes les plus stricts qui existent, y compris les considération d'accessibilité et cnie, ne m'apprends pas ce qu'est le XHTML, je pense en avoir fait suffisament.


Tout ce qui me chagrine, est de croire que XHTML = CSS, ce qui est faux. Or, le W3C l'affirme lui-même : tous les doctypes depuis HTML 4.01 transitionnel sont parfairement Valides et intégralement aux Normes.
Choisir XHTML strict est un choix valide comme un autre.
 
D'ailleurs, si on voulait aller plus loin sur ce point précis, il vaudrait mieux éviter actuellement XHTML puisque je suppose que tu le sers comme du "text/html" et non comme une application XML, ce qu'il devrait être.
 
Voir :  
http://www.hixie.ch/advocacy/xhtml.fr/
http://forum.alsacreations.com/faq/#item42
 
 

Arjuna a écrit :

Bref, je suis toujours dans l'attente d'une soluce qui respecterait la norme XHTML dans son intégralité, même si actuellement je m'en sors en foutant à la poubelle la sémantique.


"Foutre à la poubelle la sémantique", c'est utiliser des tableaux ?
Il faut savoir que parfois, la structure tabulaire - bien conçue - est bien plus compréhensible par les agents utilisateurs et les personnes handicapées (non voyants pour ne parler que d'eux).
Les tableaux sont aujourd'hui tellement satanisés qu'ils commencent à poser des problèmes inverses : les personnes handicapées se plaignent que les sites "pensés comme des tableaux, mais réalisés n'importe comment à grands renfors de div imbriqués" leur posent encore plus de problèmes.
 
Le problème, c'est qu'on demande maintenant aux agence de "faire un site sans tableau" (ou pire "faire un site en XHTML" en croyant que c'est la même chose)... parce que ça fait bien.
 
Mais ceci est un autre sujet :)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 12-07-2006 à 12:49:13    

En fait, si j'ai bien compris, tu voudrais simplement faire un cadre sans tableau ?
 
Je te donne un ancien lien :  
http://www.alsacreations.com/articles/cadre/
 
Mais si tu veux plus récent et conforme, tu devrais trouver ça dans un bon bouquin que je pourrais personnellement te conseiller ;)
 
EDIT : tiens, d'autres façons de procéder :
http://articles.e-t172.net/round/
http://www.html.it/articoli/nifty/index.html

Message cité 1 fois
Message édité par sibelius le 12-07-2006 à 12:54:35

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 12-07-2006 à 12:59:50    

sibelius a écrit :

Je refuse de véhiculer l'idée fausse que "HTML = pas de sémantique" et "XHTML = CSS". C'est ce genre d'idée qui fait que tout le monde mélange et confond des choses très différentes (par exemple : "les CSS ça rend automatiquement un site plus Accessible", et autres idioties" )


C'est pourtant ce qu'on peut lire sur le site www.w3.org
 
Le HTML dispose de tous les mécanismes et principes de sémantique, séparation de la mise en page et des données et tout.
SAUF que leur application ne fait pas partie de la norme. En résumé, on a un outil, on s'en sert comme on veut, personne ne t'empêche de décapsuler une bière avec un briquet.
 
Le XHTML, quant à lui, et c'est écrit noir sur blanc dans sa définition, impose l'utilisation des outils de sémantique et de séparation des donnés de la mise en page.
 
Comme j'ai dit plus haut, une page qui passe au validateur XHTML n'est pas forcément conforme à la norme (tandis qu'une page HTML validée, même si dedans y'a que de la merde, reste conforme à la norme).

Reply

Marsh Posté le 12-07-2006 à 13:03:49    

"utilise des tableaux c'est foutre à la poubelle la sémantique", oui, dans ce cas, dans la mesure où je n'affiche pas un tableau, mais un cadre qui englobe une liste.
 
sur la partie droite, j'ai un tableau bien goret, et il ne changera jamais, car sémentiquement c'est un tableau, ce serait une inepte de le transformer en div.
 
mais les contours de mon menu...

Reply

Marsh Posté le 12-07-2006 à 13:08:51    

Arjuna a écrit :

Le XHTML, quant à lui, et c'est écrit noir sur blanc dans sa définition, impose l'utilisation des outils de sémantique et de séparation des donnés de la mise en page.


 
Voilà exactement ce qu'indiquent les différents doctypes :
 
HTML4.01 transitional
les attributs et éléments de présentation suivants sont autorisés...
 
HTML4.01 strict
les attributs et éléments de présentation précédents ne sont plus autorisés. Ils doivent être remplacés par des styles CSS
 
XHTML1.0 transitional
voir HTML4.01 transitional
 
XHTML1.0 strict
voir HTML4.01 strict
 
En résumé :  
- XHTML n'apporte aucune différence en terme d'obligation de CSS
- XHTML transitionnel accepte très bien les balises et attributs de mise en page
- les tableaux restent bien entendu valides dans les 4 doctypes.
 
Bon allez, c'est le genre de troll sans fin qui ne m'apporte rien à part à perdre du temps sur les fausses idées reçues qui malheureusement embrouillent tout le monde. Mais c'est pas grave, l'estomac est à présent prioritaire dans mon agenda.
 
Bonne chance à toi pour ton projet ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 12-07-2006 à 14:17:56    

dans tous les cas, mon truc ne respecte pas la sémantique, et ça me fait chier :o
 
sinon, bien noté pour le html 4.01, je n'avais pas connaissance de ce dernier, sorti apparement juste 1 mois avant le xhtml 1.0 d'après les dates de première révisions. (décembre 1999 contre janvier 2000)

Reply

Marsh Posté le 12-07-2006 à 14:21:22    

sibelius a écrit :

En fait, si j'ai bien compris, tu voudrais simplement faire un cadre sans tableau ?
 
Je te donne un ancien lien :  
http://www.alsacreations.com/articles/cadre/
 
Mais si tu veux plus récent et conforme, tu devrais trouver ça dans un bon bouquin que je pourrais personnellement te conseiller ;)
 
EDIT : tiens, d'autres façons de procéder :
http://articles.e-t172.net/round/
http://www.html.it/articoli/nifty/index.html


Le problème de ces liens (comme tous ceux qui ont été mis dans ce topic depuis le début), c'est qu'ils ne permettent pas de faire ce que je veux faire.
 
Je vais faire un dessin, parceque je crois que je vais jamais m'en sortir sinon... à chaque fois j'ai les mêmes réponses, qui ne résolvent pas du tout mon problème.
 
Je reviens dans quelques minutes, avec un dessin et les explications qui vont bien, car j'ai l'impression que personne ne comprend ce que je veux depuis hier ;)

Reply

Marsh Posté le 12-07-2006 à 14:39:36    

Voilà, je ne vois pas ce que je pourrais rajouter de plus :
 
http://magicsite.manga-torii.com/images/cadre.png

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed