28172 sujets

CSS et mise en forme, CSS3

Titre de 2 lignes dans Menu horizontal

Bonjour à tous,

Je souhaite réaliser un menu horizontal comme le montre ma capture ci-dessous :
http://mediadream.celeonet.fr/1.jpg

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 :
http://mediadream.celeonet.fr/2.jpg

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 :

 
[b]Code HTML :[/b]

<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>

[b]Code CSS :[/b]

#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
Bonjour,
Tes liens ne sont pas bons.
Comme que li sont de type inline, il est normal que le br provoquent ce genre de désagrément, tu dois leur attribuer un display:inine-block à la place (+ vertical-align:middle). Ceci dit si je peux me permettre une remarque, tes intitulé de rubriques sont trop long. Il faudrait rassembler (soit visuellement, soit sous forme de menu déroulant) tout ce qui concerne la franchise dans un seul bloc distinct (et supprimer "de la franchise").

Pour l'adaptation en hauteur, éviter de spécifier un height mais plutôt un line-height (dans le cas ou les intitulés sont sur 1 seule ligne) en unité em (relative) pour avec les marges haute et basse augmentent en fonction de la taille du texte (si jamais il est agrandi via le navigateur en zoom texte), ou alors simplement des padding verticaux égaux en em.


Pour l'adaptation à la toute largeur avec largeurs "élastiques", il faut reproduire le comportement des tableaux comme ceci :

ul {display:table; width:100%}
li {display: table-cell}
(pas compatible sur IE7 et inférieur)
Modifié par Hermann (04 Apr 2013 - 12:32)
Bonjour Hermann,

Merci de ta réponse. Une personne d'un autre forum vient de me signaler également pour le "display:inline-block" et celà fonctionne parfaitement, je m'en souviendrai pour la prochaine fois.

Merci pour ton conseil sur la longueur des titres du site, je suis tout à fait d'accord avec toi, mais la hiérarchie fait l'impasse sur mes recommandations (si tu voyais la tête de la page d'index du site...)

Au sujet du menu déroulant que je souhaite ajouter (cf: http://www.australia-australie.com/), aurais-tu une recommandation, car après de nouvelles recherches (sur des mots tels que "menu déroulant adaptable en fonction de taille contenu" et autres variantes) ce matin, je n'ai toujours pas trouvé. Merci d'avance !

Stéphanie
Tu devrais pas avoir besoin de soumettre un problème sur 2 sites à la fois Smiley ohwell
Tu peux créer une menu déroulant uniquement en CSS mais ça ne sera jamais autant accessible qu'un menu en JS. Essaye de voir avec superfish (un plugin de jquery).
Modifié par Hermann (04 Apr 2013 - 13:23)
Sujet clos
Aller à