28173 sujets

CSS et mise en forme, CSS3

Peut-on avoir un menu horizontal centré avec des <li> flottants

Bonjour,

malgré ma bonne volonté et vos supers tutos, je ne parviens pas à faire la même ICI (menu horizontal avec la méthode des items flottants) avec un centrage horizontal de celui-ci...

Alors pour commencer : est-ce possible ??? Smiley murf parce que là je tourne en rond... Smiley fache

Voici mon code :
<!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>
<title>test menu horizontal centré</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	#page {
		text-align: center;
		background:url(images/page_bg.gif) center #7F7F7F repeat-y;
	}
	#menu {
		border: 3px solid #FF0000;
	}
	#menu ul li {
		list-style-type: none;
		display: block;
		float: left;
		background-color: #900;
	}
	#menu ul li a {
		display: block;
		width: 8em;
		height: 3em;
		color: #000000;
		text-decoration: none;
	}
	#menu ul li a:hover {
		background-color: #800;
	}
</style> 
</head>
<body>

<!-- La page -->
<div id="page">
	
	<!-- L'entête de page -->
	<div id="header">Entête</div>  

	<!-- Le menu -->
	<div id="menu">
		<ul id="menuliste">
			<li><a href="#">Accueil</a></li>
			<li><a href="#">Présentation</a></li>
			<li><a href="#">Les évènements</a></li>
			<li><a href="#">Les alentours</a></li>
			<li><a href="#">Tarifs et réservations</a></li>
			<li><a href="#">Nous contacter</a></li>
		</ul>
	</div>

</div>

</body>
</html>


Donc comment centrer ce menu horizontalement ?

Question bonus : pourquoi ma bordure de menu n'est pas autour du menu !!!

Merci d'avance... Smiley langue
@+ Smiley cligne
Modifié par Tchupacabra (20 Jan 2007 - 20:40)
Tchupacabra a écrit :
Donc comment centrer ce menu horizontalement ?

Soit tu connais le nombre d'éléments exact du menu et la largeur exacte de chaque élément, auquel cas tu pourras le centrer via la technique des marges automatiques (chercher dans les tutoriels d'Alsacréations, il y a un tuto qui en parle).
Soit le nombre d'items dans le menu est variable, ou bien la largeur d'un item de menu est variable, et dans ce cas ça n'est pas centrable si on utilise des flottants.

Tchupacabra a écrit :
Question bonus : pourquoi ma bordure de menu n'est pas autour du menu !!!

C'est une question ou une exclamation ? Smiley hum

À vrai dire, vu que l'on ne peut pas voir où cette bordure se place dans l'état actuel des choses, je pencherais à vue de nez pour un problème de dépassement de flottants.
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Bonjour,

Je radote un peu, je sais, mais... c'est un cas type d'utilisation fondée d'un tableau de présentation, permettant de régler la question immédiatement et sans aucune conséquence rédhibitoire Smiley ravi
Salut.

Dans le tuto, à propos des flottants :
a écrit :
Par contre, ils sont sortis du flux de la page, et la propriété text-align n'aura plus d'effet sur eux


et pour l'autre méthode :
a écrit :
Cette méthode permet de réaliser facilement un menu de navigation aligné à droite ou centré


Laurent Denis a écrit :
Je radote un peu, je sais, mais... c'est un cas type d'utilisation fondée d'un tableau de présentation, permettant de régler la question immédiatement et sans aucune conséquence rédhibitoire
En attendant le support de "inline-block" ... Smiley zzzz Smiley smile
Laurent Denis a écrit :
Je radote un peu, je sais, mais... c'est un cas type d'utilisation fondée d'un tableau de présentation, permettant de régler la question immédiatement et sans aucune conséquence rédhibitoire Smiley ravi

+1
Bonjour et merci à tous ! Smiley cligne

j'ai donc finalement solutionner mon problème grâce à vous ! Smiley biggrin
Par contre, j'ai pas bien compris ton message Laurent Denis... Smiley ohwell 

#menu {
	border: 1px solid #FF0000;
	/* méthode 1 : centrage horizontal via les marges automatiques */
	width: 880px;
	margin-left: auto;
	margin-right: auto;
}


