27818 sujets

CSS et mise en forme, CSS3

Bonsoir,


Je fais appel à vous car je rencontre quelques difficultés pour la réalisation d'un projet scolaire.
J'ai un petit problème au niveau du background de mon <nav>.

En effet j'ai réussi à changer la largeur pour que le fond occupe toute la page mais lorsque je veux réduire la hauteur du background avec height, ça réduit le background mais de façon séparer par rapport au texte (voir image).
upload/1604784607-81573-exemplenav.png

Moi je voudrais que le background s'adapte au texte de façon à ce que les noms des catégories soient dans la barre bleu quand je réduis la hauteur du background de mon nav.



<nav class="header__menu mobile-menu">


<ul>

<li><a href="#">Homme</a>
<ul class="dropdown">
<li><a href="./about.html">T-shirt</a></li>
<li><a href="./shop-details.html">Short</a></li>
<li><a href="./shopping-cart.html">Sweatshirt</a></li>
<li><a href="./checkout.html">Pantalon</a></li>
</ul>
<li><a href="#">Femme</a>
<ul class="dropdown">
<li><a href="./about.html">T-shirt</a></li>
<li><a href="./shop-details.html">Short</a></li>
<li><a href="./shopping-cart.html">Sweatshirt</a></li>
<li><a href="./checkout.html">Pantalon</a></li>
</ul>

</li>
<li><a href="./blog.html"><font size="6"><font face=" Brush Script MT">Personnalisation</font></font></a></li>
<li><a href="./contact.html">À propos</a></li>

<li class= "orange_promos"><a href="./contact.html">Promos</a></li>
</ul>

</nav>



.header__menu {
text-align: center;
padding: 26px 0 25px;
position: absolute; top: 30%;
background-color: blue;
width: 100%;
height: 5%;
}

.header__menu ul li {
list-style: none;
display: inline-block;
margin-right: 45px;
position: relative;


}
Modifié par Pablito34 (07 Nov 2020 - 22:30)
Modérateur
Bonjour,

La question n'est pas claire.

Ceci étant, si tu retires le padding et le height, le fond bleu recouvrira tous les li sans rien faire de spécial.

Amicalement,
Bonjour,

Merci pour votre réponse.

En fait je voulais pouvoir rétrécir ce fond bleu de sorte à ce qu'il soit le plus proche des noms des catégories car quand je retire le padding et le height il reste quand même un espace entre le fond bleu et le nom de la catégorie.
Mais je vais remédier à ce problème en augmentant la taille de la police des catégories.
Modérateur
Bonjour,

Augmenter la taille de la police ne règlera rien.

Les espaces sont dus au fait que les <ul> et les <li> ont des margins et des paddings par défaut (et ça dépend des navigateurs : ce n'est pas toujours les mêmes espaces dans tous les navigateurs).

Dans ton cas, pour supprimer ces espaces, tu peux rajouter vers le début de ton css :
.header__menu ul,
.header__menu li
{
	margin: 0;
	padding: 0;
}

Amicalement,
Meilleure solution