so nochmal Gude, ich bin Grade dabei mit HTML und css du basteln. Ich habe ein Navigation Menü oben rechts in die Ecke gesetzt und da ging alles. Dann habe ich ein h1 Text in die Mitte der page gemacht und jetzt kann ich die ersten 3 punkte des Navigation Menü nicht mehr anklicken.
HTML code
<html>
<head>
<title>CSS Bilder animation</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="row">
<div class="logo"><img src="logo.png"></div>
<ul class="main-nav">
<li class="aktiv"><a href="index.html">HOME</a></li>
<li><a href="Info.html">ABOUT</a></li>
<li><a href="Bilder.html">GALLERY</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
<div class="Hero"><h1>Herzlich Willkommen!</h1>
<div class="Button">
<ul>
<li><a href="Info.html" class="btn btn-one">About us!</a></li>
<li><a href="contact.html" class="btn btn-two">Contact us !</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
CSS Code
*
{
margin: 0;
padding: 0;
}
header {
background-image: url(wallpaper.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right !important;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a
{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: sans-serif;
font-size: 15px;
}
.main-nav li.aktiv a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img
{
width: 120;
height: auto;
float: left;
}
.Welcome {
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.Hero {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 20px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 55px;
text-align: center;
margin-top: 310px;
margin-left: 169px;
font-family: sans-serif;
}
.button {
margin-left: 550px;
list-style: none;
margin-top: 30px;
}
.button li {
display: inline-block;
z-index: 1;
}
.button li a
{
border: 1px solid white;
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: sans-serif;
font-size: 15px;
}
.btn-one {
background-color: rgba(10,20,30,50%);
font-family: sans-serif;
}
.btn-two {
font-family: sans-serif;
}
.btn-two:hover {
background-color: sienna;
transition: all 0.5s ease-in;
}
.btn-one:hover {
background-color: sienna;
transition: all 0.2s ease-in;
}