Encore merci pour le lien vers le tuto Florent V. Smiley smile

Malheureusement, je n'ai pas tout à fait terminé avec mon menu...
J'aimerais centrer verticalement le texte de mes liens. J'ai pensé au line-height mais certains liens ont un <br /> Smiley decu 
#menu ul li a {
	display: block;
	width: 110px;
	height: 80px;
	/*line-height:80px;*/
	color: #000000;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
}

Comment faire alors ?
Merci d'avance.

Smiley fache c'est vraiment pas commode cette gestion des alignements verticaux...
Laurent Denis a écrit :
c'est un cas type d'utilisation fondée d'un tableau de présentation, permettant de régler la question immédiatement et sans aucune conséquence rédhibitoire Smiley ravi
Bonjour,
Ton message n'est pas très clair ("un cas type d'utilisation fondée d'un tableau" ?!) mais je vois où tu veux en venir, et je dois dire que je ne suis personnellement pas du tout d'accord avec ce que tu proposes! En effet, l'utilisation d'un tableau faciliterait la mise en page et, en effet, il ne causerait aucun soucis d'accessibilité ou autre. Pourtant, il va tout à fait à l'encontre d'un balisage sémantique approprié: il s'agit bien d'une liste de liens et non de données tabulaires. Pour moi, le tableau n'a ici tout simplement pas sa place.

Cordialement,
Benjamin
Tchupacabra a écrit :
Smiley fache c'est vraiment pas commode cette gestion des alignements verticaux...

Une raison de plus d'utiliser un tableau, alors.

Bien sûr les CSS permettent de gérer ça même avec une liste non ordonnée (ul), grâce à display: table, mais en l'absence de support par Internet Explorer il faudra se contenter d'un tableau.
Bonsoir,

Benjamin D.C. a écrit :
Pourtant, il va tout à fait à l'encontre d'un balisage sémantique approprié


Pour être tout à fait explicite: la sémantique en question est un fantasme, gratifiant, certes, pour le webmaster amateur dans son coin. Mais un fantasme qui ne fait pas avancer d'un iota le Web sémantique (Remarquez, et c'est important: elle ne lui nuit pas d'un quart de pet non plus).

Il faut retirer une bonne fois pour toutes le mot sémantique des discussions sur le HTML4.01 / XHTML1.0.

A ce stade, elle (la Chémantique) est en effet d'une telle pauvreté et d'une telle maladresse qu'elle est inexistante. Ce n'est pas tout à fait pour rien que le Web sémantique fait appel à de toutes autres technologies Smiley cligne

Concentrons-nous plutôt sur un problème pertinent pour l'instant, qui est l'accessibilité. Les solutions Sémantiques aka CSS aka j'ai un blog sur les standards aka je lis tout linux.fr aka d'autres choses que je lis plus depuis longtemps ont bêtement tendance à :
- être coûteuse
- ne pas être robustes
- ne pas être accessible
- n'avoir qu'une conformité de pure forme.

Heu... Vous savez que, de cette manière, vous ferez aisément le tri entre sémantique supposée et sémantique opérationnelle, dans le HTML ? Tentant, non ? Smiley ravi

Voilà voilà... C'est évidemment moins gratifiant que d'autres choses, mais c'est plus utile.
Modifié par Laurent Denis (22 Jan 2007 - 18:43)
zzzazzz a écrit :
J'ai essayé de voir si c'était possible, ca l'est en utilisant des largeurs fixes, ici <ul> doit être égale à la somme des largeurs des liens <a>. J'ai testé seulement sur IE et FF, et j'ai le même comportement.

Centrer horizontalement un menu sous certaines conditions

Une variante sans fixer la largeur, avec un padding

Restera alors le problème du centrage vertical de textes dont on ne peut pas savoir à l'avance s'ils occuperont une ou deux lignes (voire trois ou quatre en augmentant la taille du texte sensiblement)...

Une contrainte de mise en forme qui plaide en faveur du... tableau de mise en forme.
Sujet clos
Aller à