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).
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)
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).
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)