img qui sort de son conteneur li

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : img qui sort de son conteneur li

Lasraud

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

CSS

Code :

.menu > div.container { /* couleur fond menu */
background-color: #DD5555;
}
.ElementsMenu{ /* la liste du menu */
display: flex;
align-items: center;
gap:2rem;
margin-left: 140px;
margin-right: 600px;
border: 1px solid rgb(255, 255, 255);
}
.ElementsMenu > li{ /* mise en forme des éléments du menu */
display: block;
height: 52px;
line-height: 52px;
list-style:none; /* supprime les puces */
border: 1px solid rgb(0, 0, 0);
}
.logo > img{
vertical-align: middle;
border: 1px solid rgb(172, 178, 15);
}
a{ /* Mise en forme de la police du menu */
text-decoration : none; /* supprimer soulignage du texte menu */
color: #FFFFFF;
}

HTML

Code :

<header>
<div class="menu">
<div class="container">
<nav>
<ul class="ElementsMenu">
<li class="logo"><img src="images/Logo.png" alt="Logo"></li>
<li><a href="">A propos</a></li>
<li><a href="">Services</a></li>
<li><a href="">L'équipe</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>

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

Publicité

TotalRecall

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)

---------------
Topic .Net - C# @ Prog

Lasraud

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

rufo

Pas me confondre avec Lycos!

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

MaybeEijOrNot

but someone at least

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.

FORUM HardWare.fr

Programmation

HTML/CSS

img qui sort de son conteneur li

Sujets relatifs
sort() sous chrome	Array sort_by Boolean
Conteneur	Élément de navigation et vidéo qui sort du post (rien que ça)
conteneur de shared_ptr	[Résolu] Gestion d'un Top10 en %hash et de la "casse"
[SQL SERVER 2008] : Parametre OUTPUT qui sort pas	Plantage aléatoire d'excel avec methode SORT
Conteneur associatif non ordonné	pointeurs dans un conteneur - comment éviter leur destruction ?
Plus de sujets relatifs à : img qui sort de son conteneur li

Page générée en 0.075 secondes