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