Question

我目前正在使用两个文件：test.html和style.css，徽标仅部分用作链接。有什么方法可以解决这个问题吗？

可以在此处查看问题预览：Website Test

的test.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"> 
<title>Mindtale</title>
</head>


<body>

<div id="headerlogo">
<a href="index.html"><img src="images/logo.png"></a>
</div>


<div id="headerlink1">
<a href="portfolio.html">Portfolio</a>
</div>


<div id="headerlink2">
<a href="contact.html">Contact</a>
</div>



<div id="headerimg"></div>

<div id="content1">
</div>



<div id="footer">
Mindtale &copy; 2013
</div>
</div>


</body>
</html>

的style.css

html { 
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


div#headerlogo {
z-index:0;
position:fixed;
left: 41%;
top: 24px;
}


div#headerlink1 {
z-index:2;
position:fixed;
top:50px;
left:18%;
width:100%;
color:#999;
padding: 0px;
}

div#headerlink2 {
z-index:3;
position:fixed;
top:50px;
left:78%;
width:100%;
color:#999;
padding: 0px;
}


div#headerimg {
position:fixed;
background: url(images/header.png) no-repeat center;
height: 102px;
top:0px;
left:0px;
width:100%;
padding: 0px;
}


div#content1 {
position:fixed;
width:100%;
color:#222;
top: 70px; 
bottom: 0; 
left: 0; 
right: 0;
padding: 25px;
overflow: auto;
}


div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#999;
background:#333;
padding: 8px;
}

Answer 1

使用：

#headerlogo a {
   display: block;
}

并从headerLink div中删除width:100%;，因为它们会覆盖您的徽标。

Answer 2

您的headerlink1 div部分 over 徽标。

这使得徽标的那一点无法点击。

如何解决？更改设计 - 可能是不同链接的两个div - 不会遮挡徽标。

Logo的链接仅部分功能

2 个答案: