28201 sujets

CSS et mise en forme, CSS3

[Résolu] Nav qui ne se centre pas

Bonjour,
je n'arrive pas à centrer ma barre de nav don voici le HTML :
	<nav>
	<div id="menu-sticky-wrapper">
		<ul>
			<li><a href="index.html">HOME</a></li>
			<li><a href="about.html">ABOUT</a></li>
			<li><a href="photos.html">PHOTOS</a></li>
			<li><a href="videos.html">VIDEOS</a></li>
			<li><a target="_blank" href="https://www.tumblr.com/drvonklafout">ACTU</a></li>
			<li><a href="contact/formpage.html"  target="_blank">CONTACT</a></li>
		</ul>
		</div></nav>


et les CSS :
nav {position: fixed; text-align: center; top: 80px; color: white; margin: auto 0;}
#menu-sticky-wrapper {
	width: 100%;
	min-width: 100%;
	position: relative;
	z-index: 1;
	top: 0px; margin-bottom : 0px;
text-align: center;
}
	
#menu-sticky-wrapper li a {
	margin-top: 0px;
	color: #FFFFFF;
	padding-left: 5px;
	font-size: 18px;
	line-height: 25px;
	border-left: 1px solid #b7b7b7;
	font-family: 'Chunkfive', sans-serif;
	text-decoration: none;
}
#menu-sticky-wrapper li a:hover {
	color: #FFFFFF;
}
#menu-sticky-wrapper ul {
	list-style: none;
	text-align: center;
	padding-top: 10px;
	margin-top: 0px;
}
#menu-sticky-wrapper li {
	display: inline;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#menu-sticky-wrapper li:not(:last-child) {
	margin-right: 5px;
}


Cela fait pas mal de temps que je suis sur ce problème qui m'apparaissait simple... mais pas vraiment apparemment Smiley sweatdrop

Une aide serait la bienvenue Smiley cligne

Merci beaucoup.
connecté
Modérateur
Salut,

C'est normal puisque tu utilises un positionnement en dehors du flux de données (fixed). Pour contrecarrer, il te suffit d'appliquer un left suivi d'un transform 


nav {
  position: fixed; 
  left: 50%; 
  top: 80px; 
  transform: translateX(-50%);
  color: white; 
}

Modifié par niuxe (22 Mar 2025 - 15:38)
Meilleure solution
Bonjour niuxe et tout le monde,
désolé de relancer ce topic mais maintenant j'ai un "espace" (padding ?) à gauche et à droite (voir capture). Cela va mieux avec un margin-right: -500px Smiley murf
Je ne vois pas d'où cela peut venir. Normalement, toutes les CSS ont été données plus haut( upload/1742718263-48192-capturedaeacran2025-03-23aa09.png Smiley murf
Toutes les div parentes sont à margin: 0.
Merci pour votre aide et bon dimanche Smiley cligne
Prévenir un modérateur
Répondre au sujet
Aller à