1
Meine Webseite hat all diesen zusätzlichen weißen Abstand nach meinem Inhalt. Wenn du meinen Code in deine IDE einfügen würdest, wäre das großartig! Ich habe ein paar Dinge ausprobiert, wie zum Beispiel ein div um den ganzen Inhalt der Seite machen und etwas Padding und Rand auf der Unterseite setzen, aber ich kann es einfach nicht bekommen!Extra HTML5 Leerer Bereich weißer Abstand
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/about.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Halong Bay</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="index-bay.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="map.html">Map</a></li>
<li><a href="tables.html">Table</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section class="intro">
<div class="inner">
<div class="content">
<h1>About Halong Bay</h1>
<a class="btn" href="#link"> get started </a>
<a class="btn" href="index-bay.html"> Back to Home </a>
</div>
</div>
</section>
<article>
<h1>Halong Bay</h1>
<p id="link">
Ha Long Bay, is in Northeast Vietnam. It is known for its beatiful emerald waters and thousands of towering green limestone islands. It is topped by rainforests, junk boat tours, and sea kayak expeditions. The boat tours takes it visitors past islands named for their shapes, including Stone Dog, and Teapot island. The region is popular for scuba diving, rock climbing, and hiking. It is a really beatiful place to visit and has some most fasinating species of animals that live in this bay.
</p>
</article>
<div id="history">
<h1>History of Ha Long Bay</h1>
<p>
For hundreds of years Halong bay has been an important culture and history of Vietnam. Halong bay also known as Vinh Ha Long, means "Bay of the Descending Dragon". There are approximately 1,969 small islands in this bay. All compromised of differnt sizes and form. These islands have intrigues and amazed locals for hundreds of years. There are over 200 species of fish and over 250 species of mulluks in the water.
</p>
</div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
background: url(http://greenhillholidays.info/files/uploads/2016/04/Vietnam-HD-Wallpapers.jpg);
background-size: cover;
display: table;
}
.intro .inner {
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.content {
text-align: center;
max-width: 500px;
margin: 0 auto;
}
.content h1 {
font-family: 'Raleway';
color: #f9f3f4;
text-shadow: 0px 0px 300px #000;
font-size: 500%;
}
.btn {
border-radius: 9px;
font-family: 'Raleway';
color: white;
font-size: 135%;
padding: 10px 20px;
border: solid #036AB1;
text-transform: uppercase;
text-decoration: none;
margin-right: 20px;
font-weight: bold;
}
.btn:hover {
color: #fff;
border: solid #fff 3px;
}
p {
font-size: 160%;
line-height: 200%;
margin: 3%;
font-family: 'Raleway';
padding: 200px;
}
nav ul li {
position: relative;
color: red;
font-size: 24px;
display: inline-block;
text-align: right;
margin-right: 40px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Raleway';
font-weight: 900;
}
nav ul li a {
color: black;
text-decoration: none;
}
nav ul li a:hover {
color: blue;
}
.navbar {
color: black;
text-align: center;
}
a.btn {
font-weight: 950;
}
#link {
position: relative;
bottom: 100px;
}
p:first-letter {
font-size: 200%;
}
article {
padding: 50px;
}
#top1 {
font-size: 30px;
text-align: center;
}
article h1 {
font-size: 40px;
text-align: center;
}
#history h1 {
font-size: 50px;
text-align: center;
position: relative;
bottom: 300px;
}
#history p {
position: relative;
bottom: 500px;
}
Hey Mann, du hattest absolut Recht Ich habe diese Polsterung dort auf Unfall gelegt haha! 200 Padding ist viel zu viel für jedes HTML-Element. Ich hatte eine Frage, aber könnten Sie klären, warum es schlecht ist, Position relativ zum Boden zu verwenden? Wenn ich Elemente normalerweise etwas nach oben, links, rechts oder unten drücke und ziehe, gebe ich ihr normalerweise eine relative Position, bevor ich das tue? Ist das falsch oder gibt es einen besseren Weg? Danke im Voraus. –
Es hat nicht gesagt, dass es _bad_ war. Die Verwendung von Bottom in diesem Fall war keine so gute Idee, da sie auf dem unteren Bildschirmrand basierte und nicht auf dem darunter liegenden Element. Sie sollten stattdessen margin-bottom verwenden. – suufi
oh okay Danke Mann, ich schätze es! –