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 :
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_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>
et pour finir le css du menu :
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>
Voilà... Merci d'avance a ceux qui pourront m'éclairer.
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 */
Partager