28172 sujets

CSS et mise en forme, CSS3

Centrage des liens dans un menu suivant différentes polices

Bonjour, J'ai un soucis quand je change de police mes liens contenu dans le menu ne son plus centré je voulais savoir si'il était possible de remédier à sa avec un "margin: auto" ou autre ?

Voici tout en image :

Code css : 
body
{
	background-image: url("http://img11.hostingpics.net/pics/285570Background.png") ;
	background-position: top left ;
	background-repeat: no-repeat ;
}




#menu
{
	background-image: url("http://img11.hostingpics.net/pics/919989headerfond.png") ;
	box-shadow: 0px 0px 12px #2b2828;
	width: 731px ;
	height: 50px ;
	margin: auto ;
}

#menu ul
{
	margin: auto ;
	width: 700px ;
	height: 50px ;
	padding-left: 20px ;
	padding-right: 0 ;
}

#menu ul li
{
	list-style-type: none ;
	float: left ;
	line-height: 50px;
}

#menu ul li a
{
	color: #9f9d9d ;
	text-decoration: none ;
	font-family: Tekton Pr, Verdana, Arial, Helvetica, Sans-Serif ;
	font-size: 1.3em; 
	padding: 0 14px ; /*espace entre les liens*/

}

#menu ul li a:hover
{
	color: #cdcaca ;
}

#article1
{
	background-image: url("http://img11.hostingpics.net/pics/775257Sousheaderfond.png") ;
	box-shadow: 0px 0px 10px #2b2828;
	background-position: top 10px ;
	background-repeat: no-repeat ;
	width: 732px ;
	height: 226px ;
	margin-top: 20px ;
	margin: auto ;
}

#images ul li
{
	list-style-type: none ;
	float: left ;
	margin-left: -13px ;
	margin-right: 33px ;
	margin-top: 11px ;
	border: no ;
}

#images ul li img
{
	border: 0 ; /*enlève bordure autour des images en lien sur IE*/
}

#lien5
{
	width: 10px ; /*Pour pas que la dernière image saute en dessous*/
}

.lien1 img:hover
{
	filter: alpha(opacity=90) ; 
	opacity: 0.7 ;
}


Code html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="idée.css" />
        <title>Test</title>
    </head>

<body>
		<div id="bloc_page">
			<header>	
					<nav>
						<div id="menu">
							<ul>
								<li><a class="inter"><a href="#">Accueil</a></li>
								<li><a class="inter"><a href="#">Photos</a></li>
								<li><a class="inter"><a href="#">Produits</a></li>
								<li><a class="inter"><a href="#">Divers</a></li>
								<li><a class="inter"><a href="#">Contact</a></li>
							</ul>
						</div>
					</nav>
			</header>
			<article>
				<div id="article1">
					<nav>
						<div id="images">
							<ul>
								<li class="lien1"><p><a href="#"><img alt="Iron Man 3" title="Iron Man 3" src="http://img11.hostingpics.net/pics/299937IM3.png" /></a></p></li>
								<li class="lien1"><p><a href="#"><img alt="Thor 2" title="Thor 2" src="http://img11.hostingpics.net/pics/71950251T.png" /></a></p></li>
								<li class="lien1"><p><a href="#"><img alt="Man of Steel" title="Man of Steel" src="http://img11.hostingpics.net/pics/764274MOS.png" /></a></p></li>
								<li class="lien1"><p><a href="#"><img alt="Anssel et Gretel" title="Anssel et Gretel" src="http://img11.hostingpics.net/pics/660697AeG.png" /></a></p></li>
								<li class="lien1" id="lien5" ><p><a href="#"><img alt="Moi moche et méchant" title="Moi moche et méchant" src="http://img11.hostingpics.net/pics/169468MBeM.png" /></a></p></li>
							</ul>
						</div>
					</nav>
				</div>
			</article>
		</div>
</body>
</html>


Image du rendu :
upload/50417-Image.png

Merci de vos futur réponses ! Smiley smile
il faut fixer la largueur de chaque lien dans les li


#menu li a{
 display:block;
 width:100px; /*comme tes vignettes */
height:50px;
line-height:50px; 
text-align:center;
}
Sujet clos
Aller à