Centrer un div qui contient des float:left

Bonjour, je me suis créé une liste de lien à 3 boutons (précédent, sommaire et suivant) avec le système des images coulissantes, voici le résultat.

Ca marche bien sauf que ce petit "menu" est destiné à être affiché dans des div dont la largeur est variable (design extensible), et j'aimerais que ce menu soit centré, or là il reste collé à gauche.

J'ai essayé de l'encapsuler dans un tableau à une ligne une colonne mais ca ne change rien du tout.

Merci de votre aide.
Modifié par Galdon (27 Apr 2008 - 00:07)

Bonsoir,

1. donner une largeur fixe à la liste ul;
2. lui appliquer un margin: 0 auto (ou margin: 20px auto ou autres valeurs pour top et bottom).

En passant: en l'état, ces liens de navigation ne sont pas du tout accessibles. On peut améliorer les choses en donnant un intitulé aux liens (texte dans chaque élément a), quitte à le cacher en suite par l'une ou l'autre méthode. Ce ne sera toujours pas correctement accessible, mais déjà beaucoup moins pire.

Ca marche avec le width, par contre pour l'accessibilité, c'est vrai que si les images n'éxistent pas, l'utilisateur ne voit pas les liens, il faudrait donc faire en sorte que le texte ne s'affiche que si les images sont indisponibles (comme l'attribut alt de la balise img).

Seulement ces liens ne sont pas très importants, au pire les visiteurs utiliseront le bouton précédent de leur navigateur, et puis dans tous les cas les robots verront les liens donc...

Galdon a écrit :
il faudrait donc faire en sorte que le texte ne s'affiche que si les images sont indisponibles (comme l'attribut alt de la balise img)

Il n'y a que l'élément img avec son texte alternatif qui fonctionne ainsi (et les input de type image). Le problème des techniques CSS qui masquent le texte, c'est qu'il est impossible de poser une condition telle que «si l'image n'est pas disponible ou pas exploitable, ne pas cacher le texte». Dans l'absolu ce serait un mécanisme intéressant, mais dans la pratique ça n'existe pas.

La solution accessible est donc: image (côté HTML) avec attribut alt correctement renseigné, et rollover en Javascript.

Galdon a écrit :
et puis dans tous les cas les robots verront les liens donc...

Pour cela mieux vaut que les liens aient un intitulé, donc ne soient pas vides.

Bonjour,

Le plus propre serait surtout de mettre en place des images html avec le alt qui va bien.

<ul class="sommaire">
	<li><a href="/"><img src="precedent.jpg" alt="précédent" /></a></li>
	<li><a href="/"><img src="sommaire.jpg" alt="sommaire" /></a></li>
	<li><a href="/"<img src="suivant.jpg" alt="suivant" /></a></li>
</ul>

Pour rire:

a écrit :
ce petit "menu"

Visuellement il ne me semble pas si petit, en tout cas il parait être un élément d'interface bigrement important vue la taille des images -sans avoir vu l'ensemble de la page et son intégration dans cette page . C'est peut-être (toujours à l'aveugle) un élément de navigation primordiale dans le cadre de certains contenus organisés soit par date, soit par numéro, soit par un ordre quelconque. En tout cas si tu as ressenti le besoin de mettre un tel mécanisme de navigation c'est qu'il en vaut la peine pour les visiteurs et qu'il faut le soigner.
Modifié par Igor (27 Apr 2008 - 01:42)