tempus: menü mit grafik

Beitrag lesen

SELF-Forum

menü mit grafik

tempus
– Informationen zu den Bewertungsregeln

hallo zusammen

ich versuche gerade ein grafisches menü mit css zusammenzustellen.

folgendes soll erreicht werden:

  • jeder button hat unterschiedliche grafiken
  • jeder button hat einen mousover-effekt (wechsel der grafik durch verschieben der hintergrundgrafik)
  • hinter der grafik soll der listen-text der links versteckt sein (stichwort barrierefreiheit)
  • auf der aktuellen seite soll der betreffende button durch id=current mit einem komplett neuen hintergrundbild ersetzt werden

was bei mir bisher nicht gelingen will:

  • der hover effekt will ums verrecken nicht klappen
  • das mit id current kriege ich auch nicht hin

nicht wirklich ein neues problem, aber ich kriegs einfach nicht hin.
es wäre wirklich nett wenn mir hier jemand helfen könnte.

grüße
oliver

ach ja, der bisherige code

html:

<html>
<head>
<title>Start</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="layout/layout.css">
</head>
<body>

<div id="navcontainer">
     <ul>
       <li id="start"><a href="#" id="current"><span></span>start</li>
       <li id="praxis"><a href="praxis.html"><span></span>praxis</a></li>
       <li id="therapie"><a href="therapie.html"><span></span>therapie</a></li>
       <li id="massage"><a href="massage.html"><span></span>massage</a></li>
       <li id="kontakt"><a href="kontakt.html"><span></span>kontakt</a></li>
     </ul>
</div>

</body>
</html>

css:

#navcontainer
{
 height:80px;
}

#navcontainer ul
{
  margin:0;
  padding:0;
  list-style-type:none;
}

#navcontainer li
{
  display:block;
  width:60px;
  position:relative;
  display:inline;
}

#navcontainer li span
{
  display:block;
  position:absolute;
  width:54px;
  height:55px;
}

#kontakt span
{
  background-image:url(buttons/kontakt.gif);
  background-repeat:no-repeat;
}

#kontakt span a:hover
{
  background-position: 0 -55px;
}

#kontakt span a:current
{
  background-image:url(buttons/kontakt-aktuell.gif);
  background-repeat:no-repeat;
}

#massage span
{
  background-image:url(buttons/massage.gif);
  background-repeat:no-repeat;
}

#therapie span
{
  background-image:url(buttons/therapie.gif);
  background-repeat:no-repeat;
}

#praxis span
{
  background-image:url(buttons/praxis.gif);
  background-repeat:no-repeat;
}

#start span
{
  background-image:url(buttons/start.gif);
  background-repeat:no-repeat;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln