Centrage de menu a "portes coulissantes" dynamique

Voila, j'ai un site qui a une largeur de 100%, avec un menu en tabs qui utilise la technique des portes coulissantes. Les tabs sont dynamiques et on a pas le meme nombre a chaque fois.
Mon probleme est que je n'arrive pas a le centrer horizontalement vu que je n'arrive pas a connaitre par avance la largeur de ce menu.

#pg_header {
	float:left;
	width:100%;
        line-height:1em;
	text-align: center;
	color: White;
	font-size: 9px !important;
	font-weight: bold;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#pg_header ul {
position:relative;
  margin: 15px 0 0 0;
   padding: 0;
width: 100%;
   list-style:none;
	
 }

#pg_header li {
   float:left;
   background:url(/images/csstabs/left.gif) no-repeat left top;
   margin:0 -1px 0px 0px; /* space between tabs */
   padding:0 0 0 7px;
}

HTML

<div id="pg_header">
<ul>
		<li id="first" style="margin-left:0px;">
			<span><a href="http://www.greg.pricegrabber.com?topcat_id=0&channel=0" class="padlink">Home</a></span></li>
		<li id="current1">
			<span><a href="/home_comp.php/topcat_id=1/channel=0" class="padlink">Computers</a></span></li>
		<li id="">
			<span><a href="/home_photo.php/topcat_id=11/channel=0" class="padlink">Photo</a></span></li>
		<li id="">
			<span><a href="/home_elec.php/topcat_id=2/channel=0" class="padlink">Electronics</a></span></li>
		<li id="">
			<span><a href="/home_garden.php/topcat_id=15/channel=0">Home &amp;<br /> Garden</a></span></li>
		<li id="">
			<span><a href="/home_movies.php/topcat_id=4/channel=0" class="padlink">Movies</a></span></li>
</ul>
</div>

Ce n'est qu'une partie du code css et html mais bon tout ca pour dire que je ne vois pas comment centrer ce menu dans la page. Le text-align:center ne fait rien. Si j'enleve le float:left du pg_header ca pete les onglets donc je peux pas l'enlever et d'ailleurs ca ne semble pas changer le positionement qd j'ai essayé...

Merci d'avance.

non car aucun n'a la meme largeur, les mots n'ont pas le meme nombre de lettres, je sais pas si l'utilisateur aura zoomé sur sa page ect... donc impossible a savoir malheuresement...

Pour centrer des éléments dont on ne connait pas la largeur totale, le seul moyen correctement implémenté c'est le display: inline, qui ne permet hélas pas de mise en forme précise des « blocs » (vu que justement ce ne sont pas des blocs en display: inline).

L'idéal serait de pouvoir utiliser display: inline-block, non implémenté dans Firefox et mal implémenté dans IE.

gcyrillus proposait récemment une technique ou l'on combinait un display: table-cell pour Firefox et un display: inline-block pour les autres navigateurs (ce qui demande de prendre en compte le fait qu'IE le gère bizarrement). C'est un peu tarabiscoté, mais c'est à priori assez robuste.
http://forum.alsacreations.com/topic.php?fid=4&tid=20203

Sinon, plus simplement, il me semble qu'il est possible d'utiliser un tableau (centré avec un align="center" ?... peut-être valide en Transitional). Il suffira, pour l'accessibilité, d'indiquer :

<table summary="Menu de navigation">...

Et de ne pas mettre de cellules vides, bien sûr.

Utiliser un tableau ne sera pas un problème d'accessibilité, par contre ça peut être un problème pour valider le site (mais bon, malgré son utilité la validation n'est pas nécessairement une fin en soi...) ou pour la maintenance du site (un changement de mise en forme demandera un changement du code HTML dans les templates).

Bonjour,

Je ne suis pas d'accord avec

<table summary="Menu de navigation">...

Qu'est-ce que le summary va apporter ici ? Pour moi, l'utilité de cet attribut, c'est justement de décrire les tableaux qui représentent des données tabulaires. A mon avis, il faut éviter tous les éléments et attributs sémantiques quand on utilise un tableau pour la mise en page.

Eldebaran a écrit :
Bonjour,

Je ne suis pas d'accord avec

