1
Ich versuche, diesen leeren Leerraum unter meinem Header loszuwerden. Ich habe relative und absolute Position verwendet, um den Raum durch mein div zu ersetzen. Aber wenn ich das tue, funktionieren meine Links plötzlich nicht mehr. Jede Hilfe wird sehr geschätzt.Wie kann ich diesen Leerraum unter meinem Header sicher entfernen?
@keyframes layer2Anim {
0% {
opacity: 0;
}
17% {
opacity: 0;
}
33% {
opacity: 1;
}
50% {
opacity: 1;
}
67% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes layer3Anim {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
67% {
opacity: 1;
}
87% {
opacity: 1;
}
100% {
opacity: 0;
}
}
html,
body {
overflow-x: none;
background-color: gold;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
}
ul {
text-align: center;
position: relative;
top: -20px;
}
li {
display: inline-block;
color: #fff;
font-size: 1.4em;
font-weight: bold;
font-family: arial rounded mt;
padding: 50px;
}
li a {
color: #fff;
}
li img {
border-radius: 45px;
}
nav {
width: 100%;
height: 150px;
background-color: #b22222;
}
.slideShow {
position: relative;
}
.placeHolder {
width: 100%;
visibility: hidden;
}
.layer1,
.layer2,
.layer3 {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-repeat: no-repeat;
}
.layer1 {
background-image: url(1.jpg);
}
.layer2 {
background-image: url(2.jpg);
animation: layer2Anim 10s infinite;
}
.layer3 {
background-image: url(3.jpg);
animation: layer3Anim 10s infinite;
}
.slideOverlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.slideOverlay p {
position: relative;
font-size: 6vw;
font-family: comic sans ms;
color: #fff;
text-shadow: 3px 3px 6px #000;
text-align: center;
top: 20%
}
/*The about page content is underneath this sentence.*/
.vintage {
width: 100%;
height: 100vh;
background-image: url(vintagemcdonalds.jpg);
background-repeat: no-repeat;
background-position: center center;
position: relative;
top: -50px;
}
.vintage p {
position: relative;
font-size: 6em;
font-family: comic sans ms;
color: #fff;
text-shadow: 3px 3px 6px #000;
text-align: center;
top: 30%
}
#about {
width: 50%;
height: 800px;
margin: 0 auto;
background-color: #eee;
border-radius: 20px 20px 20px 20px;
position: relative;
top: -100px;
padding: 20px;
}
#about h1 {
text-align: center;
position: relative;
top: 80px;
}
#about p {
position: relative;
top: 95px;
font-size: 1.5em;
padding-left: 5px;
padding-right: 20px;
}
footer {
width: 100%;
height: 400px;
background-color: #b22222;
}<nav>
<!--<a href="index.html"><img src="vintagelogo.jpg" width="90px" height="90px"></a>-->
<ul>
<li>
<a href="index.html">
<img src="vintagelogo.jpg" width="90px" height="90px">
</a>
</li>
<li><a href="about.html">ABOUT MCDONALD'S</a>
</li>
<li><a href="classics.html">OUR CLASSICS</a>
</li>
<li><a href="contact.html">CONTACT</a>
</li>
</ul>
</nav>
<div class="vintage">
<p>ABOUT MCDONALD'S
<p>
</div>
<div id="about">
<h1>ABOUT MCDONALD'S</h1>
<p>Well known around the world, we are the biggest fast food chain and we serve millions of customers daily. But it wasn't always like this. McDonald's was first established in 1940 by Richard and Maurice McDonald. A while later a businessman named Ray
Kroc came along and saw lots of opportunity. He bought the chain and from there everything is history! In our many years of existence we've helped millions of children with our delicious happy meals and toys. Let's also not forget about our famous
Ronald McDonald. It's safe to say that we have influenced millions of people's childhoods and continue to do so.
<br>
<br>Our hamburgers are of top quality and we're always looking to add new things to the menu. In the beginning, we had basic foods like hamburgers, fries, and milkshakes. But since then, we've added the famous Big-Mac, the Quarter Pounder with Cheese,
the McChicken, and much more! Through serving high quality meals and giving excellent service we've been able to expand our growth to 119 countries around the world.
</div>
<footer></footer>