Je travaille sur un site Web qui a une barre de navigation horizontale centrée. Cette barre doit avoir des coins arrondis sur les parties d'extrémité avec un effet de survol. Tout cela fonctionne en quelque sorte, mais le problème est que le survol de la barre de navigation déborde de la taille réelle de la barre. Parallèlement à cela, il y a un léger espace blanc entre chaque élément. Comme vous pouvez le voir dans le jsfiddle suivant, cela ne semble pas tout à fait correct. Une autre note importante est le fait que la barre de navigation doit fonctionner avec Bootstrap et les fonctions responsives. Ce qui signifie que rien ne peut être positionné en absolu ou flottant, etc. En dessous, j'ai également joint le code html et css.

HTML

<div class="navTopRight">
 <ul class="naviTop">
 <li class="first"><a href="index.html">Home</a></li>
 <li><a href="#scrollToBot">Item1</a></li>
 <li><a href="Item2.html">Item2</a></li>
 <li><a href="Item3.html">Item3</a></li>
 <li class="last"><a href="Item4.html">Item4</a></li>
 </ul>
 </div>

CSS

.navTopRight{
    text-align:center;
    list-style-type: none;
    margin-top: 30px;
    padding: 0;
}

ul.naviTop li {
   border:1px solid black;
   display: inline;
   overflow:hidden;
   background-color:#003340;
}

.navTopRight li:last-child {
    border-right: none;
}

.navTopRight li a{
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    display: inline;
} 

ul.naviTop li a:hover {
    background-color:#0099bf;
}

li.first{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
li.last{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}
3
Sm00rf9000 26 janv. 2017 à 02:17

4 réponses

Meilleure réponse

Donc je pense que vous aviez fondamentalement tout ici, il y a juste quelques petits détails ... si j'ai bien compris votre question, vous vouliez simplement remplir votre arrière-plan li sans que la couleur bleue déborde de tout .. Ceci est plus simple en changeant le {{X0} } à padding:0px 16px;

Après cela, vous vouliez supprimer l'espace blanc vide et cela peut être réalisé assez simplement en modifiant la structure de vos codes html comme ceci:

                <li class="first"><a href="index.html">Home</a></li
                ><li><a href="#scrollToBot">Item1</a></li
                ><li><a href="Item2.html">Item2</a></li
                ><li><a href="Item3.html">Item3</a></li
                ><li class="last"><a href="Item4.html">Item4</a></li>

Remarquez comment toutes les balises li se terminent juste avant que la nouvelle ne commence. Voici un violon qui fonctionne aussi! Aucune utilisation de position ou de flotteur n'est donc nécessaire!

https://jsfiddle.net/nfztdxr2/3/

2
Unknown Potato 25 janv. 2017 à 23:57

Vous pouvez également définir le survol sans "a"

Ul.naviTop li: survol. {...}

Cela a également une meilleure apparence.

0
Paweł Swajdo 25 janv. 2017 à 23:33

Si vous souhaitez corriger le survol de dépassement, modifiez simplement cette partie de votre css

ul.naviTop li {
   border:1px solid black;
   display: inline; -> *display: inline-block;*
   overflow:hidden;
   background-color:#003340;
}

Voici le résultat https://jsfiddle.net/nfztdxr2/

Faites-moi savoir si c'est ce que vous essayez d'atteindre, ou peut-être y a-t-il une autre préoccupation?

1
rifa29 25 janv. 2017 à 23:27

Le problème est que vous avez padding: 14px 16px; sur .navTopRight li a, qui est défini sur display: inline;. Vous ne pouvez pas donner de marge verticale / padding / etc à un élément en ligne et le faire affecter les éléments avant / après lui. Ainsi, lorsque vous survolez ces liens et que la couleur d'arrière-plan est appliquée, cela semble vraiment étrange car le remplissage vertical devient visible. En supposant que le menu de navigation ressemble à ce que vous voulez lorsque les liens ne sont pas survolés, supprimez simplement le remplissage vertical (haut / bas 14px) des liens.

.navTopRight{
	text-align:center;
	list-style-type: none;
    margin-top: 30px;
    padding: 0;
}

ul.naviTop li {
   border:1px solid black;
   display: inline;
   overflow:hidden;
   background-color:#003340;
}

.navTopRight li:last-child {
    border-right: none;
}

.navTopRight li a{
    color: white;
    text-align: center;
    padding: 0 16px;
    text-decoration: none;
} 

ul.naviTop li a:hover {
	background-color:#0099bf;
}

li.first{
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
li.last{
    border-top-right-radius:5px;
    border-bottom-right-radius:5px;
}
 <div class="navTopRight">
                    <ul class="naviTop">
                    <li class="first"><a href="index.html">Home</a></li>
                    <li><a href="#scrollToBot">Item1</a></li>
                    <li><a href="Item2.html">Item2</a></li>
                    <li><a href="Item3.html">Item3</a></li>
                    <li class="last"><a href="Item4.html">Item4</a></li>
                </ul>
                </div>
0
Michael Coker 25 janv. 2017 à 23:44