Discussion :

[Sofia_Korchi]

Bonsoir à tous

J'ai un petit souci sur mon menu horizontal... et pas moyen de me souvenir de la methode pour le regler (je l'ai déjà vu, je sais que ça existe mais je sais plus où ) Si quelqu'un pouvait me rafraichir la mémoire, ça serait bien gentil. merci d'avance.

je vous explique mon pb :

j'ai 2 menus horizontaux, de meme structure html, et liés au meme fichier css. Jusque là tout va bien

dans le premier, le hasard a fait que le texte contenu dans les boutons ne prenne qu'une seule ligne. le menu s'affiche comme je m'y attend, sans aucun problème.

Dans le 2eme, il y'a un bouton dont le texte s'affiche sur 2 lignes, et là.... ça donne plus du tout ce qu'on attend
Le texte "sort" du bouton mais surtout le bouton est décalé par rapport aux autres.

Comment faire pour que tous les boutons, qu'ils aient 1 ligne de texte ou 2, soient alignés ?

Je vous met ce que ça donne sur le plan visuel (j'ai fait un copier/coller des 2 menus):



mes codes html :

menu1 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	<ul id="ul_menu_top">
		<li><a href="pub_acc.php">Accueil</a></li>
		<li><a href="pg2.php">page 2</a></li>
		<li><a href="pg3.php">page 3</a></li>
		<li><a href="inscription.php">inscription</a></li>
	</ul>

menu 2 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
	<ul id="ul_menu_top">
		<li><a href="../pub/pub_acc.php">Accueil du site</a></li>
		<li><a href="clt_acc.php">Votre espace personnel</a></li>
		<li><a href="../mess/mess_acc.php">Messagerie</a></li>
		<li><a href="../../deconnection.php">Déconnection</a></li>
	</ul>

et pour finir le css du menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* bloc pour le menu_top */
#ul_menu_top {
position : fixed;
top : 65px;
left : 0px;
 
width : 70%;
height : 40px; /* taille du menu_top (càd de la barre en elle meme mais aussi des boutons si nav li a {height=100%}) */
padding:0px;
margin : 0px;
margin-left:250px;
list-style: none; /* supprime les puces de liste */
}
#ul_menu_top li {/* reglage largeur des boutons */
display:inline-block;
width: 20%; 
height : 100%;
margin: 0px;
padding :0 px;
text-align: center;
line-height : 40 px;
background-image :linear-gradient(#F1ECD6,#C4C198 );/* dégradé gris clair ->gris foncé */		
/*arrondir les  4 coins pareil (on part en haut a gauche puis on tourne dans le sens des aiguilles d'une montre)*/
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
/* fin du bloc pour arrondir les angles */
}
#ul_menu_top li a { /*reglage taille texte + couleur + ombre */
	 display : block;
	 height : 100%; /* pour que les "boutons-liens" AU REPOS fassent la meme taille que le menu_top */
	text-decoration : none;
	font-size : 20px; /*taille du texte */
	color : black;/*couleur du texte : #FFFFFF;blanc */
	text-shadow: 0px 2px 0px white;/* pour avoir un effet ombré /relief sur le texte dans les boutons */
 }
#ul_menu_top li a:hover{
		background-image :linear-gradient(#C4C198, #F1ECD6);/* dégradé gris foncé ->gris clair */
		color :#9D4329; /* couleur "rouille" des fleurs*/
		text-shadow: 0px 1px 0px white;/* pour avoir un effet ombré /relief sur le texte dans les boutons */
	/*arrondir les  4 coins pareil (on part en haut a gauche puis on tourne dans le sens des aiguilles d'une montre)*/
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;
/* fin du bloc pour arrondir les angles */
 
	 }
/* fin du bloc pour le menu_top */

Voilà... Merci d'avance a ceux qui pourront m'éclairer.

[NoSmoking]

Bonjour,
pas mal de maladresses dans ton code, et notamment la fixation d'une hauteur à ton <ul> qui est au coeur de ton problème.
Si tu la supprimes par miracle le résultat sera déjà meilleur.

Concernant le margin-left: 250px c'est également maladroit car tu casses ton centrage suivant la largeur du navigateur.
Il serait préférable de mettre un margin: 0 auto mais là encore il subsistera un problème de centrage lié à la déclaration width: 20% sur tes <li> dont la cause est liée à la déclaration du display: inline-block, tout cela t'oblige à bidouiller à cause des « whitespaces » générés.

Pour info, tu peux au jour d’aujourd’hui oublier les préfixes,comme -moz- ou -webkit-, sur les propriétés cela clarifie le code.

Une autre chose, il faut être plus rigoureux dans l'écriture, line-height: 40 px, l'espace entre la valeur et l'unité NE DOIT PAS EXISTER, car cela engendre la non prise en compte de la règle.
Si la valeur est 0 alors l'unité peut être omise.

Comme tu le vois rien de bien folichon, en gros le plus simple et de tout reprendre !

Nous sommes au XXI^éme siècle et qui plus est en HTML5, de nos jours un menu peut s'écrire simplement de la façon suivante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<nav id="nav_top">
  <a href="pub_acc.php">Accueil</a>
  <a href="pg2.php">Votre espace personnel</a>
  <a href="pg3.php">page 3</a>
  <a href="inscription.php">inscription</a>
</nav>

Il existe moultes manière de styler ce menu et je t'en propose une, sur base d'un display:table qui facilite les choses.

• Pour le conteneur <li> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
#nav_top {
  display: table;
  width: 70%;
  margin: 0 auto;
  padding: 0;
  border-collapse: separate;
  border-spacing: .5em;
}

cela reste léger il te suffira d'ajouter tes régles de positionnement.

• Concernant les liens

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#nav_top a {
  display: table-cell;
  width: 25%;
  margin: 0;
  padding: .5em;
  border-radius: 10px 10px 10px 10px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 0 white;
  font-size: 1.25em;
  vertical-align: middle;
  color: currentColor;
  background-image: linear-gradient(#F1ECD6,#C4C198);
}

Rien non plus d'extraordinaire.

• Il reste à traiter la partie :hover

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#nav_top a:hover {
  text-shadow: 0 1px 0 white;
  color: #9D4329;
  background-image: linear-gradient(#C4C198, #F1ECD6);
}

Si tu as des questions n'hésites pas, mais le code reste des plus simple

[Sofia_Korchi]

Bonjour NoSmoking et merci beaucoup pour tes indications, je vais regarder tout ça.