28172 sujets

CSS et mise en forme, CSS3

Centrage vertical d'un menu horizontal

Bonjour à tous,

Je viens aujourd'hui vous embêter avec des questions 100% débutant: Je suis en train de concevoir un menu horizontal, que je souhaiterais centrer sur ma page, en vain pour le moment Smiley decu

le code HTML de mon menu:

<div id="menu">
	<div class="container">
		<ul id="nav">
			<div class="menu-menu-container">
				<ul id="menu-menu" class="menu">
					<li><a>item 1</a></li>
					<li><a>item 2</a></li>
					<li><a>item 3</a></li>
					<li><a>item 4</a></li>
					<li><a>item 5</a></li>
					<li><a>item 6</a></li>
				</ul>
			</div>
		</ul>
	</div>
</div>


et le code CSS que je dois garder pour le moment:


.container {
	text-align: left;
	margin: 0 auto;
	width: 960px;
	position: relative; 
}

#nav li{float: left}


le résultat pour le moment:
https://lh6.googleusercontent.com/-kAGEzcJRIFA/UG75g5THynI/AAAAAAAAENw/qxXra_-qs88/s1063/Capture+d%E2%80%99e%CC%81cran+2012-10-05+a%CC%80+17.14.48.png

Mon bloc nav est donc bien centré, mais au sein du bloc nav les li sont alignés à gauche...j'ai essayé diverses méthodes (witdh fixe+margin auto, align-block...), en vain.

Si un alsanaute est inspiré je lui serais hautement reconnaissant Smiley smile Smiley ravi
re,

j'ai fait quelques modifs dans mon CSS, qui ressemble finalement à ça:

.container {
	text-align: left;
	margin: 0 auto;
	width: 960px;
	position: relative; 
}

#nav{text-align: center}

#nav li {
	display: inline-block;
	list-style: none;
}


un petit pas en avant, car j'aboutis à ça:

https://lh4.googleusercontent.com/-rVARivgUO88/UG7_OSAK1tI/AAAAAAAAEOI/dTNKSW7uOiE/s1053/Capture+d%E2%80%99e%CC%81cran+2012-10-05+a%CC%80+17.37.12.png

problème: quand je redimensionne la fenêtre, il reste un écart permanent à gauche de mon menu:

https://lh6.googleusercontent.com/-rWbNTAEqJKo/UG7_-lxKPTI/AAAAAAAAEOY/bfsb4JFOy4I/s857/Capture+d%E2%80%99e%CC%81cran+2012-10-05+a%CC%80+17.42.02.png
Sujet clos
Aller à