Créer une mise en page accessible sans tableau !!!

**le Lun Nov 12, 2007 19:23**

Suite à un autre post ou il y a les :

:arrow:

Tout dans la balise table !!
et...
:arrow:

Tout dans la balise div !!

Voici un bout de code qui démontre ce qu'il est très facile de faire pour une présentation pourtant complexe en apparence...

Code: Tout sélectionner: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html lang=fr xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <style type=text/css> #header { background-color: #00ccff; } #menu { width: 22.5%; background-color: #99cccc; } #pub { height: 60px; width: 77%; position: absolute; top: 0px; background-color: #99aacc } #contenu { margin-left: 23%; position: absolute; } #corps { margin-top: 60px; width: 77%; background-color: #22aacc; } #bas { width: 77%; height: 60px; background-color: #aaddee; } #colonne { width:97%; margin: auto; } .float { background-color: #99aacc; float: left; width: 33.3%; margin: 1em 0; } .floatbis { background-color: #ff66cc; float: left; width: 33.3%; margin: 1em 0; } .both { clear: both; } </style> </head> <body> <div id=header align="center"> Du texte à afficher avant le menu et le contenu en haut de page par exemple.<br> Ce dernier pousse l'ensemble vers le bas. </div> <div id=conteneur> <div id=contenu> <div id=corps> <p>le texte principal du site s'affiche avant les colonnes éventuelles <br> en prenant toute la hauteur disponible comme ci-après. <div id=colonne> <div class="floatbis"> La première colonne s'affiche de la même taille que les deux autres centré au milieu du contenu.<br> <br> <br> </div> <div class="float"> La deuxième colonne avec son contenu<br> <br> </div> <div class="floatbis"> Et la troisième...<br> <br> </div> </div> <div class="both"> La fin du contenu principal peut s'afficher en dessous des colonnes. </div> </div> <div id=bas> les liens éventuel en bas de page </div> <div id=pub> la publicité s'affiche<br> en haut de page avec 60 pixels de hauteur </div> </div> <div id=menu>Le menu de gauche<br> s'affiche ici </div> </div> </body> </html>

Tout cela en restant entièrement accessible !!

**le Lun Nov 12, 2007 19:39**

Une remarque : vu que le code que tu proposes est du HTML, les attributs xml:lang et xmlns n'ont rien à y faire. Quant à l'URL de la DTD, c'est http://www.w3.org/TR/html4/loose.dtd . :wink:

Pour le reste, il n'y a rien à dire, si ce n'est que, le jour où il faut faire passer ce code en mode strict ou en XHTML, des corrections sont nécessaires, mais pas gourmandes en temps, si l'on connaît bien les différences entre HTML et XHTML, d'une part, et entre les permissions des différents modes (Transitional, Strict et Frameset), d'autre part. Bref, du temps est déjà gagné en maintenance. :wink:

**le Lun Nov 12, 2007 19:41**

Je me suis pas pris la tête sur la déclaration du doctype.

C'est la faute à Dreamweaver.

Le code donné n'est qu'un exemple à adapté à pour soi

**le Lun Nov 12, 2007 22:12**

Tout cela en restant entièrement accessible !!

C'est quelque fois un peu lourd les div, surtout quand il faut
rentrer dan les détails d'une page

<table>
echo "<tr><td class=ol><div class=u><img width=70 $dataimage alt='$data[secteur]'></div></td>";
echo "<td class=ol><ul><li class=y><a href=$data[url]>$data[secteur]</a></li><br><li class=v>$data[description]...</li></ul></td>";
echo "<td class=ol><ul class=ct><li class=n>$data[prix] €<br><li class=m>$mark</ul></td></tr>";
</table>

**le Lun Nov 12, 2007 22:47**

dudo a écrit:Tout cela en restant entièrement accessible !!

C'est quelque fois un peu lourd les div, surtout quand il faut
rentrer dan les détails d'une page

