In diesem Tutorial zeige ich, wie man ein Menue erstellt, bei dem die einzelnen Links nebeneinander in jeweils einem farbigen Block stehen. Beim Mouseover soll sich die Farbe dieses Blocks ändern.
» so schaut’s aus
Alles, was wir brauchen, ist ein bisschen Padding und zwei verschiedene Hintergrundfarben.
Zuerst legen wir ein ganz normales Menue an.
Dazu nehmen wir eine Liste und richten die einzelnen Listenpunkte – unsere Links also – via Floating nebeneinander aus.
HTML
<ul>
<li><a href="#" target="..." title="...">eins</a></li>
<li><a href="#" target="..." title="...">zwei</a></li>
<li><a href="#" target="..." title="...">drei</a></li>
<li><a href="#" target="..." title="...">vier</a></li>
</ul>
CSS
ul {
width:500px;
height:50px;
text-align:center;
margin:0 auto;
}
ul li {
list-style-type:none;
float:left;
display:block;
}
ul li a {
text-decoration:none;
padding:10px;
margin:2px;
background:#ccc;
color:#222;
ul li a:hover {
background:#333;
color:#ddd;
}
Die insgesamte Breite der Navigation passt man unter ul { width:…; } an.
Der Rest dürfte selbsterklärend sein.
Jahh endlich weiß ich, wie das geht X3 Kannst du mir vllt. auch erklären wie mans macht, wenn man sie in exate Größe haben will? ;___; +HTML-Laie ist+ Ich meine, wenn ich z.B. ein längeres Wort schreibe, dann wird der “Block” in die Länge gezogen. Ich will sie aber untereinander in gleicher Größe machen TT
Danke schon mal Voraus <3
Hej, dafür gibst du dem Element eine feste Breite:
ul li a { width: 150px; }Durch das display: block beim Listenelement werden alle gleich breit dargestellt, auch wenn der Inhalt kürzer sein sollte als 150 Pixel.