2016-11-21 88 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 –