我的链接不适用于我的图标图像

时间:2016-11-21 15:43:06

标签: html css image hyperlink

我一直试图想出一个原因,为什么我不能点击我放在我网站右上角的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 个答案:

答案 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>