Menu trop long

Salut, je voudrais réduire le menu (voir photo) pour que ça rentre dans mon design
Quelqu’un aurait la solution? Je sais pas trop quelle ligne modifier … merci
Joyeux Noël au passage :grinning:

Texte/html:

    <a onClick="planHeader_id=33; displayPlan();"><li class="monmenu"><div class="selected"><img src="montheme/images/MAISON2.png" height=50px width=50px></div></br></li></a>
    
    <a onClick="planHeader_id=14; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/RADIATEUR.png" height=50px width=50px></div></br></li></a>
    
    <a onClick="planHeader_id=32; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/LUMIERE.png" height=50px width=50px></div></br></li></a>
    
    <a onClick="planHeader_id=1; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/CAMERA.png" height=50px width=50px></div></br></li></a>
    
    <a onClick="planHeader_id=1; displayPlan();"><li class="monmenu"><div class="imagette"><img src="montheme/images/LAN.png" height=50px width=50px></div></br></li></a>
    
    <a onClick="planHeader_id=1; displayPlan();"><li class="monmenu" ><div class="imagette"><img src="montheme/images/GRAPH.png" height=50px width=50px></div></br></li></a>
    
    
    
    
    
    <!-- SEPARATION -->
    <li class="monmenu_sep" ><div class="imagette"><img src="montheme/images/icon_blank.png" height=50px width=50px></div></br></li>	
    

Mon theme CSS:

div.menu_top
{
width:1281px;
height:70px;
background-color:rgba(0,0,0,0.6);
border-bottom:2px solid rgba(0,0,0,1);

}
ul.monmenu
{
width:1281px;
margin: 0 auto;
}

ul.monmenu ul.monmenu_sep
{

list-style-type:none;
color:rgba(255,255,255,0.8);
font-family:Roboto;
font-size: 16px;
font-weight: normal;

}

li.monmenu
{

display:inline-block;
width: 100px;
margin-left: -5px;
text-align: center;
height: 70px;
padding-top: 10px;
border-left: 1px solid rgba(255,255,255,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
background-color: rgba(0,0,0,0.2);

}

div.imagette
{

text-align: center;
margin-bottom: 5px;
opacity: 0.3 ;

}

li.monmenu:hover{

background-color: rgba(255,255,255,0.2);

}

li.selected{
display:inline-block;
width: 100px;
margin-left: -5px;
text-align: center;
height: 70px;
padding-top: 10px;
border-left: 1px solid rgba(255,255,255,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
background-color: rgba(255,255,255,0.2);
}

li.monmenu_sep
{

display:inline-block;
width: 100px;
margin-left: -5px;
text-align: center;
height: 70px;
padding-top: 10px;

border-right: 1px solid rgba(0,0,0,0.3);

}

div.bouton{

opacity: 1;

}

div.bouton:hover
{

opacity: 0.5;

}

Salut,

Tu peux réduire la valeur des width:1281px; et penses bien à rafraichir la page avec ctrl+F5 sinon tu ne verras jamais les changements

1 « J'aime »

Merci, j’ai encore un bug d’affichage… J’ai pas encore planché là dessus

En lisant ce fil et sa solution, quand on a un pb de menu trop long, il faudra dire:

Pour moi la solution est le post de @Salvialf Pas le vôtre.

1 « J'aime »

salut et merci pour l’info, cependant monsieur @Salvialf à plus de 800 messages à son actif (ce qui est une bonne chose pour la communauté :+1: ) du coup je ne trouve pas ou il en parle @jpty tu peux donner le lien s’il te plait :raising_hand_man:

Ce qu’il veut dire c’est qu’il fallait indiquer « solution » sur le post de ce fil

1 « J'aime »

:man_facepalming: le boulet… :sweat_smile:
Merci je serais pour les prochaines fois :raising_hand_man:

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.