Hallo, ich habe leichte Schwierigkeiten mit meiner Navigation!
Problem:
Ich habe bei CSS den Tag :hover benutzt. Soweit funktioniert es auch, aber wenn ich mit der Maus rübergehe, verschiebt sich alle nach rechts, also was im Menü daneben steht (rechts).
Wenn ich padding nur oben und unten mache, vertuscht das nicht, aber es endet direkt vor/hinter dem Wort!
Ich habe alles so wie im Video gemacht:
<a href="https://www.youtube.com/watch?v=XZsuI5wyRzs">https://www.youtube.com/watch?v=XZsuI5wyRzs</a>
Code
<html>
<head>
<meta charset="utf-8">
<title>SimuUndQuex</title>
<style>
body{
margin: 0;
padding: 0;
font-family: verdana;
}
nav{
width: 100%;
background: lightblue;
}
ul{
width: 80%;
margin: 0 auto;
padding: 0;
}
ul>li{
list-style: none;
display:inline-block;
}
ul>li:hover{
background: orange;
}
li{
padding: 20px;
display:block;
}
ul>li>a{
color: #fff;
text-decoration: none;
}
h1
{
font-size: 50px;
color: grey;
text-align: center;
}
#Banner
{
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 20px;
}
#willkommenstext
{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-bottom: 20px;
border: #000000 1px solid;
width: 1024px;
}
#button
{
display: flex;
align-items: center;
justify-content: center;
}
#createclan
{
background-color: #00CCFF;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
#createclan :hover
{
background: #0066FF
}
#ranktext
{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
border: #000000 1px solid;
width: 1024px;
}
#lsbanner
{
margin-top: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#fortnitebanner
{
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
}
#mcbanner
{
margin-top: 8px;
margin-bottom: 100px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="news.html">News</a>
<li><a href="clans.html">Clans</a>
<li><a href="range.html">Ränge</a>
<li><a href="games.html">Games</a>
</ul>
</nav>
<div>
<div>
<h1>Clans</h1>
</div>
<div id="Banner">
<img src="/image/kermit_.jpg" alt="Das Bild konnte nicht geladen werden...">
</div>
</div>
<div>
<div id="willkommenstext">
<p><strong>Clans</strong>
<br>
<br>Dich nervt es, dass du dauernd mit mehreren Leuten spielst,
<br>aber dauernd andere Leute deinen Channel betreten?
<br>Dann nutze unseren Clan-Bereich!
<br>Du kannst Clans erstellen oder auch einem Clan beitreten!
<br>Weitere Informationen findest du hier auf dieser Seite!</p>
</div>
<div>
<div id="button">
<button type="button" id="createclan" onclick="location.href='https://goo.gl/forms/xh3ggV7fBZ0PGpQx2'">Erstelle deinen Clan</button>
</div>
</div>
</body>
</html>