HTML und CSS - Navigation
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:
https://www.youtube.com/watch?v=XZsuI5wyRzs
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete 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>