nicht angemeldet
<div id="menu">
<a href="news.php" target="mainframe"><div id="menunews"></div></a>
<a href="media.html" target="mainframe"><div id="menumedia"></div></a>
</div>
Listen solltest du mit ul oder ol auszeichnen, dann hast du auch gleich genug Elemente, die du formatieren kannst.
Links sollten, um zugänglich zu sein, nicht leer sein, sondern einen Linktext haben. Den kannst du dann mit CSS verstecken, wenn du ihn durch eine Grafik ersetzen willst. Stichwort dazu: CSS Image Replacement.
#menunews {
width:126px;
height:52px;
background: url(../bilder/layout/menu_buttons/news_active.png);
top:0px; left:0px;
position:absolute;
display: block;
}
#menunews:hover
{ width:126px;
height:52px;
background:url(../bilder/layout/menu_buttons/news_hover.png);
top:0px; left:0px;
position:absolute;
display: block;
}
#menunews:active, #menunews:focus
{ width:126px;
height:52px;
background:url(../bilder/layout/menu_buttons/news_inactive.png);
top:0px; left:0px;
position:absolute;
display: block;
}
Warum wiederholst du die ganzen Eigenschaften immer wieder für jedes Menüelement und dann auch noch für jeden Status?
:hover, :active und :focus sind Unterzustände, die du nicht separat formatieren musst. Sie »erben« vom Normalzustand und du brauchst nur abweichende Formatierungen angeben.
:hover gibt es bei vielen Elementen, :active und :focus machen für ein div (oder span) keinen Sinn.
Wozu brauchst du diese divs bzw. spans überhaupt? Warum formatierst du nicht das a-Element direkt? Auch ein a kann display:block bekommen, falls nötig.
Warum positionierst du die Elemente innerhalb des Menüs noch einmal absolut? Wieso lässt du sie nicht im normalen Fluss, sodass sie untereinander angezeigt werden? Abstände kannst du auch mit margin und padding umsetzen. Du bist anscheinend einer »alles absolut positionieren«-Idee verfallen.
Nutze ein Selektor wie »#menu a«, um allen a-Elemente im Menü gleiche Basis-Formatierungen zu geben. Dann brauchst du ein Zehntel des jetzigen Quellcodes.
Ferner wären für dich CSS-Sprites interessant. Da fasst man die verschiedenen Status-Grafiken (Normal und Highlighted) in einer zusammen und verschiebt diese beim :hover bloß mit background-position. Das sorgt für ein schnelleren Wechsel beim Mouseover, weil der zweite Status bereits von Anfang an geladen ist.
Mathias