Logo's link only partially functional

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

Question

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;
}
Was it helpful?

Solution

Use:

#headerlogo a {
   display: block;
}

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top