Discussion :

[reureureu]

Bonjour à tous,

Je souhaite réaliser un menu horizontal comme le montre ma capture ci-dessous :


Comme vous l'observerez, certains titres de menu sont sur 2 lignes. Je pensais donc simplement mettre en forme ces titres à l'aide de <br />, mais apparemment l'utilisation de ce code dans une liste de type <li> ne marche pas, et voici le résultat :


Quelqu'un a t'il une idée ? Peut-être faut-il que je ne passe pas par une liste pour réaliser mon menu ? Ou utiliser des images pour les titres ?


Voici ci-dessous mon code :


Code HTML :

Code html :

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

1
2
3
4
5
6
7
8
<ul id="navMenu">
   <li><a href="#ma_liste-1">La bible de <br />la franchise</a></li>
   <li> | </li>
   <li><a href="#ma_liste-2">Management de <br /> la franchise</a></li>
   <li><a href="#ma_liste-3">Cadre financier <br /> de la franchise</a></li>
   <li><a href="#ma_liste-3">Cadre juridique <br /> de la franchise</a></li>
   <li><a href="#ma_liste-4">Master Franchise</a></li>
</ul>

Code CSS :

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
#navMenu
{
	list-style-type: none;  /* pas de puce */
	padding-top: 0px;
	margin-top: 0px;
	padding-top: 4px; /* espace entre le menu et le haut du bandeau_menu */
}
 
#navMenu li 
{
	display: inline;
	color: #FFFFFF;
        height: 27px;
	padding: 5px; 
}
 
#navMenu li a 
{
	color: #fff ;
        font-family: Arial;
	font-size: 16px;
	text-transform: uppercase;
        text-decoration: none ;
}

Au final, je souhaite avoir un menu qui s'affiche sur toute une largeur et s'adapte à la hauteur de son contenu, comme celui-ci : http://www.australia-australie.com/

Je cherche un tutoriel à ce sujet, si quelqu'un peut m'en recommander un.

Merci d'avance !

Stéphanie