[CSS] Remplace un tableau d'éléments centrés par une liste

Remplace un tableau d'éléments centrés par une liste [CSS] - HTML/CSS - Programmation

Marsh Posté le 10-11-2003 à 17:21:50    

Je cherche à virer le plus possible de tableaux de mon site pour le rendre plus accessible. J'ai un menu en haut de la page, un tableau contenant des liens qui sont centrés dans leurs cellules. Est-ce que c'est possible de le remplacer par une liste non-numérotée qui s'affiche horizontalement (jusque là j'y arrive) mais dont les éléments soient centrés horizontalement ?


Message édité par Goon le 10-11-2003 à 17:22:19
Reply

Marsh Posté le 10-11-2003 à 17:21:50   

Reply

Marsh Posté le 10-11-2003 à 17:45:41    

on peut voir l'original?

Reply

Marsh Posté le 12-11-2003 à 11:11:17    

La version originale était

Code :
  1. <table class="links">
  2. <tr>
  4. <td class="links"><a class="links" href="index.fr.php">Accueil</a></td>
  6. <td class="links"><a class="links" href="solutions.fr.php">Nos solutions</a></td>
  8. <td class="links"><a class="links" href="products.fr.php">Nos produits</a></td>
  10. <td class="links"><a class="links" href="references.fr.php">Nos
  11. references</a></td>
  13. <td class="links"><a class="links" href="contact.fr.php">Contact</a></td>
  15. <td class="links"><a class="links" href="index.en.php"><img
  16. class="noborder" src="img/en.png" alt="English version"/></a></td>
  18. </tr>
  19. </table>


 
avec comme feuille de style

Code :
  1. table.links
  2. {
  3.   width: 100%;
  4.   background-color: #B9C5E2;
  5.   border-collapse: collapse;
  6. }
  8. td.links
  9. {
  10.   text-align: center;
  11.   border-style: none;
  12.   padding: 5px 0px 5px 0px;
  13. }


 
et je suis passé à

Code :
  1. <ul clas="inline">
  2.  <li class="inline"><a class="links" href="index.fr.php">Accueil</a></li>
  3.  <li class="inline"><a class="links" href="solutions.fr.php">Nos solutions</a></li>
  4.  <li class="inline"><a class="links" href="products.fr.php">Nos produits</a></li>
  5.  <li class="inline"><a class="links" href="references.fr.php">Nos références</a></li>
  6.  <li class="inline"><a class="links" href="contact.fr.php">Contact</a></li>
  7.  <li class="inline"><a class="links" href="index.en.php"><img class="noborder" src="img/en.png" alt="English version"/></a></li>
  8. </ul>
  9. '


 
avec comme feuille de style

Code :
  1. ul.inline {
  2. width: 100%;
  3. display: table-cell;
  4. }
  6. li.inline {
  7. display: inline;
  8. text-align: center;
  9. }

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed