Problème CSS adaptation de mon menu
Résolu
Bonjour,
J'ai un petit soucis avec le css de mon menu, je vous explique j'aimerais que la largeur de mon menu s'adapte automatiquement à mon text.
Pour éviter d'avoir une menu sur 2 lignes, mais bien sur une ligne.
Et les textes des sous menu se mette parfois sur 2 lignes aussi quand le texte est trop long.
Sauriez-vous me dire ce que je dois changer svp ?
Merci d'avance.
Mon code css :
J'ai un petit soucis avec le css de mon menu, je vous explique j'aimerais que la largeur de mon menu s'adapte automatiquement à mon text.
Pour éviter d'avoir une menu sur 2 lignes, mais bien sur une ligne.
Et les textes des sous menu se mette parfois sur 2 lignes aussi quand le texte est trop long.
Sauriez-vous me dire ce que je dois changer svp ?
Merci d'avance.
Mon code css :
ul#nav {
color: #232223;
display:block;
float:left;
font: 13px/23px Georgia,"Times New Roman",Times,serif;
padding-bottom: 5px;
}
ul#nav,ul#nav ul {
list-style:none;
}
ul#nav .subs {
background-color: #FDF1B8;
border:1px solid #F5F5DC;
display:none;
float:left;
left:0;
padding:7px;
position:absolute;
top:100%;
}
ul#nav li:hover>* {
display:block;
}
ul#nav li:hover {
position:relative;
}
ul#nav ul .subs {
left:100%;
position:absolute;
top:0;
}
ul#nav ul {
padding:0 3px 3px;
}
ul#nav li {
display:inline;
float:left;
}
ul#nav a {
color: #FEFEFE;
float: left;
font-size: 13px;
letter-spacing: 1px;
line-height: 14px;
min-width:60px;
padding: 60px 20px;
text-align: left;
text-decoration: none;
text-shadow: 1px 1px 0 #F5F5DC;
text-transform: uppercase;
}
ul#nav > li:hover > a {
border-top: 5px solid #F5F5DC;
color: #1e1e1e;
padding-top: 55px;
}
ul#nav li a.current, ul#nav li a.current:hover {
background: url("../images/nav_current.png") no-repeat scroll center top transparent;
border: medium none;
color: #F5F5DC;
padding-top: 60px;
text-shadow: none;
}
ul#nav ul a {
color:#000;
font-size:10px;
font-weight:bold;
padding:5px;
text-shadow:#F5F5DC 0 0 0;
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul#nav ul li:hover>a {
letter-spacing:2px;
}
Configuration: Windows / Chrome 92.0.4515.107
5 réponses
-
Bonjour,
Peux tu nous montrer le code html du menu stp ?
Bonne journée, -
Biensûr,
<?php header('Content-type: text/html; charset=utf-8') ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta charset="utf-8" /> <title>Menu</title> <link rel="stylesheet" href="css/menu.css" type="text/css" media="screen"> </head> <body> <div class="container"> <div class="content"> <ul id="nav"> <li><a href="#" class="current">Accueil</a></li> <li><a href="#">Rétroplanning</a></li> <li><a href="#">Conditions</a></li> <li><a href="#">Templates</a> <ul class="subs"> <li><a href="#">Clients</a></li><br> <li><a href="#">MO</a></li><br> <li><a href="#">MO Suivi</a></li><br> <li><a href="#">OM/BM</a></li><br> <li><a href="#">Rétroplanning</a></li> </ul> </li> <li><a href="#">Escalations</a> <ul class="subs"> <li><a href="#">OM/BM</a></li><br> <li><a href="#">MO</a></li><br> </ul> </li> <li><a href="#">Formation</a> <ul class="subs"> <li><a href="#">E-Learning & Quiz</a></li><br> <li><a href="#">Instruction</a></li> <li><a href="#">Statistiques</a></li> </ul> </li> <li><a href="#">Travail individuel</a> <ul class="subs"> <li><a href="#">Kevin</a></li><br> <li><a href="#">Pierre</a></li><br> <li><a href="#">Romain</a></li><br> <li><a href="#">Jacques</a></li><br> <li><a href="#">Jean</a></li> </ul> </li> <li><a href="#">FAQ</a></li> <li><a href="mailto:?to=test@test.be &subject=Contact%20:%20Projet%20test">Nous contacter</a></li> <li><a href="#">Remerciements</a></li> </ul> </div> </div> <br /><br /> </body> </html> -
Pour que les éléments du menu et des sous-menu soient sur une seule ligne, tu peux ajouter la règle css white-space: nowrap; sur le sélecteur css ul#nav a :
ul#nav a { white-space: nowrap; /* [...] */
Au passage, peut-être mettre à jour le doctype de ton document html en utilisant html5 ?<!DOCTYPE html> <html lang="fr"> <!-- [...] -->
https://www.w3schools.com/tags/tag_doctype.asp -
Certains éléments restents sur deux lignes malgrés ces modifications regarde le "E-learning & quiz"
-
Etrange, sur mon test avec ton code css et html, en ajoutant le nowrap, le menu "E-learning & Quiz" reste bien sur une seule ligne : https://jsfiddle.net/29ejwzyn/
En inspectant l'élément html avec l'outil de développement du navigateur, la règle white-space: nowrap; est-elle bien appliquée ? Rafraichissement du cache ?
Peux tu nous donner le lien de la page si celle-ci est accessible en ligne ? (Tu peux me l'envoyer par message privé si tu ne veux pas que l'URL soit publique)
-
-
Tu avais raison c'était bien un problème de cache, sauf que maintenant le titre qui avait en dessous du menu, c'est mis à droite du menu regarde c'est bizzare :
-
Le soucis vient surement du fait que ton menu est positionné en flottant (ul#nav { float: left; }), l'élément div.container qui contient le menu ne prends donc pas en compte la taille de l'élément flottant inclus.
Une solution simple pour corriger ceci est d'appliquer un overflow: auto sur le conteneur qui contient l'élément flottant en créant par exemple une classe clearfix :<div class="container clearfix"> <div class="content"> <ul id="nav"> <!-- ... --> </ul> </div> </div>.clearfix { overflow: auto; }
https://jsfiddle.net/29ejwzyn/1/
https://fr.learnlayout.com/clearfix.html
https://www.w3schools.com/howto/howto_css_clearfix.asp -
@PitetMerci.
J'ai essayé cette solution mais le problème alors c'est que à droite il y'a une scrollbar et je vois plus mes sous menu, regarde :
-
@TzmagnumLa solution avec le "overflow: auto;" n'est qu'un exemple de solution pour gérer les soucis de positionnement avec float. As tu essayé le deuxième (meilleur) exemple proposé sur w3shcools ?
.clearfix::after { content: ""; clear: both; display: table; }
Avec des images je ne peux faire que des suppositions, il faudrait le code html/css pour t'aider plus précisément. -
@PitetMerci ça a fonctionné
-
