Balise <nav><ul><li>

Bonjour à tous,

Je viens vers vous pour éclairer mes lumières

J'ai un menu en ligne qui est dans mon header et j'aimerais savoir comment centrer mes balises <li> sur la largeur de la fenetre du navigateur (et que celles-ci s'adaptent), j'ai testé avec des padding-left et right mais je ne trouve pas que ce soit propre.

    	<nav id="nav_menu">
        	<ul>
            	<li><a class="titre_menu" href="#" ><h5>SECTION 1</h5><p>Lègende sélection</p></a></li>
            	<li><a class="titre_menu" href="#" ><h5>SECTION 2</h5><p>Lègende sélection</p></a></li>
            	<li><a class="titre_menu" href="#" ><h5>SECTION 3</h5><p>Lègende sélection</p></a></li>
            	<li><a class="titre_menu" href="#" ><h5>SECTION 4</h5><p>Lègende sélection</p></a></li>
            	<li><a class="titre_menu" href="#" ><h5>SECTION 5</h5><p>Lègende sélection</p></a></li>
            </ul>
        </nav>

@charset "UTF-8";
/* CSS Document */

body {
	margin: 0;
	background-color:#F8F7F6;
}

@font-face {
	font-family: 'HaginCapsMedium';
	src: local('HaginCapsMedium'), ('HaginCapsMedium')
	url('typo/HaginCapsMedium.otf') format('opentype');
}

header {
	background-color:#F8F7F6;
    box-shadow: 0 3px 1px 1px #F2F1F1;
    height: 125px;
    position: fixed;
    width: 100%;
    z-index: 10;
}

#nav_menu {
    display: inline-block;
    text-align: center;
    width: 100%;
}

ul {
	height:125px;
	margin:0;
}


li {
	float: left;
    color: #262727;
	font-family: "HaginCapsMedium", "Arial", "Helvetica", "sans-serif";
	font-size: 13px;
	width:10%;
	padding-top:30px;
	border-top:solid 10px #D73C52;
	list-style: none outside none;
}

.titre_menu {
	color:#000;
	font-family: "HaginCapsMedium", "Arial", "Helvetica", "sans-serif";
	font-size: 13px;
	text-decoration: none;
}

h5 {
	color: #262727;
	font-family: "HaginCapsMedium", "Arial", "Helvetica", "sans-serif";
    font-size: 13px;
	margin: 0;
}

P {
		margin: 0;

}

Quelqu'un aurait une piste? Merci
Modifié par H.I.M (18 Oct 2012 - 19:04)

Hello

Tu cherches vraiment très compliqué, un simple

ul{
 text-align:center; 
}

ul li{
 display:inline-block; 

suffit pour afficher les listes les unes à côté des autres, et les centrer au milieu (je te laisse adapter le reste pour avoir ton rendu graphique)