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

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

  • Je m'en fiche complètement

    Votes: 0 0.0%
  • C'est hyper important mais je m'y mettrais demain

    Votes: 0 0.0%
  • C'est hyper important et mon site en tient compte

    Votes: 0 0.0%

  • Total voters
    0
WRInaute passionné
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:
<!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 !!
 
WRInaute occasionnel
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:
 
WRInaute passionné
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
 
WRInaute impliqué
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>$data[secteur]</a></li><br><li cla...ss=m>$mark</ul></td></tr>"; </table> [/quote]
 
WRInaute accro
dudo a dit:
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>$data[secteur]</a></li><br><li cla...enre <td class="ol"> au lieu de <td class=ol>
 
WRInaute accro
dudo a dit:
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>$data[secteur]</a></li><br><li cla.../quote][/quote] Trop propre comme code :lol:
 
WRInaute discret
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.
 
WRInaute impliqué
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.
 
WRInaute accro
dudo a dit:
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:
 
WRInaute passionné
dudo a dit:
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...
 
Discussions similaires
Haut