<table summary="Menu de navigation">...

Qu'est-ce que le summary va apporter ici ? Pour moi, l'utilité de cet attribut, c'est justement de décrire les tableaux qui représentent des données tabulaires. A mon avis, il faut éviter tous les éléments et attributs sémantiques quand on utilise un tableau pour la mise en page.

« Menu de navigation » est une information sur le statut de ce groupe d'éléments, information transmise visuellement par une mise en forme que l'on espère « universellement » comprise, à savoir un système visuels d'onglets et le fait de positionner cet élément en dehors du cadre visuel du contenu principal. Ça ne me choque donc pas de la transmettre également via l'attribut summary, à moins bien sûr que l'on préfère passer par un titre de section (ce qui a également l'avantage de permettre à un aveugle d'accéder rapidement au menu de navigation, via l'indexation des titres de niveau).
Modifié par mpop (06 Dec 2006 - 13:10)

mpop a écrit :
« Menu de navigation » est une information sur le statut de ce groupe d'éléments, information transmise visuellement par une mise en forme que l'on espère « universellement » comprise, à savoir un système visuels d'onglets et le fait de positionner cet élément en dehors du cadre visuel du contenu principal. Ça ne me choque donc pas de la transmettre également via l'attribut summary, à moins bien sûr que l'on préfère passer par un titre de section (ce qui a également l'avantage de permettre à un aveugle d'accéder rapidement au menu de navigation, via l'indexation des titres de niveau).

Oui c'est vrai, ça se défend.

Ceci dit, je préfère la seconde solution que tu évoques, avec un titre de section.

En terme d'accessibilité un tableau de présentation (A ne pas confondre avec un tableau de données) doit avoir un summary vide : summary=""


(idem pour les images de présentation, l'aternative doit également être vide alt="") Les éléments de présentation n'apportant que peut d'intêret à une personne non voyante.

Se référer au guide accessiweb :

http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-5-1.html
Modifié par Netrunner (08 Jan 2007 - 16:33)

Netrunner a écrit :
En terme d'accessibilité un tableau de présentation (A ne pas confondre avec un tableau de données) doit avoir un summary vide : summary=""

Merci pour ton explication, mais je ne suis pas certain qu'elle ait un intérêt au vu de la discussion précédente.

Il me semble que si justement (même si j'ai lu en diagonale).
J'ai lui qu'on parlait de menu, de tableau et d'accessibilité.

Donc si le seul but d'un tableau est de centrer un menu, ce tableau n'est pas un tableau de données mais un tableau de présentation (ou mise en page).
Dans ce cas, on place un summary vide.

Netrunner a écrit :
Il me semble que si justement (même si j'ai lu en diagonale).
J'ai lui qu'on parlait de menu, de tableau et d'accessibilité.

Avant de participer à une discussion, il me semble courtois de lire plus qu'"en diagonale" (surtout que tu récidives).

mpop a écrit :
« Menu de navigation » est une information sur le statut de ce groupe d'éléments, information transmise visuellement par une mise en forme que l'on espère « universellement » comprise, à savoir un système visuels d'onglets et le fait de positionner cet élément en dehors du cadre visuel du contenu principal. Ça ne me choque donc pas de la transmettre également via l'attribut summary, à moins bien sûr que l'on préfère passer par un titre de section (ce qui a également l'avantage de permettre à un aveugle d'accéder rapidement au menu de navigation, via l'indexation des titres de niveau).

Si tu veux que je recopie le reste des interventions, fais-moi signe, je suis là pour ça.

Merci pour la morale. C'est une habitude générale sur les forums en ce moment.

Puisqu'on joue au jeu des citations, dans ce cas, explique moi celle-ci :

mpop a écrit :
Sinon, plus simplement, il me semble qu'il est possible d'utiliser un tableau (centré avec un align="center" ?... peut-être valide en Transitional). Il suffira, pour l'accessibilité, d'indiquer :
<table summary="Menu de navigation">...

Car c'est sur celle-ci que j'intervenais. Au delà du fait d'avoir lu en diagonale, je l'ai peut être mal interprétée.
Modifié par Netrunner (09 Jan 2007 - 12:24)