Bild nicht per Hyperlink verbunden

-1

Momentan sind meine Symbole für meine Social Media-Seite nicht verlinkt und ich bin mir nicht sicher warum. Ich habe es von der href umgeben und aus irgendeinem Grund funktioniert es nicht. Könnte mir jemand da draußen helfen?Bild nicht per Hyperlink verbunden

HTML-Code:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <title></title> 
 
\t <style type="text/css"> 
 
\t html{ 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t top: 0; 
 
\t left:0; 
 
\t overflow: hidden; 
 
\t } 
 
\t .background{ 
 
\t position: fixed; 
 
\t z-index: -1000; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t overflow: hidden; 
 
\t top: 0; 
 
\t left: 0; 
 
\t } 
 
\t #background-video{ 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t min-height: 100%; 
 
\t min-width: 100%; 
 
\t } 
 
\t .content{ 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t min-height: 100%; 
 
\t z-index: 1000; 
 
\t } 
 
\t .content h1{ 
 
\t font-family:Comic Sans MS, sans-serif; 
 
\t text-align: center; 
 
\t font-size: 200px; 
 
\t text-transform: uppercase; 
 
\t font-weight: 700; 
 
\t color: #ffffff; 
 
\t margin-bottom: 1px; 
 
\t } 
 
\t .content h3{ 
 
\t text-align: center; 
 
\t font-size: 24px; 
 
\t letter-spacing: 3px; 
 
\t color: #ffffff; 
 
\t margin-bottom: 1px; 
 
\t } 
 
\t img { 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
\t } 
 
\t .social-media-icons{ 
 
\t z-index: 1000; 
 
\t text-align: center; 
 
\t display: block; 
 
\t padding-top: 35%; 
 
\t } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <div id="background" class="background"> 
 
\t \t <video id="background-video"autoplay muted loop> 
 
\t \t \t <source src="background.mp4" type="video/mp4"> 
 
\t \t </video> 
 
\t </div> 
 
\t <div class="content"> 
 
\t <h1>A-T</h1> 
 
\t <h3>ONLINE PORTFOLIO DESIGNED BY </h3> 
 
\t </div> 
 
\t <div class="social-media-icons"> 
 
\t \t <a target="_blank" href=""><img class="facebook" src="facebook.png" alt="Facebook" width="40px" height="40px"></a> 
 
\t \t <a target="_blank" href=""><img class="twitter" src="twitter.png" alt="Twitter" width="40px" height="40px"></a> 
 
\t \t <a target="_blank" href=""><img class="LinkedIn" src="linkedin.png" alt="LinkedIn" width="40px" height="40px"></a> 
 
\t \t <a target="_blank" href=""><img src="googleplus.png" alt="Google Plus" width="40px" height="40px"></a> 
 
\t \t <a href=""><img src="email.png" alt="Email" width="40px" height="40px"></a> \t 
 
\t </div> 
 
</body> 
 
</html>

Der obige HTML-Code hat die Social-Media-Symbole mit sich umgibt. Liegt das an dem Z-Index? Das ist das einzige, was ich zu diesem Zeitpunkt annehmen kann.

Quelle

2017-04-13 catung555555

Sie müssen ein Ziel innerhalb href für jedes ein Tag hinzufügen.

<a target="_blank" href="https://www.facebook.com"><img class="facebook" src="facebook.png" alt="Facebook" width="40px" height="40px"></a>

Quelle

2017-04-13 19:01:54

Ich habe das getan und es funktioniert immer noch nicht für mich zumindest. – catung555555

Ich denke, das ist das, was Sie suchen:

Eure Inhalte Höhe wird auf min-height: 100%; Dies führt dazu, dass das Content-Div Ihre Social-Media-Divs abdeckt.

Um sie anklickbar zu machen, haben Sie das Richtige getan, indem Sie einen Z-Index hinzugefügt haben. Der Z-Index funktioniert jedoch nicht, wenn keine Positionierung erfolgt. Wenn Sie die Position auf relativ setzen, erscheinen sie wie gewünscht. Außerdem benötigen Sie ein Ziel in den href-Tags.

.social-media-icons{ 
    position:relative; 
    z-index: 1000; 
    text-align: center; 
    display: block; 
    padding-top: 35%; 
}

Quelle

2017-04-13 19:05:25 Benneb10

Vielen Dank! – catung555555

Bild nicht per Hyperlink verbunden

Antwort

Verwandte Themen