Bonjour, 
Voilà voilà... Après quelques coups de pelle, j'ai décidé de me remettre aux tableaux, enfin de les redécouvrir parce qu'en fait, je ne m'y étais pas vraiment attardé. Donc, en l'absence de connexion internet, j'ai sorti mes p'tits bouquins pour le faire dans les règles de l'art...
Un petit problème s'est présenté sous IE sous la forme d'un espace entre ma division supérieure et la table proprement dite...
Plutôt que de mettre un hack, j'ai préféré mettre un fond blanc sous l'image de background de la division puisque çà comblait le vide. J'ai tout de même essayé de jouer sur des marges auparavant mais rien y faisait. Donc comme c'est une histoire de 5px de plus sur le haut du tableau, ce n'est pas trop gênant puisque peu visible (sous IE uniquement...). Ceci dit, si quelqu'un sait d'où çà vient, je suis tout ouïe. 
Aussi, j'ai tenté, tant bien que mal, de rendre mon tableau accessible au plus grand nombre mais comme je ne suis pas bien sûr de mon coup, je préfère m'en remettre à vos neurones...
En fait, j'attends surtout que l'on me dise si:
*la sémantique est correcte ou non, en particulier pour les divisions au-dessus et en-dessous du tableau... est-ce bien justifié?
*la rédaction de mon code est correcte ou non en terme d'accessibilité...
A noter que je compte ajouter au-dessus et en-dessous de cet ensemble des ancres pour créer un lien d'évitement visible sans feuille de style.
*et puis autre chose si le coeur vous en dit. (
ou 
, au choix... )
'oilà tout... Le rendu du tableau se trouve sur ma page d'accueil et je vous transmet les codes utilisés ci-dessous:
Merci d'avoir tout lu...
Modifié par koala64 (20 Jul 2005 - 14:58)
Voilà voilà... Après quelques coups de pelle, j'ai décidé de me remettre aux tableaux, enfin de les redécouvrir parce qu'en fait, je ne m'y étais pas vraiment attardé. Donc, en l'absence de connexion internet, j'ai sorti mes p'tits bouquins pour le faire dans les règles de l'art...
Un petit problème s'est présenté sous IE sous la forme d'un espace entre ma division supérieure et la table proprement dite...
Plutôt que de mettre un hack, j'ai préféré mettre un fond blanc sous l'image de background de la division puisque çà comblait le vide. J'ai tout de même essayé de jouer sur des marges auparavant mais rien y faisait. Donc comme c'est une histoire de 5px de plus sur le haut du tableau, ce n'est pas trop gênant puisque peu visible (sous IE uniquement...). Ceci dit, si quelqu'un sait d'où çà vient, je suis tout ouïe. Aussi, j'ai tenté, tant bien que mal, de rendre mon tableau accessible au plus grand nombre mais comme je ne suis pas bien sûr de mon coup, je préfère m'en remettre à vos neurones...
En fait, j'attends surtout que l'on me dise si:*la sémantique est correcte ou non, en particulier pour les divisions au-dessus et en-dessous du tableau... est-ce bien justifié?
*la rédaction de mon code est correcte ou non en terme d'accessibilité...
A noter que je compte ajouter au-dessus et en-dessous de cet ensemble des ancres pour créer un lien d'évitement visible sans feuille de style.
*et puis autre chose si le coeur vous en dit. (
ou , au choix... )'oilà tout... Le rendu du tableau se trouve sur ma page d'accueil et je vous transmet les codes utilisés ci-dessous:
HTML:
<div id="haut"> Début du tableau </div>
<table summary="Tableau indiquant pour chaque section du site,
leur description et la date de mise à jour" cellspacing="0">
<colgroup>
<col class="cln1" />
<col />
<col class="cln2" />
</colgroup>
<tr>
<td id="titres"> Titres </td>
<th id="se" abbr="section"> SALONS </th>
<th id="de" abbr="description" class="contain"> CONTENU </th>
<th id="da" abbr="date"> MISE A JOUR </th>
</tr>
<tr>
<th id="ac" abbr="section 1"> Section 1 </th>
<td headers="ac se"> <a href="index.php" title="Accueil"> Accueil </a> </td>
<td headers="ac de" class="contain"> C'est ici... </td>
<td headers="ac da"> 03/07/2005 </td>
</tr>
<tr>
<th id="pe" abbr="section 2"> Section 2 </th>
<td headers="pe se"> <a href="perso.php" title="Perso"> Perso </a> </td>
<td headers="pe de" class="contain"> Un pti'topo sur le koala </td>
<td headers="pe da"> 10/07/2005 </td>
</tr>
<tr>
<th id="mp" abbr="section 2"> Section 2 </th>
<td headers="mp se"> <a href="musique.php" title="mp3"> mp3 </a> </td>
<td headers="mp de" class="contain"> Quelques compos personnelles en mp3 </td>
<td headers="mp da"> 03/07/2005 </td>
</tr>
<tr>
<th id="ph" abbr="section 3"> Section 3 </th>
<td headers="ph se"> <a href="graphisme01.php" title="Photos"> Photos </a> </td>
<td headers="ph de" class="contain"> Photos natures et retouchées... </td>
<td headers="ph da"> 03/07/2005 </td>
</tr>
<tr>
<th id="sp" abbr="section 4"> Section 4 </th>
<td headers="sp se"> <a href="sport.php" title="Sports"> Sports </a> </td>
<td headers="sp de" class="contain"> Programmes d'entrainement, matos,... </td>
<td headers="sp da"> 03/07/2005 </td>
</tr>
<tr>
<th id="we" abbr="section 5"> Section 5 </th>
<td headers="we se"> <a href="web.php" title="Web"> Web </a> </td>
<td headers="we de" class="contain"> Conception d'un site web... </td>
<td headers="we da"> 03/07/2005 </td>
</tr>
<tr>
<th id="li" abbr="section 6"> Section 6 </th>
<td headers="li se"> <a href="liens.php" title="Liens"> Liens </a> </td>
<td headers="li de" class="contain"> Sites à visiter (classés par rubriques) </td>
<td headers="li da"> 03/07/2005 </td>
</tr>
</table>
<div id="bas"> Fin du tableau </div>CSS:
#haut, #bas {
width: 495px;
height: 15px;
text-indent: -3000px; }
#haut{
margin: 2em auto 0 auto;
background: #FFF url(topframe.gif) 0 0 no-repeat; }
#bas {
margin: 0 auto 2.5em auto;
background: url(bottomframe.gif) 0 0 no-repeat; }
table {
background: #FFF;
border: 0;
padding: 0;
width: 495px;
margin: 0 auto; }
.cln1 {
width: 110px; }
.cln2 {
width: 130px; }
th, td {
height: 2em;
line-height: 2em;
text-align: center; }
td a {
display: block;
width: 110px;
height: 2em; }
td a:hover {
background: url(Select2.png) 5px 0 no-repeat; }
#titres, #ac, #pe, #mp, #ph, #sp, #we, #li {
display: none; }
th {
color: #DA6; }
.contain {
text-align: left; }Merci d'avoir tout lu...
Modifié par koala64 (20 Jul 2005 - 14:58)
bye
Mais c'est tellement vrai...
