18041 sujets

Questions générales et questions de débutants

Navigation qui ne se centre pas [résolu]

Bonjour,

Petit souci avec une navigation, comme dit dans le titre, elle ne souhaite pas se positionner au centre et fait sa boudeuse en restant cloitrée sur le bord gauche ...

J'utilise "text-align : center" en css pour la positionner au centre.

Voici le code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="style.css"/>
<title>ToPo Création de sites internet et d'identité commerciale</title>
</head>
<body>
	<div class=header>
		<a href="@@@accueil"><img src="img/Logo.png" alt="Logo ToPo"></a>
		<h1>Sites Internet et Identités Commerciales</h1>
	</div>
	<div class=navigation>
		<ul id="navigation">
			<li><a href="#" title="aller à la section 1">Accueil</a></li>
			<li><a href="#" title="aller à la section 2">Sites</a></li>
			<li><a href="#" title="aller à la section 3">Imprim'</a></li>
			<li><a href="#" title="aller à la section 4">Contact</a></li>
		</ul>
	</div>
</body>
</html>


et le code CSS :

@charset "UTF-8";
/* reset css */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* fin du reset */

body {
	margin:20px;
	color: #fff;
	line-height:1.5em;
	background-color:#1e0303;
}
	
.header {
	text-align: center;
}
	
.navigation {
	padding: 0px ;
	text-align: center;
}

#navigation li {
	float: left ;
	width: 150px ;
	list-style: none outside none ;
	border: 1px solid #600 ;
	margin-right: 10px ;
	color: #fff ;
	background: #f00 ;
	text-align: center;
}
	
#navigation li a {    
	display: inline-block;
	background: #f00 ;
	color: #fff ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	padding: 4px 0 ;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	width: 150px ;
  background: #c00 ;
}


Je suppose que c'est pas grand chose, juste une étourderie ; mais depuis hier j'ai beau chercher d'où ça peut venir, je ne vois pas.
Le text-align : center apparait pourtant bien dans firebug.

PS: J'ai oublié mes lunettes, ça peut aussi participer au fait que je ne vois pas le problème Smiley langue
Modifié par mwspimiento (02 Nov 2013 - 08:11)
Sur #navigation li, le float: left; fait sortir les élément du flux donc le navigateur n'arrive plus à calculer la largeur du bloc (et donc à le centrer).

Remplace :

#navigation li {
	float: left ;
	width: 150px ;
	list-style: none outside none ;
	border: 1px solid #600 ;
	margin-right: 10px ;
	color: #fff ;
	background: #f00 ;
	text-align: center;
}


Par :

#navigation li {
	display: inline-block;
	width: 150px ;
	list-style: none outside none ;
	border: 1px solid #600 ;
	margin-right: 10px ;
	color: #fff ;
	background: #f00 ;
	text-align: center;
}

Modifié par JulienArcin (02 Nov 2013 - 07:58)
salut,
tu ne pourras pas centrer des <li> flottants, tu dois les passer ne "display:inline-block".

EDIT: archi grillé quand même ^^ même pas remarqué Smiley biggrin
Modifié par Zelalsan (02 Nov 2013 - 08:20)
Bon sur mais c'est bien sang !!!

Effectivement je ne cherchais pas du out au bon endroit ...

Merci de ta réponse (super rapide).
Sujet clos
Aller à