我一直试图想出一个原因,为什么我不能点击我放在我网站右上角的2个图标。没有最大高度,如果你为div着色(现在它是黄色的),由于某种原因它会一直向下到页面的末尾(仍然不会让我点击它。)
.socialmedia {
position: absolute;
top: 5%;
left: 0;
bottom: 5%;
margin-left: 90%;
background-color: yellow;
}
.headerContent {
margin: 0;
background: lightgray;
border-bottom: 5px solid lightgrey;
}
.nav {
margin: auto;
width:75%;
height: 40px;
background: lightgray;
border-radius: 0 0 15px 15px;
}
.nav ul {
margin: 0;
Padding: 0;
}
.nav ul li {
list-style:none;
margin: auto;
}
.nav ul li a {
min-width: 9%;
text-decoration:none;
font-family: Agency Fb, sans-serif;
text-align: center;
font-size: 150%;
float: left;
padding: 1px 8%;
color: black
}
.nav ul li a:hover {
color:white;
}
.headerContent a img {
max-width: 100px;
max-height: 100px;
margin: auto;
display: block;
}
/*--^HEADER CONTENT^--*/
<!DOCTYPE html>
<html lang="en">
<body bgcolor=darkgray></body>
<head>
<meta charset="UTF-8">
<title>eth gfx</title>
<link rel="stylesheet" type="text/css" href="portfolio.css">
</head>
<body>
<!--HEADER CONTENT-->
<!--Navigation Panel with Logo, Nav Buttons, and social media icons-->
<div class="socialmedia">
<a href="https://www.facebook.com/eth.gfx" target="_blank"></a>
<img src="Images/Facebook.png" height="50px" width="50px"/>
<a href="https://www.instagram.com/eth_gfx" target="_blank"></a>
<img src="Images/Instagram.png" height="50px" width="50px"/>
</div>
<div class="headerContent">
<a href="index.html">
<img src="Images/Eth_Graphics_transparent.png" />
</a>
</div>
<div class="nav">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
答案 0 :(得分:1)
图片不是链接。 与空链接相邻,由于没有内容,因此无法点击该链接:
<a href="https://www.facebook.com/eth.gfx" target="_blank"></a>
<img src="Images/Facebook.png" height="50px" width="50px"/>
将图片本身设为链接:
<a href="https://www.facebook.com/eth.gfx" target="_blank">
<img src="Images/Facebook.png" height="50px" width="50px"/>
</a>