Hi Leute,
wollte einfach mal eine Menüleiste erstellen, die sich über die gesamte Bildschirmbreite erstreckt.
Dazu habe ich die width auf initial gesetzt, was funktioniert hat.
Jetzt habe ich derzeit auf der Webseite 4 Kategorien in der Menüleiste.
Wenn ich die Breite der Kategorien auf 25% setze, hat jede Kategorie 424px, obwohl die komplette Breite 1920px beträgt.
Sezte ich die Breite manuell auf 480px erstreckt es sich genau über den ganzen Bildschirm, nicht zu kurz nicht zu weit, da 480px * 4 = 1920px sind.
Padding, Margin und Border sind 0px.
HTML:
<ul id="menu">
<li>
<a href="#" title="Kategorie 1">Kategorie 1</a>
</li>
<li>
<a href="#" title="Kategorie 2">Kategorie 2</a>
</li>
<li>
<a href="#" title="Kategorie 3">Kategorie 3</a>
</li>
<li>
<a href="#" title="Kategorie 4">Kategorie 4</a>
</li>
</ul>CSS:
* {
padding: 0px;
margin: 0px;
}
#menu {
text-align: center;
width: initial;
height: 10%;
position: relative;
}
#menu li {
list-style-type: none;
background-color: #003399;
width: 25%;
text-align: center;
display: table-cell;
vertical-align: middle;
height: 100px;
}
#menu li a {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
display: block;
}
#menu li:hover {
background-color: #0033FF;
}
#menu li a:hover {
color: #FF0000;
}Weiß jemand vielleicht woran das liegen könnte, würde es nämlich gerne mit 25% machen, da nicht jeder einen 16:9 Bildschirm mit 1920px hat.
Beste Grüße
jkhsjdhjs
