Logo's link only partially functional

StackOverflow https://stackoverflow.com/questions/16038989

题

I am currently using two files: test.html and style.css and the logo is only partially functioning as a link. Is there any way I can fix this?

A preview of the problem can be seen here: 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;
}
有帮助吗？

解决方案

Use:

#headerlogo a {
   display: block;
}

And remove the width:100%; from the headerLink divs because they are overlaying your logo.

其他提示

Your headerlink1 div is partially over the logo.

This makes that bit of the logo unclickable.

How to fix? Change the design - perhaps two divs for the different links - something that will not obscure the logo.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top