img qui sort de son conteneur li

img qui sort de son conteneur li - HTML/CSS - Programmation

Marsh Posté le 03-06-2022 à 09:03:19    

Bonjour,
 
J'essaie de faire un menu et je bloque depuis un long moment sur ce logo qui est en dehors de son conteneur. ( j'ai rajouté les bordures pour essayer de comprendre le problème )
Quelqu'un aurait la solution ? Merci
 
 
https://zupimages.net/up/22/22/rtoa.png
 
CSS
 

Code :
  1. .menu > div.container { /* couleur fond menu */
  2.     background-color: #DD5555;
  3. }
  7. .ElementsMenu{      /* la liste du menu */
  8.     display: flex;
  9.     align-items: center;
  10.     gap:2rem;
  11.     margin-left: 140px;
  12.     margin-right: 600px;
  13.     border: 1px solid rgb(255, 255, 255);
  14.     }
  17. .ElementsMenu > li{ /* mise en forme des éléments du menu */
  19.     display: block;
  20.     height: 52px;
  21.     line-height: 52px;
  22.     list-style:none; /* supprime les puces */
  23.     border: 1px solid rgb(0, 0, 0);
  24.      
  25. }
  28. .logo > img{
  29.     vertical-align: middle;
  30.     border: 1px solid rgb(172, 178, 15);
  31. }
  35. a{ /* Mise en forme de la police du menu */
  36.     text-decoration : none; /* supprimer soulignage du texte menu */
  37.     color: #FFFFFF;
  38. }


 
 
HTML
 

Code :
  1. <header>
  2.         <div class="menu">
  3.             <div class="container">
  4.                 <nav>
  5.                     <ul class="ElementsMenu">
  6.                         <li class="logo"><img src="images/Logo.png"  alt="Logo"></li>
  7.                         <li><a href="">A propos</a></li>
  8.                         <li><a href="">Services</a></li>
  9.                         <li><a href="">L'équipe</a></li>
  10.                         <li><a href="">Contact</a></li>
  11.                     </ul>
  12.                 </nav>
  13.             </div>
  14.         </div>
  15.     </header>


Message édité par Lasraud le 03-06-2022 à 09:05:56
Reply

Marsh Posté le 03-06-2022 à 09:03:19   

Reply

Marsh Posté le 03-06-2022 à 09:40:15    

Petit conseil : pour demander de l'aide sur ce genre de truc n'hésite pas à faire un fiddle : https://jsfiddle.net/7nhy3bud/ (ou la même chose par l'outil de ton choix).
Et à héberger l'image quelque part pour qu'on puisse tester (là c'est pas le cas)


---------------
Réalisation amplis classe D / T      Topic .Net - C# @ Prog
Reply

Marsh Posté le 03-06-2022 à 09:53:28    

Merci pour l'info:

 

https://jsfiddle.net/7nhy3bud/

 


Voilà le logo: https://zupimages.net/up/22/20/d4q5.png


Message édité par Lasraud le 03-06-2022 à 09:58:27
Reply

Marsh Posté le 05-06-2022 à 10:27:26    

J'aurais tendance à penser que c'est la règle vertical-align: middle; qui pose souci + sans doute un padding pas à 0 sur l'img du logo.
Edit : un <header> + un <nav> avec un <ul> dont les <li> sont inline, ça suffisait pas ? Quel est l'intérêt d'avoir mis 2 <div> en plus ?


Message édité par rufo le 05-06-2022 à 10:28:30

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 09-06-2022 à 18:33:38    

Je ne constate pas de problème sur le jsfiddle... Fais un petit Ctrl+F5 sur ta page pour être sûr que ce n'est pas un ancien fichier en cache ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed