1
私はこの空白の空白を私のヘッダーの下から取り除こうとしています。私は相対的な位置と絶対的な位置を使ってスペースを私のdivに置き換えました。しかし、私がそうすると、突然私のリンクが機能しなくなります。どんな支援も大歓迎です。ヘッダーの下にあるこの空白を安全に取り除く方法はありますか？
@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>