2016-11-21 7 views
1

Ich habe versucht, seit einiger Zeit einen Grund herauszufinden, warum ich nicht auf 2 Icons klicken darf, die ich in der oberen rechten Ecke meiner Website platziert habe. Ohne eine max-height, wenn Sie die div Farbe (es ist jetzt gelb), es geht den ganzen Weg bis zum Ende der Seite aus irgendeinem Grund (noch wird mich nicht zulassen klicken.)Meine Links funktionieren nicht auf meinem Icon Bilder

.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>

Antwort

1

Das Bild ist kein Link. Es ist benachbarten zu einem leer Link, der nicht angeklickt werden kann, da sie keinen Inhalt hat:

<a href="https://www.facebook.com/eth.gfx" target="_blank"></a> 
<img src="Images/Facebook.png" height="50px" width="50px"/> 

Machen Sie das Bild selbst einen Link:

<a href="https://www.facebook.com/eth.gfx" target="_blank"> 
    <img src="Images/Facebook.png" height="50px" width="50px"/> 
</a> 
+0

Viel schätzte es meine Lösung fixiert. Die einzige Sache ist, dass einige Pixel zeigen, als ob der Link in der unteren rechten Ecke geklickt worden wäre. https://i.stack.imgur.com/kSzSn.png –

Verwandte Themen