Hover-Effekt bei Buttons - Nicht richtig angezeigt!?

ceville · #1 (**permalink**) 29.09.2009, 11:52

Mahlzeit!

Ich arbeite derzeit an einem Schulprojekt und möchte in der Navigationsleiste Buttons mit einem Hover-Effekt versehen.

CSS:

Code:

.navi-home {
  background-image: url(../img/buttons/button_01.png);
  width: 49px;
  height: 43px;
  display: inline;
  position: relative;
}
.navi-home:hover, .navi-home:active, .navi-home:focus {
  background-image: url(../img/buttons/button_01_hover.png);
  width: 49px;
  height: 43px;
  display: inline;
  position: relative;
}

Und der dazugehörige PHP-Teil:

PHP-Code:


			
<div class="navigation">



<a href="home.php" class="navi-home"><img src="./img/blank.gif" border="0" width="49" height="43"></a><a href="./pages/news.php" class="navi-news"><img src="./img/blank.gif" border="0" width="82" height="43"></a>

  

</div>

Mein Problem ist jetzt aber, dass bei den beiden Buttons für Home und News, die ich bisher mit dem Hover Effekt versehen habe, jeweils nur ein kleiner Teil des Bildes angezeigt wird. - Dieses Problem gibts nur im Firefox. Der Internet Explorer stellt alles richtig dar, Opera hingegen zeigt nur eine weiße Fläche. =(

Und hier gehts zum derzeitigen Ergebnis: Fitnesscenter Relax | Home

Ich wäre euch wirklich sehr dankbar, wenn mir jemand weiterhelfen könnte.

Danke schonmal!

niemand · #2 (**permalink**) 29.09.2009, 16:54

Mit dem CSS änderst du nur den Hintergrund des <a>-Elements. Da das <a>-Element aber ein <img>-Element enthält überdeckt dieses <img>-Element den Hintergrund des <a>-Elements. Jedenfalls geht das aus den Codeschnipseln in deinem Beitrag hervor. Auf der verlinkten Seite dagegen haben die <a>-Elemente überhaupt keine Klassenangaben class="home-<whatever">. Hast du da weiter herumprobiert und deshalb auch dieses Javascript? Außerdem fehlt bei den <img>-Elementen der Alternativtext: wie soll jetzt jemand, der keine Bilder sehen kann oder will (ob blind oder nur mit Modem online) wissen, wo welcher Link hinführt?

hubspe · #3 (**permalink**) 29.09.2009, 17:07

Hi,

Zitat:

Zitat von ceville

Mahlzeit!

Ich arbeite derzeit an einem Schulprojekt und möchte in der Navigationsleiste Buttons mit einem Hover-Effekt versehen.

Euer Lehrer arbeitet scheinbar mit mittelalterlichen Techniken.

Erstmal fehlt deiner Seite ein Doctype.

Ein Menü ist semantisch eine Liste. Bei abgeschalteten Grafiken ist dein Menü nicht mehr zu gebrauchen.

Javascript braucht man bei so einer einfachen Seite sicher nicht.

Schau mal in die CSS-FAQ, dort werden Menüs ausführlich behandelt. Punkt 15 befasst sich mit grafischen Menüs.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
hover effekt	Pillemon	CSS	8	14.04.2008 16:21
Hover Effekt geht nicht	superbobbes	CSS	9	31.01.2008 07:11
Problem mit CSS - Attribute für hover	tzepf	CSS	0	09.12.2006 16:56
[IE] Seite wird erst nach einem Reload richtig angezeigt	campylobacter	CSS	3	29.07.2006 14:57
Probleme mit Hover Effekt	Bakan	CSS	0	17.12.2005 11:52