我想知道如何在导航栏旁边放置图像。我尝试了许多不同的方法,但是无法解决,因为如果我要将徽标重定向到索引页面,则导航栏将不起作用,反之亦然。在我的网站上,我正在做一些测试,因此,您可以在附件的链接中看到,即使我已经添加了“ href”代码,顶部的徽标图像和导航栏也不会将您重定向到索引页。这是我的网站,也是我要显示徽标的页面:massaviu.cat/contacte.html
您实际上可以按Ctrl + U来查看代码。谢谢<3
此处的代码:
<div class="logo-massaviu">
<a href="index.html"><img src="logo.png" width="20%"></a>
</div>
<div>
<ul class="nav">
<li><a class="link" href="#">concerts</a></li>
<li><a class="link" href="discografia.html">discografia</a></li>
<li><a class="link" href="galeria.html">galeria</a></li>
<li><a class="link" href="#">botiga</a></li>
<li><a class="link" href="contacte.html">contacte</a></li>
</ul>
</div>
徽标和导航的CSS样式表:
.nav{
list-style:none;
margin:0px;
padding:0px;
text-align:center;
position: relative;
}
.nav li{
display:inline-block;
}
.nav a{
text-decoration: none;
color: #b8d2db;
color: #fff;
display: inline-block;
padding: 15px;
font-size: 20px;
transition: 0.4s;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo-massaviu {
position: fixed;
padding: 0px;
background: transparent;
overflow: hidden;
}
答案 0 :(得分:1)
您的导航与您的徽标重叠,因此您无法单击它。
使用z-index
将徽标移到导航顶部。然后将外部div的宽度更改为一个设置值,使其不与导航重叠。
.logo-massaviu {
position: fixed;
padding: 0px;
background: transparent;
overflow: hidden;
z-index: 1;
width: 198px;
}
<div class="logo-massaviu">
<a href="index.html"><img src="logo.png" width="100%"></a>
</div>
答案 1 :(得分:0)
由于导航在徽标div上重叠,请尝试为其提供一定的宽度。尝试下面的.nav的CSS
.nav{
list-style: none;
padding: 0px;
text-align: center;
position: relative;
display: block;
width: 50%;
margin: 0 auto;
}