<table>
echo "<tr><td class=ol><div class=u><img width=70 $dataimage alt='$data[secteur]'></div></td>";
echo "<td class=ol><ul><li class=y><a href=$data[url]>$data[secteur]</a></li><br><li class=v>$data[description]...</li></ul></td>";
echo "<td class=ol><ul class=ct><li class=n>$data[prix] €<br><li class=m>$mark</ul></td></tr>";
</table>

c'est quoi ce code ?
quel intérêt de met un div dans le td ? la divite aigue est très mauvaise : il ne faut utiliser des div qu'à bon escient.
Sinon, il est bon de prendre l'habitude de quoter les attributs des balises
genre <td class="ol"> au lieu de <td class=ol>

**le Mar Nov 13, 2007 9:07**

dudo a écrit:Tout cela en restant entièrement accessible !!

C'est quelque fois un peu lourd les div, surtout quand il faut
rentrer dan les détails d'une page

<table>
echo "<tr><td class=ol><div class=u><img width=70 $dataimage alt='$data[secteur]'></div></td>";
echo "<td class=ol><ul><li class=y><a href=$data[url]>$data[secteur]</a></li><br><li class=v>$data[description]...</li></ul></td>";
echo "<td class=ol><ul class=ct><li class=n>$data[prix] €<br><li class=m>$mark</ul></td></tr>";
</table>

Trop propre comme code :lol:

**le Mar Nov 13, 2007 10:55**

Le résultat n'est pas le même sur FF et IE6!

**le Mar Nov 13, 2007 11:20**

Hello,

Juste une remarque: la question de l'utilisation ou non des tableaux de mise en forme est une question relativement mineure du point de vue de l'accessibilité numérique. Si un tableau de mise en forme se linéarise correctement (c'est-à-dire que la lecture cellule par cellule, puis ligne par ligne, est cohérente), il ne pose pas de problème d'accessibilité particulier.

**le Mar Nov 13, 2007 15:35**

Sinon, il est bon de prendre l'habitude de quoter les attributs des balises
genre <td class="ol"> au lieu de <td class=ol>

Oui,j'en profite pour signaler qu'il n'existe aucune rêgle imposant
les guillermets doubles et qu'il est bien plus simple d'utiliser les guillemets simples lorsque l'on souhaite afficher de longs passages en php avec echo puique l'on évite systématiquement le signe d'échappement.

**le Mar Nov 13, 2007 16:31**

dudo a écrit:il est bien plus simple d'utiliser les guillemets simples lorsque l'on souhaite afficher de longs passages en php avec echo puique l'on évite systématiquement le signe d'échappement.

ben oui echo 'affichage de : $ee'; et $ee="l'après midi";
oh ben zut, ça me coupe mon contenu au 2° apostrophe, donc je perd mon "après midi" :cry:

**le Mar Nov 13, 2007 16:45**

dudo a écrit:Sinon, il est bon de prendre l'habitude de quoter les attributs des balises
genre <td class="ol"> au lieu de <td class=ol>

Oui,j'en profite pour signaler qu'il n'existe aucune rêgle imposant
les guillermets doubles et qu'il est bien plus simple d'utiliser les guillemets simples lorsque l'on souhaite afficher de longs passages en php avec echo puique l'on évite systématiquement le signe d'échappement.

echo peut s'utiliser avec les guillemets simples...

Créer une mise en page accessible sans tableau !!!

L'accessibilité, ce que j'en pense...

Créer une mise en page accessible sans tableau !!!

Re: Créer une mise en page accessible sans tableau !!!

Re: Créer une mise en page accessible sans tableau !!!

Re: Créer une mise en page accessible sans tableau !!!

Re: Créer une mise en page accessible sans tableau !!!

Re: Créer une mise en page accessible sans tableau !!!

Re: Créer une mise en page accessible sans tableau !!!

Lectures recommandées sur ce thème :

Qui est en ligne