Sujet Précédent Sujet Suivant

HTML / CSS titre d'un menu sur 2 lignes

Fermé
katarina999 Messages postés 68 Date d'inscription dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015 - Modifié par katarina999 le 20/03/2011 à 15:44
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 - 23 mars 2011 à 22:39
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

Réponse 1 / 10
swoog42 Messages postés 1059 Date d'inscription mercredi 30 septembre 2009 Statut Membre Dernière intervention 16 décembre 2018 244
22 mars 2011 à 00:21
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 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
22 mars 2011 à 09:32
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
Réponse 2 / 10
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
Modifié par Lestang le 20/03/2011 à 16:36
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 dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015
20 mars 2011 à 16:42
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
Réponse 3 / 10
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
20 mars 2011 à 17:08 
<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 dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015
20 mars 2011 à 17:53
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
Réponse 4 / 10
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
Modifié par Lestang le 20/03/2011 à 18:46
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
Réponse 5 / 10
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
21 mars 2011 à 08:19
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 dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015
22 mars 2011 à 00:17
merci quand même ! =)
0
Réponse 6 / 10
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
22 mars 2011 à 23:21
@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 dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015
22 mars 2011 à 23:24
Je te remercie pour ton aide, mais je suis désolée mon problème n'est pas encore résolu.
0
Réponse 7 / 10
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
23 mars 2011 à 09:17
HA? Alors continuons!
Qu'est-ce qui "merdoit"?
0
katarina999 Messages postés 68 Date d'inscription dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015
23 mars 2011 à 20:30
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 dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015
23 mars 2011 à 20:41
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
Réponse 8 / 10
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
23 mars 2011 à 22:39
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
Réponse 9 / 10
siems
22 mars 2011 à 11:31
En bien tu peut faire ça ... 

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



www.me-too.fr
-1
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
22 mars 2011 à 12:14
Cela s'apparente à de la "divite", ce n'est pas recommandé pour un travail "propre" ;).
0
katarina999 Messages postés 68 Date d'inscription dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015
22 mars 2011 à 20:42
merci !
0
Réponse 10 / 10
Lestang Messages postés 191 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 18 juillet 2011 56
Modifié par Lestang le 20/03/2011 à 15:34
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 dimanche 30 janvier 2011 Statut Membre Dernière intervention 28 avril 2015
20 mars 2011 à 15:44
Merci d'avoir répondu mais ça ne marche pas. Ce sont des noms de menu qui sont dans des balises <li>
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
titre encadré
calimero -
Raymond PENTIER -

5 réponses
Afficher toutes les lignes masquées excel
livlarsen -
esicom -

26 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse