Andreas: Schaltflächen mit div

Beitrag lesen

Hallo,

Bislang hatte ich immer Schaltflächen, die per Tabelle und JavaScript funktionierten. Nun will ich aber ganz nach dem Featureartikelvorbild lieber div und CSS einsetzen.

Hier mein CSS-Bereich:

.menugroup { display:block; background:#800000; color:#ffffff; font-family:"Arial","Helvetica",sans-serif; font-size:13px; text-align:center; width:90px; margin:1px; height:16px; }

a.menuitem { display:block; background-image:url(hintergrund.gif); background-repeat:no-repeat; height:15px; padding-left:9px; text-align:left; width:120px; font-family:"Arial","Helvetica",sans-serif; font-size:12px; text-decoration:none; margin:1px; }

a.menuitem:link    { color:#ffffff; background-color:#c00000; }
a.menuitem:visited { color:#ffffff; background-color:#c00000; }
a.menuitem:hover   { color:#ffffff; background-color:#ff4000; }
a.menuitem:active  { color:#ffffff; background-color:#c00000; }

Und hier ein html-Ausschnitt:

<div>
   <span class="menugroup">Überschrift</span>
   <a class="menuitem" href="datei1.html">Link 1</a>
   <a class="menuitem" href="datei2.html">Link 2</a>
</div>

Eigentlich bin ich schon ganz zufrieden. Ich habe aber noch zwei Problemkinder:

1. Mein Opera 5 zeigt das Hintergrundbild im Linkfeld nicht an. Bei den Tabellenschaltflächen ging es seinerzeit noch.

2. Der Netscape 4.72 interpretiert das CSS wie erwartet nicht. Leider kann man aber auch die Links nicht anklicken. Das hatte ich nicht erwartet. Wie kann man es trotzdem hinbekommen, dass es für NN-Nutzer zwar blöd aussieht, aber wenigstens klickbar bleibt? Geht das überhaupt? Vielleicht kriegt man es ja sogar hin, dass es auch auf dem NN gut aussieht.

Was würdet ihr am Quellkode noch optimieren oder verändern? Besonders bei den Pseudoelementen sieht es sehr nach doppelt gemoppelt aus, ich kenne mich aber dort nicht so gut aus und traue mich nicht etwas zu löschen.

Vielen Dank
Andreas