|
Voir le sujet précédent :: Voir le sujet suivant
|
| L'accessibilité, ce que j'en pense... |
| Je m'en fiche complètement |
|
10% |
[ 3 ] |
| C'est hyper important mais je m'y mettrais demain |
|
17% |
[ 5 ] |
| C'est hyper important et mon site en tient compte |
|
71% |
[ 20 ] |
|
| Total des votes : 28 |
|
| Auteur |
Message |
| |
|
medium69
WRInaute accro
Inscrit le: 07 Mai 2005
Messages: 2151
Localisation: Je sais pas trop ;)
|
 Posté le : Lun Nov 12, 2007 19:23 Sujet du message: Créer une mise en page accessible sans tableau !!! |
|
|
Suite à un autre post ou il y a les :
 Tout dans la balise table !!
et...
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: |
<!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 !! |
|
| |
|
 |
Victor BRITO
WRInaute impliqué
Inscrit le: 21 Déc 2006
Messages: 423
Localisation: 92200 Neuilly-sur-Seine
|
| Posté le : Lun Nov 12, 2007 19:39 Sujet du message: Créer une mise en page accessible sans tableau !!! |
|
|
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 . 
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.
Dernière édition par Victor BRITO le Lun Nov 12, 2007 19:42; édité 1 fois |
|
| |
|
|
medium69
WRInaute accro
Inscrit le: 07 Mai 2005
Messages: 2151
Localisation: Je sais pas trop ;)
|
| Posté le : Lun Nov 12, 2007 19:41 Sujet du message: Créer une mise en page accessible sans tableau !!! |
|
|
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 |
|
| |
|
|
dudo
WRInaute impliqué
Inscrit le: 10 Jan 2004
Messages: 327
|
| Posté le : Lun Nov 12, 2007 22:12 Sujet du message: Re: Créer une mise en page accessible sans tableau !!! |
|
|
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
| Citation: |
<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>
|
|
|
| |
|
|
Leonick
WRInaute accro
Inscrit le: 08 Aoû 2004
Messages: 9078
Localisation: Val de Marne
|
| Posté le : Lun Nov 12, 2007 22:47 Sujet du message: Re: Créer une mise en page accessible sans tableau !!! |
|
|
| 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
| Citation: |
<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> |
|
| |
|
|
bproductiv
WRInaute accro
Inscrit le: 27 Déc 2004
Messages: 2362
Localisation: La roche s/ yon
|
| Posté le : Mar Nov 13, 2007 9:07 Sujet du message: Re: Créer une mise en page accessible sans tableau !!! |
|
|
| 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
| Citation: |
<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  |
|
| |
|
|
webmasterlamogere
WRInaute accro
Inscrit le: 17 Déc 2006
Messages: 1689
Localisation: urlrewriting.fr
|
| Posté le : Mar Nov 13, 2007 10:55 Sujet du message: Créer une mise en page accessible sans tableau !!! |
|
|
| Le résultat n'est pas le même sur FF et IE6! |
|
| |
|
|
Florent V.
WRInaute occasionnel
Inscrit le: 16 Mai 2007
Messages: 181
|
| Posté le : Mar Nov 13, 2007 11:20 Sujet du message: Créer une mise en page accessible sans tableau !!! |
|
|
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. |
|
| |
|
|
dudo
WRInaute impliqué
Inscrit le: 10 Jan 2004
Messages: 327
|
| Posté le : Mar Nov 13, 2007 15:35 Sujet du message: Re: Créer une mise en page accessible sans tableau !!! |
|
|
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. |
|
| |
|
|
Leonick
WRInaute accro
Inscrit le: 08 Aoû 2004
Messages: 9078
Localisation: Val de Marne
|
| Posté le : Mar Nov 13, 2007 16:31 Sujet du message: Re: Créer une mise en page accessible sans tableau !!! |
|
|
| 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"  |
|
| |
|
|
medium69
WRInaute accro
Inscrit le: 07 Mai 2005
Messages: 2151
Localisation: Je sais pas trop ;)
|
| Posté le : Mar Nov 13, 2007 16:45 Sujet du message: Re: Créer une mise en page accessible sans tableau !!! |
|
|
| 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... |
|
| |
|
|
| |
|
|
