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

Répondre

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

Je m'en fiche complètement
3
11%
C'est hyper important mais je m'y mettrais demain
5
18%
C'est hyper important et mon site en tient compte
20
71%
 
Nombre total de votes : 28

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics


medium69
WRInaute accro
WRInaute accro
 
Messages: 2183
Inscription: Sam Mai 07, 2005 9:36

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

Message 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 !!
Haut
Victor BRITO
WRInaute impliqué
WRInaute impliqué
 
Messages: 423
Inscription: Jeu Déc 21, 2006 13:15

Message 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:
Dernière édition par Victor BRITO le Lun Nov 12, 2007 19:42, édité 1 fois.
Haut

medium69
WRInaute accro
WRInaute accro
 
Messages: 2183
Inscription: Sam Mai 07, 2005 9:36

Message 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
Haut
dudo
WRInaute impliqué
WRInaute impliqué
 
Messages: 369
Inscription: Sam Jan 10, 2004 17:28

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

Message 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] &euro;<br><li class=m>$mark</ul></td></tr>";
</table>
Haut

Leonick
WRInaute accro
WRInaute accro
 
Messages: 12383
Inscription: Dim Aoû 08, 2004 20:24

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

Message 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] &euro;<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>
Haut

bproductiv
WRInaute accro
WRInaute accro
 
Messages: 2853
Inscription: Lun Déc 27, 2004 16:29

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

Message 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] &euro;<br><li class=m>$mark</ul></td></tr>";
</table>

Trop propre comme code :lol:
Haut

webmasterlamogere
WRInaute accro
WRInaute accro
 
Messages: 1874
Inscription: Dim Déc 17, 2006 21:08

Message le Mar Nov 13, 2007 10:55

Le résultat n'est pas le même sur FF et IE6!
Haut
Florent V.
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 183
Inscription: Mer Mai 16, 2007 13:17

Message 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.
Haut
dudo
WRInaute impliqué
WRInaute impliqué
 
Messages: 369
Inscription: Sam Jan 10, 2004 17:28

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

Message 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.
Haut

Leonick
WRInaute accro
WRInaute accro
 
Messages: 12383
Inscription: Dim Aoû 08, 2004 20:24

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

Message 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:
Haut

medium69
WRInaute accro
WRInaute accro
 
Messages: 2183
Inscription: Sam Mai 07, 2005 9:36

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

Message 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...
Haut
Répondre

Formation recommandée sur ce thème :

Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :

Consultez la description détaillée des produits ou services de Google suivants : Google Accessible Search

  • Générateur de mots-clés
    Cet outil vous permet de créer à partir de quelques mots-clés une liste d'expressions constituées des mots pris dans tous les ordres possibles. Il sert aux analyses de positionnement et achats de mots-clés.


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group , traduction par phpBB-fr.com, mod SEO par phpbb-seo.com