HTML / CSS titre d'un menu sur 2 lignes
Bonjour,
J'aurais besoin d'une petite astuce.
Dans le site que je suis en train de concevoir, j'ai des noms de menu assez longs.
J'ai un menu qui s'appelle Qui sommes-nous et j'aurais aimé le mettre sur deux lignes c'est à dire mettre le sommes-nous en dessous du qui. J'ai essayé de donner une largeur à mon <li> mais il n'y a aucun changement.
Qui aurait une solution à me proposer ?
Merci d'avance.
Kat.
J'aurais besoin d'une petite astuce.
Dans le site que je suis en train de concevoir, j'ai des noms de menu assez longs.
J'ai un menu qui s'appelle Qui sommes-nous et j'aurais aimé le mettre sur deux lignes c'est à dire mettre le sommes-nous en dessous du qui. J'ai essayé de donner une largeur à mon <li> mais il n'y a aucun changement.
Qui aurait une solution à me proposer ?
Merci d'avance.
Kat.
10 réponses
-
La solution de 09:32 le 22 mars ne fonctionne pas? Ici j'arrive à avoir un menu horizontal sur deux lignes. Après il faut adapter les dimensions (i.e. width : 440px; height : 25px) ou encore en jouant sur l'espacement des menus (i.e. padding : 0 0.5em) pour obtenir le résultat que tu souhaites.
Qu'est-ce qui bloque?
On va y arriver! =)
-
HA? Alors continuons!
Qu'est-ce qui "merdoit"? -
@katarina: Si cela te convient, c'est cool!^^
Merci d'ajouter "résolu" dans ton titre.
Bonne soirée ;)
Cordialement. -
En bien tu peut faire ça ...
<div><div>Qui</div><div>Sommes-nous</div></div>
www.me-too.fr
-
ajoute un style CSS sur tes balises <a> avec comme attribut :
display: block;
et couplé avec les <BR<, ca ne devrait plus décaler-
non ça ne fonctionne pas mais ça m'a donné une envie de m'y remettre! ^^
Alors pour le html:
<ul id="menu"> <li class="gauche"><a href="#">Qui <br />sommes-nous ?</a></li> <li class="gauche"><a href="#">Qui <br />sommes-nous ?</a></li> <li class="droite"><a href="#">Qui <br />sommes-nous ?</a></li> <li class="droite"><a href="#">Qui <br />sommes-nous ?</a></li> </ul>
Auquel on applique comme css:
ul#menu { width : 440px; height : 25px; list-style-type : none; } ul#menu li { padding : 0 0.5em; } li.gauche { float : left; } li.droite { float : right; }
Et là, OH! Miracle: cela fonctionne! ;)
Cordialement.
-
-
Bonjour,
Pas trouvé, même après une bonne nuit de sommeil! ^^
Sur un cas comme ça j'utiliserais une image en lieu et place des boutons de menu.
cordialement. -
Bonne nouvelle: j'ai compris la question!^^
Mais je ne sais pas encore comment résoudre le problème, je cherche!
Moi aussi j'ai commencé par faire des conneries!
Maintenant je partage ma connaissance. -
<ul> <li><a href="#">Qui<br>sommes-nous ?</a></li> <li><a href="#">Qui<br>sommes-nous ?</a></li> <li><a href="#">Qui<br>sommes-nous ?</a></li> </ul>
Cela fonctionne! Ou alors je n'ai pas compris la demande? ;) -
Puis-je avoir le bout de code pour réfléchir dessus? merci.
Ceci affiche bien le titre sur 2 lignes dans une liste:
<ul><li><h1>Test<br>Titre</h1></li></ul>
Moi aussi j'ai commencé par faire des conneries!
Maintenant je partage ma connaissance. -
Bonjour,
Un simple <br> ne ferait-il l'affaire?
<h1>Qui<br> sommes nous</h1>
cordialement.
Moi aussi j'ai commencé par faire des conneries!
Maintenant je partage ma connaissance.
