Mise en page sans tableau

finidori · 30 Juillet 2004

Bonjour,

Je cherche un modèle de page pour afficher le menu à gauche, la partie principale au centre.

Et que le modèle affiche bien la partie principale avant le menu une fois linéarisée.

Solution 1/

Ici http://www.la-grange.net/accessibilite/day_10.html,

j'ai trouvé ceci qui permet d'afficher le texte principal avant le menu lorsque la page est linéarisée.

<table>

<tr>

<!-- Contenu principal dans la premiere cellule,

avec rowspan="2" -->

... contenu principal ...

</td>

</tr>

<tr>

... barre de navigation ...

</td>

</tr>

</table>

Cependant, cela présente l'inconvénient d'utiliser un tableau alors qu'on ne devrait pas.

Solution 2/

Ici http://www.alsacreations.com/articles/design/

On a un modèle sans tableau mais le menu apparaîtra avant en linéarisé.

style type="text/css"><!--html, body { margin:0; padding:0;

height: 100%;}.entete { background-color: #3333CC; height: 10%;}.contenu { height: 80%; background-color: #66CCFF;}.menu { background-color: #330066; float: left; width: 200px; height: 100%; color: #ffffff;}.centre { margin-left: 200px;}.pied { background-color: #336699; height: 10%;}--></style>

</div>

Ici http://www.alsacreations.com/articles/div/

Solution 3/

on a un modèle qui résoud les 2 problèmes.

style type="text/css"><!--.gauche {

float: left;

} --></style>

texte bla bla bla

....

</div>

Mais, si je remplace le texte blabla par un texte avec plusieurs balises <p>, <h1>, <div> ..., ça ne marche plus, le menu apparaît en-dessous du texte central.

Comment faites-vous ?

Merci d'avance.

Gilbert

Paginus · 30 Juillet 2004

Eh bien, je t'ai préparé quelque chose qui pourrait servir de point de départ.

Je te suggère de mettre ton contenu principal dans une div, puis les liens de ton menu dans une liste non ordonnée.

Pour les besoins des navigateurs vocaux, on va terminer chaque item d'une liste par un caractère imprimable. Mais comme c'est plus beau quand ces caractères ne s'affichement pas, on va les masquer dans un navigateur qui prend en charge les règles CSS.

Et comme c'est plus beau quand on ne voit pas les puces non plus, on va les cacher aussi.

Voici ce que cela donne. Le code HTML d'abord :

<div id="contenu">
  <h1>Titre</h1>
  <h2>Sous-titre</h2>
  <p>
  Paragraphe quelconque juste pour remplir cet espace de texte. 
  Paragraphe quelconque juste pour remplir cet espace de texte. 
  Paragraphe quelconque juste pour remplir cet espace de texte. 
  Paragraphe quelconque juste pour remplir cet espace de texte. 
  Paragraphe quelconque juste pour remplir cet espace de texte. 
  Paragraphe quelconque juste pour remplir cet espace de texte. 
  </p>
</div>

<ul id="nav">
  <li><a href="...">Lien no 1</a><span class="hide"> ;</span></li>
  <li><a href="...">Lien no 2</a><span class="hide"> ;</span></li>
  <li><a href="...">Lien no 3</a><span class="hide"> ;</span></li>
  <li><a href="...">Lien no 4</a><span class="hide"> ;</span></li>
  <li><a href="...">Lien no 5</a><span class="hide">.</span></li>
</ul>

C'était le code HTML. Voici les règles CSS :

  #nav {list-style:none; position: absolute; top: 30px;}
  li {line-height:1.5em;}
  #contenu {margin-left: 200px;}
  .hide {display: none;}

Voilà quelque chose de valide et accessible, qui devrait fonctionner.

Monique · 30 Juillet 2004

Bonjour,

En complément de la solution proposée par Paginus, tu peux utilement ajouter un menu d'accés rapide, toujours présent en haut de la page :

Aller au menu | Aller au contenu | Politique d'accessibilité

Quelque soit la solution choisie, il faut toujours garder à l'esprit

- que dans une page linéarisée, le contenu doit s'afficher dans un ordre logique pour une bonne compréhension

- que pour l'ensemble des pages, la même disposition doit être choisie pour éviter de dérouter l'internaute

LaurentDenis · 31 Juillet 2004

Pour les besoins des navigateurs vocaux, on va terminer chaque item d'une liste par un caractère imprimable. Mais comme c'est plus beau quand ces caractères ne s'affichement pas, on va les masquer dans un navigateur qui prend en charge les règles CSS.

C'est inutile.

Le problème des liens adjacents du type :

<a href="...">lien1</a>
<a href="...">lien2</a>

...c'est qu'un navigateur vocal ne fera pas de pause suffisante entre les deux liens pour permettre à l'utilisateur de bien les différencier et de les "cliquer". C'est pourquoi il est recommandé de séparer ces liens par un caractère "imprimable", c'est à dire lu par le lecteur d'écran.

Or, avec une liste <ul>, les navigateurs signalent (chacun à leur manière) la puce ou le changement d'item de liste, ce qui suffit à différencier les liens.

C'est la raison pour laquelle des liens en liste <ul> ne sont pas considérés comme adjacents par les validateurs d'accessibilité (Bobby, par exemple).

finidori · 31 Juillet 2004

Merci pour vos contributions.

Ceci

#nav {list-style:none; position: absolute; top: 30px;}

En effet, le menu est positionné de façon absolue. Il n'appartient pas au bloc englobant. C'est très gênant.

Ce n'est pas équivalent à la solution avec tableau que j'avais indiquée, dans laquelle, quelle que soit le contenu des cellules, tout s'ajuste bien, menu à gauche et texte à droite, le cadre englobant prenant la bonne taille.

Ici, si j'ai peu de texte à droite, le cadre englobant est plus petit en hauteur que le menu :-(

LaurentDenis · 1 Août 2004

En effet, le menu est positionné de façon absolue. Il n'appartient pas au bloc englobant. C'est très gênant.
Ce n'est pas équivalent à la solution avec tableau que j'avais indiquée, dans laquelle, quelle que soit le contenu des cellules, tout s'ajuste bien, menu à gauche et texte à droite, le cadre englobant prenant la bonne taille.

Chercher à transposer à l'identique en CSS un rendu obtenu avec des tableaux mène souvent à ce type de déception : ces deux modes de présentation ne sont pas équivalents, en effet.

Cela dit, la solution d'un contenu flottant peut te permettre d'obtenir ce que tu cherches en CSS, à condition d'utiliser l'astuce du "spacer" en fin de bloc englobant. Voir http://openweb.eu.org/articles/initiation_float/ :

HTML:

<div class="englobant">
  <div class="content">
  ...
  </div>
  <div class="menu">
  ...
  </div>
  <hr />
</div>

CSS:

.content {
float: left;
width: 70%;
}
.menu {
margin-left: 80%;
}
hr {
clear: both;
}

Modifié 1 Août 2004 par LaurentDenis

finidori · 1 Août 2004

Un truc auquel je pensais: il existe un media "braille" en CSS.

Pourquoi les navigateurs de type Lynk n'utilisent-ils pas ce media pour choisir la css. J'ai testé sur http://www.delorie.com/web/lynxview.html, ce n'est pas le cas.

Si mon idée est stupide, dites-le moi, en m'expliquant pourquoi.

finidori · 1 Août 2004

Merci Laurent,

J'ai pu adapater ta solution. Et ça marche bien ! C'est la solution la plus satisfaisante et la plus simple.

LaurentDenis · 2 Août 2004

Un truc auquel je pensais: il existe un media "braille" en CSS.

Pourquoi les navigateurs de type Lynk n'utilisent-ils pas ce media pour choisir la css. J'ai testé sur http://www.delorie.com/web/lynxview.html, ce n'est pas le cas.

Si mon idée est stupide, dites-le moi, en m'expliquant pourquoi.

Et bien... Comment dire ? Je ne me permettrai pas de qualifier cette idée de stupide, mais le media braille est défini ainsi par la spécification CSS:

braille : destiné aux appareils braille à retour tactile

( http://www.yoyodesign.org/doc/w3c/css2/med...tml#media-types )

Le fonctionnement des appareils brailles est totalement différent de celui d'un navigateur texte : ce sont des medias tactiles à grille de caractères fixe, et non des appareils visuels...

finidori · 2 Août 2004

Oui, je sais que le braille n'est pas visuel !

Je dois tester au maximum les différents types de navigateurs de façon à voir les problèmes sur chacun d'entre eux. Je ne pourrai pas utiliser un appareil de type braille. Mais je pensais qu'on pourrait trouver des navigateurs qui simulent, autant que possible, le rendu.

Est-ce qu'on pourrait résumer les différents types de navigateurs destinés aux différents types de publics ? En indiquant les moyens de tester ou simuler ces navigateurs.

LaurentDenis · 2 Août 2004

Disons qu'une plage braille restitue la page à travers une ligne de 80 caractères environ au maximum.

Simuler une page Web sur une plage braille revient grossièrement à l'afficher dans un navigateur texte, puis à tronçonner linéairement en paquets de 80 caractères...

Connexion

Mise en page sans tableau

Sujets conseillés

finidori

Paginus

Monique

LaurentDenis

finidori

LaurentDenis

finidori

finidori

LaurentDenis

finidori

LaurentDenis

Veuillez vous connecter pour commenter

Parcourir

Activité