Pépe #22: Mouseover-Buttons und -Effekte mit CSS

Beitrag lesen

Um, also deinen CSS Angaben nach, sollte deine Html-Datei in etwa so aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; harset=UTF-8">
    <style type="text/css">
.ahome       {
     display:block;
     background-image:url(images/home_inactive.gif);
     width:58px; height:25px }

.ahome:hover {
     background-image:url(images/home_active.gif);
}

.ateam       {
     display:block;
     background-image:url(images/team_inactive.gif);
     width:58px; height:25px
     margin-top:-14px; }

.ateam:hover {
     background-image:url(images/team_active.gif);
}

.aschedule       {
     display:block;
     background-image:url(images/schedule_inactive.gif);
     width:71px; height:25px }

.aschedule:hover {
     background-image:url(images/schedule_active.gif);
}

</style>
  </head>
<body>
<a class="ahome" href="http://de.selfhtml.org/">&nbsp;</a>
<a class="ahome" href="http://de.selfhtml.org/">&nbsp;</a>
<a class="ahome" href="http://de.selfhtml.org/">&nbsp;</a>
</body>
</html>

Dat ist aber nur so nen grober Umriss, du solltest dich mal genauer mit dem Aufbau einer Html-Datei auseinandersetzen. Selfhtml bietet dir dafür alles, was du brauchst.

Gruß Ben

Hallo
das klappt schon fast :D nur würde ich halt gerne den teil mit <style>...</style> extra in einer css datei haben worauf ich dann mittels...<a class="ahome" href="http://de.selfhtml.org/">&nbsp;</a> z.b. zugreife. Jedoch funktioniert das nicht er zeigt die buttons nicht an. Wenn ich das so kopiere wie du es hier gepostet hast, zeigt er den Button Home zwar an aber ich kann ihn mit margin-top oder margin-left nicht mehr verschieben...

PS: Tut mir leid das ich mich hier so doof anstelle, aber ich bin noch dabei mich mit allem vertraut zu machen :(