Ich bastle zurzeit an einer Website herum, die rein zum Testen ist. Jedoch habe ich einen Fehler, den ich mir nicht erklären kann.
Ich habe unterhalb meiner Website eine Leiste mit Links. Jedoch wird diese nicht weiter nach unten verlegt, wenn zu viel Text dort steht, wie man auf dem Bild erkennt.
Code ist folgender in HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Luez</title>
</head>
<body>
<div class="navigationsleiste">
<div class="logo">
<img class="andreslogo" src="./bilder/andreslogo.png" width="120" height="105">
</div>
<div class="links">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>
<a href="#">Link 7</a>
</div>
</div>
<div class="uebermich">
<center><h2 style="text-decoration:underline;">Überschrift</h2></center>
<br /><br />
<center><h2>Allgemein</h2></center>
<br />
<center><p>Lorem ipsum dolor sit amet,</p></center>
</div>
<div class="unterlinks">
<center>
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
</center>
</div>
</body>
</html>
Code der CSS-Datei:
* {
margin: 0;
padding: 0;
text-decoration: none;
font-family: ;
}
body {
background-color: #5a5a5a;
}
.navigationsleiste {
width: 100%;
height: 120px;
background-color: #404040;
}
.logo {
float: left;
padding: 15px;
}
.andreslogo {
float:left;
}
.links {
float: right;
padding-top: 49px;
padding-right: 50px;
}
.links a {
font-size: 25px;
padding: 14px;
color: black;
}
.uebermich {
margin-top: 80px;
font-size: 26px;
}
.spieleallg {
margin-top: 80px;
font-size: 26px;
}
.impressum {
margin-top: 80px;
padding-left: 75px;
font-size: 26px;
}
.unterlinks {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background-color: black;
}
.unterlinks a {
padding-left: 100px;
font-size: 23px;
color: white;
}
Tut mir leid, falls es zu unübersichtlich ist. Aber wie gesagt, ich bin, was das angeht, noch Anfänger.