Problème CSS adaptation de mon menu

Résolu
Tzmagnum Messages postés 126 Date d'inscription   Statut Membre Dernière intervention   -  
Tzmagnum Messages postés 126 Date d'inscription   Statut Membre Dernière intervention   - 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   Statut Membre Dernière intervention   526
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   526
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   526
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   526
 
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   Statut Membre Dernière intervention   > Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   526 > Tzmagnum Messages postés 126 Date d'inscription   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention   > Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention  
 
Merci ça a fonctionné
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

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

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

5 réponses