18041 sujets

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

Problème d'alignement d'un menu dans un bloc

Pages :
Bonjour,

j'ai un souci avec un tutoriel du site, celui qui parle des menus horizontaux et plus particulièrement de la méthode de rendu en ligne.

J'ai réussi à faire le menu mais je ne parviens pas à l'aligner exactement le menu à l'intérieur d'un bloc.
Il y a un espace sur le bord droit.

Voici le code pour que vous compreniez mon problème: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html lang="fr">
	<head>
		<title>Construction de menus simples en XHTML/CSS: menu horizontal</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css"><!--
		/*****************************************/
		/* Menu horizontal (rendu en-ligne des <li>) */
		/*****************************************/
body {
margin-top: 0;
padding: 0;
background: #999999;
font: 12px verdana, arial, sans-serif;
}
#conteneur 
{
position: absolute;
width: 780px;
left: 50%;
margin-left: -387px;
background: white;
}
#nav 
{
	margin-left: auto;
          margin-right: auto;
          width: 780px;
	list-style: none ;
	margin: 0 ;
	padding: 0 ;
}
#nav li 
{
	display: inline ;
	margin-right: 5px ;
	color: #fff ;
	background: #c00 ;
}
#nav li a 
{
	background: #c00 ;
	color: #fff ;
	font: 12px Verdana, Arial, sans-serif, "Trebuchet MS";
	font-weight: bold;
	line-height: 3em ;
	padding: 4px 29px ;
	text-align: center ;
	text-decoration: none ;
}
#nav li a:hover, #nav li a:focus, #nav li a:active 
{
	background: #999999 ;
	text-decoration: none ;
}
			--></style>
	</head>
	<body>
	
	<div id="conteneur">
		
		<ul id="nav">
			<li><a href="#" title="aller à la section 1">Accueil</a></li><li><a href="#" title="aller à la section 2">Prestations et Tarifs</a></li><li><a href="#" title="aller à la section 3">Obligations spécifiques</a></li><li><a href="#" title="aller à la section 4">Références</a></li><li><a href="#" title="aller à la section 5">Contacts</a></li></ul>
	</div>	
	</body>
</html>


Par avance merci pour votre aide.

@+

Fight
Bonjour et bienvenue sur Alsacréations Smiley smile ,

Je viens de déplacer ton sujet dans le Salon spécifique aux Tutoriels et articles Alsacréations.

Il serait bien que tu précises le tutoriel concerné (un lien).
Les li sont en affichage de type en-ligne (display: inline), donc ils se comporteront comme des span, par exemple. Pour l'alignement, il suffit de jouer sur l'alignement du texte au sein de ul (et pas pour les a Smiley sweatdrop ).
ul#nav {
	text-align: right;
	[i]ou[/i]
	text-align: center;
}

Je ne sais plus si tu as dit où exactement tu voulais aligner tes liens...
En fait, je souhaiterai qu'il n'y est pas de marges ni au gauche, ni à droite à l'intérieur du bloc que le menu prenne parfaitement toute la largueur du bloc.

Voici un aperçu explicatif : upload/10454-view.png


Merci pour votre aide.

@+

Fight
Dans ce cas, tu ne peux pas utiliser la méthode avec "display: inline" car elle ne te permet pas de dimensionner les <li>. Il faut utiliser la méthode avec les flottants.
Désolé Florent mais je ne comprends pas ton message.

Est ce que tu peux être s'il te plaît un petit plus précis?
fighter666 a écrit :
Mais avec les flottants, est ce que je peux avoir des largeurs de menu qui s'adaptent à la taille du texte?

Les flottants prendront une largeur adaptée à leur contenu si tu ne précises pas de largeur.

Mais dans ce cas-là, tu n'arriveras jamais à avoir exactement la bonne largeur ...
Ta marge blance tout à droite correspond à ceci :
#nav li {
	margin-right: 5px ;
}

Il faudrait donc supprimer cette marge pour le dernier élément du menu.

Mais que se passe-t-il si tu agrandis un peu la taille du texte ? Est-ce que tout ne t'explose pas à la figure ?

(Note tant qu'à faire : ça serait plus simple si on pouvait voir la page en ligne, ou une page de test reproduisant ce menu...)
Bon, j'ai essayé toutes les solutions que vous m'avez soumises (je vous en remercie une nouvelle fois) mais je n'ai pas réussi à résoudre mon problème.

J'ai donc jouer avec une image de fond pour permettre à mon menu de prendre toute la largeur de mon bloc.

Le rendu dans IE est impeccable. Par contre, sous Mozilla, il est légèrement différent. La hauteur de mon image de fond (un rectangle rouge en fait qui permet de combler le vide existant) est différente.

Voilà ce que cela donne : http://erik.fighter.club.fr/index.html

Quelqu'un voit-il d'où vient le problème?

Merci d'avance.

@+

Fight Smiley cligne
fighter666 a écrit :
J'ai donc jouer avec une image de fond pour permettre à mon menu de prendre toute la largeur de mon bloc.

Une simple couleur de fond (background-color) aurait largement suffit.

fighter666 a écrit :
Le rendu dans IE est impeccable. Par contre, sous Mozilla, il est légèrement différent. La hauteur de mon image de fond (un rectangle rouge en fait qui permet de combler le vide existant) est différente.

Si "#nav li" et "#nav li a" sont des éléments de type en-ligne (ou plutôt : s'ils sont déclarés comme tels), rajouter des padding-top et padding-bottom à ces éléments augmentera la taille des éléments, mais pas pour autant celle du conteneur. Le conteneur (ul#nav) devra donc avoir un padding égal à celui des liens.

Je me suis un peu amusé à produire une version plus propre et moins bricolée de ta feuille de style (il y avait des propriétés qui ne servaient à rien qui trainaient dans tous les sens...). Je peux expliquer certains détails si besoin (ça serait même, pédagogiquement, plus intéressant). Voilà ce que ça donne :
html {font-size: 100%;}
body {
	font-size: .8em;
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	background: #999;
	color: white;
}
#conteneur {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	background: white;
	color: black;
}
#header {
	height: 200px;
	background: url("images/header.png") no-repeat;
}
#nav {
	margin: 16px 0 20px 0;
	padding: 4px 4px;
	list-style: none;
	text-align: center;
	color: white;
	background: #c00;
}
#nav li {
	display: inline ;
	margin: 0 2px ;
}
#nav li a {
	background: #c00;
	color: #fff;
	font-weight: bold;
	padding: 4px 25px;
	text-decoration: none;
}
#nav li a:hover,
#nav li a:focus,
#nav li a:active {
	background: #999;
}

Modifié par Florent V. (18 Jan 2007 - 23:03)
Merci Florent pour ce petit cours particulier en ligne très utile ma foi notamment concernant le css pour le conteneur avec margin-left et right.

Oui j'ai quelques questions :

a écrit :
html {font-size: 100%;}


Cela veut dire quoi quand tu écris cela comme cela?

Pourquoi as-tu supprimer la div Menu? Elle n'était pas nécessaire?

Pour être sûr de ne pas me tromper,
a écrit :
margin: 16px 0 20px 0;


cela veut bien dire marge externe de 16px en haut, 0px à droite, 20px en bas et 0px à gauche?

Enfin, le rendu avec le code que tu as retravaillé donne çà :

upload/10454-view.png

C'est pas tout à fait normal non? Smiley eek
fighter666 a écrit :
html {font-size: 100%;}

Cela veut dire quoi quand tu écris cela comme cela?

C'est une petite subtilité. Théoriquement, cette déclaration n'est pas indispensable, mais ça permet d'éviter un bug d'IE 6 se produisant lors du redimensionnement du texte.
Si par ailleurs le dimensionnement du texte avec l'unité relative EM te semble étrange, je pense que tu apprécieras cet article :
Typographie web : gérer la taille du texte avec les « em ».

fighter666 a écrit :
Pourquoi as-tu supprimer la div Menu? Elle n'était pas nécessaire?

Oui, on a déjà un conteneur pour le menu, et c'est la liste ul. Rajouter une div pour englober le tout ne me semble pas indispensable (par contre, pour que ça marche correctement avec la feuille de style que je propose il faudrait supprimer la div en question, en ne gardant que son contenu...).

fighter666 a écrit :
Pour être sûr de ne pas me tromper, 
margin: 16px 0 20px 0;

cela veut bien dire marge externe de 16px en haut, 0px à droite, 20px en bas et 0px à gauche?

Tout à fait.
Pour information, la notation margin: 1em 0; que l'on retrouve souvent est l'équivalent de margin: 1em 0 1em 0;. Si tu avais eu la même marge en haut et en bas, disons 18px, on aurait pu écrire simplement : margin: 18px 0;.

fighter666 a écrit :
Enfin, le rendu avec le code que tu as retravaillé donne çà :
upload/10454-view.png
C'est pas tout à fait normal non? Smiley eek

Hmm... j'ai dû mal évaluer la taille du texte à un moment. Smiley sweatdrop
Proposition de correction.

Disons que l'on part d'un fichier HTML propre :
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Construction de menus simples en XHTML/CSS: menu horizontal</title>
<link rel="stylesheet" type="text/css" href="index.css" media="screen">
</head>
<body>
<div id="conteneur">
	<div id="header">
	<h1>Les grandes lignes en matière de Compta</h1>
	</div>
	
	<ul id="nav">
		<li><a href="#">Accueil</a></li>
		<li><a href="http://erik.fighter.club.fr/prestations.htm">Prestations&nbsp;et&nbsp;Tarifs</a></li>
		<li><a href="http://erik.fighter.club.fr/obligations.htm">Obligations&nbsp;spécifiques</a></li>
		<li><a href="http://erik.fighter.club.fr/references.htm">Références</a></li>
		<li><a href="http://erik.fighter.club.fr/contact.htm">Contacts</a></li>
	</ul>
