HTML / CSS titre d'un menu sur 2 lignes
katarina999
Messages postés
75
Statut
Membre
-
Lestang Messages postés 208 Statut Membre -
Lestang Messages postés 208 Statut Membre -
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
-
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.
-
-
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. -
<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? ;) -
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. -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
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. -
@katarina: Si cela te convient, c'est cool!^^
Merci d'ajouter "résolu" dans ton titre.
Bonne soirée ;)
Cordialement. -
-
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! =)
-
-
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.
