HTML / CSS titre d'un menu sur 2 lignes

katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention   -  
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   -
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.
A voir également:

10 réponses

swoog42 Messages postés 1060 Date d'inscription   Statut Membre Dernière intervention   244
 
ajoute un style CSS sur tes balises <a> avec comme attribut :
display: block;

et couplé avec les <BR<, ca ne devrait plus décaler
1
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
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.
0
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
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.
0
katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
Voilà.

<ul>
<li><a href="#">Qui sommes-nous ?</a></li>
<li><a href="#">Qui sommes-nous ?</a></li>
<li><a href="#">Qui sommes-nous ?</a></li>
</ul>

Merci encore de bien vouloir m'aider ! ;)
0
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
<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? ;)
0
katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
Chez moi ça fait un retour à la ligne certes, mais cependant mon menu est horizontal du coup le menu suivant est décalé verticalement. Ça fait un genre d'escalier.
0
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
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.
0
katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
merci quand même ! =)
0
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
@katarina: Si cela te convient, c'est cool!^^
Merci d'ajouter "résolu" dans ton titre.

Bonne soirée ;)

Cordialement.
0
katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
Je te remercie pour ton aide, mais je suis désolée mon problème n'est pas encore résolu.
0
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
HA? Alors continuons!
Qu'est-ce qui "merdoit"?
0
katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
Salut ! Tout d'abord merci pour tes démarches !

Alors les noms de mes menus qui sont assez longs doivent être sur deux lignes.

@+ ! ;)
0
katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
Finalement j'ai trouvé une solution.

Je vais tout simplement changer mes titres.

Merci quand même pour ton aide ! ;)

PS : Si jamais tu trouves je suis partante pour lire ta solution ! :p
0
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
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! =)
0
siems
 
En bien tu peut faire ça ...

<div><div>Qui</div><div>Sommes-nous</div></div>



www.me-too.fr
-1
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
Cela s'apparente à de la "divite", ce n'est pas recommandé pour un travail "propre" ;).
0
katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
merci !
0
Lestang Messages postés 192 Date d'inscription   Statut Membre Dernière intervention   56
 
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.
-3
katarina999 Messages postés 68 Date d'inscription   Statut Membre Dernière intervention  
 
Merci d'avoir répondu mais ça ne marche pas. Ce sont des noms de menu qui sont dans des balises <li>
0