Frage Wieso kann man den Link im ersten div nicht anklicken?

Marvle03 · 2 Juni 2018

Der Link ist Blau Unterstrichen aber man kann leider nicht drauf klicken :( <div class="box"><h2>Über Uns <a href="Mehr.html">Mehr</a></h2></div>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Nice</title>
<link rel="stylesheet" href="home.css" type="text/css">
</head>
<body>
<div id="Bereich">
</div>
<div class="wrapper">
<header>
<center><h1>Ristorante di Marvin</h1>
</header>

<div class="navigationDesktop">
<nav>
<ul>
<li><a href="Home.html">Home</a>
<ul>
<li><a href="Standorte.html">Standorte</a></li>
<li><a href="ÜberUns.html">Über uns</a></li>
<li><a href="Kritiken.html">Kritiken</a></li>
</ul>
</li>
<li><a href="Gästebuch.html">Gästebuch</a>
</li>
<li><a href="Gerichte.html">Gerichte</a>
<ul>
<li><a href="Fleisch.html">FLeisch</a>
<ul>
<li><a href="Rind.html">Rind</a></li>
<li><a href="Hähnchen.html">Hähnchen</a></li>
<li><a href="Schwein.html">Schwein</a></li>
</li>
</ul>
<li><a href="Fisch.html">Fisch</a></li>
<li><a href="Vegetarisch.html">Vegetarisch</a></li>
<li><a href="Nachtisch.html">Nachtisch</a></li>
</ul>
</li>
<li><a href="Impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</div>
<div class="box"><h2>Über Uns <a href="Mehr.html">Mehr</a></h2></div>
<div class="box"><h2>Räumlichkeiten</h2></div>
<div class="box"><h2><center>Unser Team</h2></div>

<footer>
Marvin © 2017
</footer>
</div>
</body>
</html>

CSS:

*{
padding:0;
margin:0;
box-sizing:border-box;
}

html{
height:100%;
}

.wrapper{
min-height:100%;
width:100%;
position:fixed;
}

body{
height:100%;
background:#DEDADA;
background-image: url("pizza.jpg");
background-repeat: no-repeat;
}

h1 {
margin: 1em 0 0.5em 0;
font-weight: 100;
text-transform: uppercase;
color: #767474;
font-style: italic;
font-family: 'Josefin Sans', sans-serif;
font-size: 58px;
line-height: 54px;
text-shadow: 2px 5px 0 rgba(0,0,0,0.2);
}

.box {
margin-left:150px;
margin-top: 300px;
float: left;
width: 400px;
height: 500px;
margin-right: 50px;
padding: 20px;
background:#908F8F;;
border-radius: 20px;
z-index: 1;

}
h2 {
text-align: center;
margin-top: 20px;
font-weight: 0;
text-transform: uppercase;
color: #444444;
font-style: italic;
font-family: 'Josefin Sans', sans-serif;
font-size: 38px;
line-height: 5px;
text-shadow: 1px 3px 0 rgba(0,0,0,0.2);
z-index: 100;

}

.navigationDesktop{
background:#908F8F;;
}

nav {
height:40px;
width:560px;
display:block;
margin:0 auto;
text-align: center;
text-transform: uppercase;
}

nav a{
display:block;
text-decoration: none;
font-family: monospace;
font-weight: bold;
font-size:13pt;
color:#FDFBFB;
}

nav a:hover{
background:#565555;
color:#f0f1f5;
}

nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background:#767474;

}

nav ul ul li{
position:relative;
display:none;
}

nav ul ul ul{
display:none;
}

nav ul li:hover ul li{
display: block;
animation: navmenu 500ms forwards;
}

@keyframes navmenu{
0%{
opacity:0;
top:5px;
}
100%{
opacity:1;
top:0px;
}
}

nav ul ul li:hover ul{
display:block;
position:absolute;
width:140px;
left:140px;
top:0px;
}

article{
padding:10px;
font-family: arial;
line-height: 40px;
}

footer{
border-top:2px solid #666666;
position: fixed;
bottom:0px;
padding:20px;
width: 100%;
text-align: center;
background:#908F8F;
color:#fff;
font-family: sans-serif;
font-weight: bold;
font-size:11pt;
text-transform: uppercase;
}

Sailor · 2 Juni 2018

Dein...

CSS:

.wrapper{
min-height:100%;
width:100%;
position:fixed;
}

überlagert die folgenden Elemente und macht deswegen unter anderem deinen Link 'unklickbar'!
Lösche das 'min-height: 100%;' und schreibe stattdessen 'height: auto;'
Und dann prüfe, ob sich was verändert.

Frage Wieso kann man den Link im ersten div nicht anklicken?

Marvle03

Neues Mitglied

Sailor

Aktives Mitglied

Neueste Beiträge