Problème CSS adaptation de mon menu

Résolu/Fermé
Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022 - Modifié le 29 juil. 2021 à 10:55
Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022 - 2 août 2021 à 11:01
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 : 

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
A voir également:

5 réponses

Réponse 1 / 5
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
29 juil. 2021 à 12:03
Bonjour,

Peux tu nous montrer le code html du menu stp ?

Bonne journée,
0
Réponse 2 / 5
Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022
Modifié le 29 juil. 2021 à 12:49
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>
0
Réponse 3 / 5
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
29 juil. 2021 à 13:54
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
0
Réponse 4 / 5
Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022
29 juil. 2021 à 14:45
Certains éléments restents sur deux lignes malgrés ces modifications regarde le "E-learning & quiz"

0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
29 juil. 2021 à 16:21
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)
0

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

Posez votre question
Réponse 5 / 5
Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022
29 juil. 2021 à 16:32
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 :

0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
29 juil. 2021 à 17:40
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
0
Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
29 juil. 2021 à 18:22
Merci.

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 :

0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526 > Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022
29 juil. 2021 à 18:55
La 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.
0
Tzmagnum Messages postés 126 Date d'inscription dimanche 9 août 2009 Statut Membre Dernière intervention 10 mai 2022 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
2 août 2021 à 11:01
Merci ça a fonctionné
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses