2016-11-21 85 views
1

我一直在想弄清楚现在有一段时间我不能点击我放在网站右上角的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>

回答

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> 
+0

非常感谢它固定我的解决方案。只有几个像素显示,就好像在右下角点击链接一样。 https://i.stack.imgur.com/kSzSn.png –