nicht angemeldet
Was ich noch nicht hinbekommen habe ist, den Text vertikal zu zentrieren.
Dazu mussen die a-Elemente innerhalb der li-Elemente zentriert werden, zum Beispiel mit Flexbox.
Aha! Das heißt, ich muß li wieder als Container umfunktionieren damit "a" zu items werden und der flex-code anwendbar ist. Außerdem konnte ich den code etwas verkürzen. Das wäre eigentlich der fertige code. Ich denke, daß ich nichts übersehen oder zu viel geschrieben habe:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0;
padding: 0;
background-color: aqua;
}
ul {
padding: 0;
width: 900px;
height: 70px;
background-color: white;
display: flex;
list-style: none;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-around;
outline: 2px solid;
}
li {
background-color: red;
width: 80px;
height: 80%;
font-size: 15px;
display: flex;
align-items: center;
justify-content: space-around;
outline: 1px solid;
}
a {
text-decoration: none;
font-size: larger;
}
a:hover {
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="Allgemein.html">Allgemein</a></li>
<li><a href="Schwein.html">Schwein</a></li>
<li><a href="Rind.html">Rind</a></li>
<li><a href="Geflügel.html">Geflügel</a></li>
<li><a href="Ziege.html">Ziege</a></li>
<li><a href="Lamm.html">Lamm</a></li>
<li><a href="Kaninchen.html">Kaninchen</a></li>
<li><a href="Wild.html">Wild</a></li>
<li><a href="Fisch.html">Fisch</a></li>
<li><a href="Suppen.html">Suppen</a></li>
</ul>
</body>
</html>
Auffällig ist, daß der rechte und linke Freiraum kleiner ist als der Zwischenraum?
Weiters habe gesehen, daß statt <ul> <ul class= "navigator"> geschrieben wird. Ist das nicht unnötig; ebenfalls im CSS-code "ul li" anstatt nur li. Einen Sinn würde es machen wenn ich mehrere navs habe.
--
LG Franz
LG Franz
Der Martin
Gunnar Bittersmann
Matthias Apsel
Auge