Menü als waagerechte Liste mit gleichbreiten Hyperlinks
Hier der Code aus dem <style>-Abschnitt:
#navcontainer ul {
padding:0; margin:10px; background:darkgreen; color:white; float:left; width:98%; font-family:arial, helvetica, sans-serif; } |
Der über die gesamte Seitenbreite gehende dunkelgrüne Bereich mit den Hyperlinks wird mit Hilfe von navcontainer ul mit einer Breite von 98% erreicht. |
#navcontainer ul li {display:inline;} |
Da Listeneinträge normalerweise untereinander angezeigt werden, bedarf es der Angabe, dass sie innerhalb einer Zeile angezeigt werden sollen. |
#navcontainer ul li a { padding:5px; background:darkgreen; color:white; text-decoration:none; float:left; width:130px; border-left:1px solid lightgrey; } |
Durch die Angabe float:left werden die Hyperlinks innerhalb der Listeneinträge ( li) nebeneinander angezeigt und per width:130px wird die Breite festgelegt, da dieses Attribut für Hyperlinks innerhalb der Liste zur Verfügung steht. |
#navcontainer ul li a:hover {background:seagreen;} |
Beim Hovern über die Links ändert sich die Hintergrundfarbe. |
Um die gleiche Breite der Hyperlinks zu erreichen, bedient man sich also des Umweges einer Liste. Der Aufwand ist relativ gering, wobei Sie im Internet durchaus andere Lösungen finden können z. B. unter Listamatic. Testen Sie Ihre Lösungen bitte immer mit mehreren Browsern - auch kleine Änderungen im Code können große (und häufig unbeabsichtigte) Folgen haben.