</div>
</body>
</html>

(note : on remarquera quelques modifications : l'ajout du titre manquant dans l'en-tête, l'ajout d'espaces insécables pour les items du menu dont le texte est en plusieurs mots, afin qu'en cas de passage à la ligne un même item de menu ne se retrouve pas découpé sur deux lignes).

Et la CSS corrigée qui va avec :
html {font-size: 100%;}
body {
	font-size: .8em;
	font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
	background: #999;
	color: white;
}
#conteneur {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	border: solid #999; 
	border-width: 1px 0; /* évite la fusion des marges */
	background: white;
	color: black;
}
#header {
	height: 200px;
	background: white url(images/header.png) no-repeat;
	/* note : je ne suis plus tout à fait sûr du chemin vers l'image... */
}
#header h1 {
	margin: 0; /* on supprime les marges pour éviter la fusion des marges avec le bloc parent */
	font-size: .8em; /* on réduit drastiquement la taille du texte */
	color: #c00; /* couleur pour se « fondre » dans l'image de fond */
}
#nav {
	margin: 16px 0 20px 0;
	padding: 4px [b]0[/b];
	list-style: none;
	text-align: center;
	color: white;
	background: #c00;
}
#nav li {
	display: inline ;
	margin: 0 2px ;
}
#nav li a {
	color: #fff;
	font-weight: bold;
	padding: 4px 16px; /* réduction du padding latéral pour gagner un peu de place */
	text-decoration: none;
}
#nav li a:hover,
#nav li a:focus,
#nav li a:active {
	background: #999;
}

Cela devrait faire l'affaire.

Autre modification : j'ai supprimé la couleur de fond des liens. Aussi, quand les liens passeront sur deux lignes (car on ne peut pas empêcher les utilisateurs d'agrandir le texte si ça leur chante ou s'ils en ont besoin), et si les boites des liens se chevauchent légèrement, la couleur de fond des liens du bas ne viendra pas cacher une partie du texte des liens du haut. Sauf au survol, bien sûr, où là on a à nouveau une couleur de fond pour les liens.

J'ai réduit le padding de gauche et de droite sur les liens, ainsi que le padding latéral sur ul#nav, afin de gagner un peu de place en largeur.

Aux dernières nouvelles, ça passe bien avec Opera, Firefox, Konqueror et IE 6 (pas testé avec IE7, mais il ne devrait pas y avoir de problème).
Modifié par Florent V. (22 Jan 2007 - 17:20)
Salut Florent,

désolé pour ma réponse tardive (depuis vendredi matin) mais la gastro m'a attrappée ce week-end alors à part dormir, j'ai pas fait grand chose, sauf depuis ce matin de très bonne heure où j'ai terminé la page d'acceuil du site en ajoutant une animation flash des liens et des infos.

J'ai modifié toutes les choses que tu m'as indiquées.

J'ai supprimé par contre

a écrit :
border-width: 1px 0; /* évite la fusion des marges */

car çà avait l'air de poser problème, le menu disparaissait.

Merci pour l'infos H1 dans le header. Que penses tu de la solution d'utiliser text-indent? Bonne solution ou bidouillage?

J'ai augmenté également le padding latéral pour que le menu prenne la plus grande largeur possible.

Si j'ai mal fait quelque chose ou commis des erreurs de code, n'hésite pas à me le dire car je débute et je trouve le xhtml et le css passionnant.

Je te remercie pour ton aide.

@+

Fight Smiley cligne
Modifié par Florent V. (22 Jan 2007 - 17:21)
fighter666 a écrit :
J'ai supprimé par contre
border-width: 1px 0; /* évite la fusion des marges */

car çà avait l'air de poser problème, le menu disparaissait.

Si tu avais copié-collé le code avec le [ b] qui trainait au début, c'est une erreur du forum qui a du mal à gérer une succession de passages en gras. Avec juste le code CSS border-width: 1px 0;, ça devrait être mieux.

fighter666 a écrit :
Merci pour l'infos H1 dans le header. Que penses tu de la solution d'utiliser text-indent? Bonne solution ou bidouillage?

C'est une solution relativement satisfaisante. Le nec plus ultra pour l'accessiblité, c'est l'image de contenu directement dans le code HTML, avec un attribut alt (texte alternatif) correctement renseigné.
Par ailleurs, attention aux éléments positionnés en absolu quand ce type de positionnement n'est pas strictement nécessaire (et de préférence maitrisé !). Si on augmente la taille du texte sur http://erik.fighter.club.fr/index.html , le texte passe en dessous des éléments positionnés en absolu, au lieu de les repousser.
Pages :
Sujet clos
Aller à