0
J'essaie de centrer ma barre de navigation, mais toutes les tentatives que j'ai faites jusqu'à présent ont pour résultat que la barre de navigation n'est pas centrée, mais les liens ne sont pas alignés. Je voudrais également garder le logo en ligne avec la barre de navigation mais flottant à gauche. J'ai essayé d'ajouter une classe de conteneur et un identifiant de navigation, mais je ne pense pas que cela ait fait quoi que ce soit. S'il vous plaît aidez!Besoin d'aide pour centrer la barre de navigation avec un logo en ligne
Voici mon html:
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="HCstyle.css">
<title>Hockey Corner</title>
</head>
<body>
<div>
<img class="logo" src="images/Hockey Corner logo real png.png" alt="Hockey Corner logo">
</div>
<div class="container">
<div id="nav">
<div class="wrap">
<ul>
<li><a href="link.html">Our Sponsers</a></li>
<li><a href="link.html">Contact Us</a></li>
<li><a href="link.html">About Us</a></li>
<li><a href="home.html">Home</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Et voici mon css:
img.logo{
float:left;
width:10%;
padding-left:5%;
}
ul{
list-style-type:none;
margin:0;
padding-left:20px;
padding-right:20px;
display:inline-block;
overflow:hidden;
float:right;
}
li{
display:inline-block;
}
li a{
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover{
background-color:#34495E;
}
body{
background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("images/Background1.jpg");
background-size:cover;
background-repeat:no-repeat;
}
.nav{
float:left;
text-align:left;
}
.container{
text-align:center
}
Maintenant, le lien Nos commanditaires ne devient pas en surbrillance quand vous le survolez. – VSherr
S'il vous plaît aidez-moi! Merci – VSherr
Il est mis en évidence lorsque vous planez. – Ofisora