Problème de centrage list

Bonjour à tous,

Je viens vous voir pour un petit problème d'alignement de listes en ligne qui me sert de menu. Tout d'abord, voilà le code qui fait apparaître le menu sur la page :

<div id="top">
<ul>
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
</ul>
</div>

Et le code compris dans la feuille de styles:

#top 
{ 
	background-image: url(Banner.png);
	background-repeat: no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	width: 799px;
	height: 85px;
	border-radius: 25px 25px 0 0;
}

#top ul
{
	list-style-type:none;
	text-decoration: bold;
	font-size: 90%;
	color: #008EA6;
}

#top li 
{ 
	display: inline; 
	background: none; 
}

#top a
{
	color: #008EA6;
	text-decoration: none;
}

Comme vous pouvez le constater, le menu est inscrit dans une bannière fixe avec une image de fond d'écran.
Le problème, c'est que les liens ne se centrent jamais (toujours décalés, soit à droite, soit à gauche...)

J'y ai passé un temps fou et ai essayé un certain nombre de techniques vues ici et ailleurs et je n'y arrive pas...

Si l'un d'entre vous pouvez m'aider, ce serait grandement apprécié !

Merci par avance!!!

Bonjour,

Je n'ai pas compris ce que tu souhaitais obtenir au final. Un petit visuel peut-être ?

Désolé, en effet, je n'étais pas clair.

L'objectif est de centrer les textes du lien qui sont compris dans la liste. Ces derniers se trouvent toujours soit décalés à gauche, soit à droite. Jamais au centre.

J'essaierai de faire un screenshot plus tard si j'ai le temps !

Merci beaucoup

Il semble que le text-align: center; devrait être affecté au LI, en s'arrangeant pour que le UL soit centré dans son bloc (avec un margin auto par exemple)

Hope it helps...
Modifié par BeautifulWeb (16 May 2014 - 13:53)

bendaoc a écrit :
Bonjour à tous,

Je viens vous voir pour un petit problème d'alignement de listes en ligne qui me sert de menu. Tout d'abord, voilà le code qui fait apparaître le menu sur la page :

<div id="top">
<ul>
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
<li>.</a></li>&nbsp;&nbsp;¤
</ul>
</div>

Bonjour,

est ce une erreur de copier coller ? Le code HTML que tu presente n'est pas valide.
1) liens incomplet.
2) <ul> ne peut avoir que des <li> comme enfants, rien d'autre, pas même du texte !.

Pour les ul et li, as tu fait un raz sur les marges internes et externes ?

#top ul
{
	list-style-type:none;
	text-decoration: bold;
	font-size: 90%;
	color: #008EA6;
  margin:0;
  padding:0;
}

Pour les textes , ou puce de liste que tu cherches a personnalisée , tu peut te servir de d'un pseudo element ou simplement inserer ce texte au coté du lien .

<div id="top">
<ul>
<li><a>.</a>&nbsp;&nbsp;¤</li>
</ul>
</div>

les espaces insécables peuvent être remplacés par une marge.
++