Problem: Verweis-sensitive Grafiken und Hover im CSS

Manethos · 21 November 2010

Hallo Leute,

Folgendes Problem:
Auf meiner Startseite sind 3 Große Buttons zu sehen. Wenn man mit der Maus drüber fährt färben sich diese Rot und 2 Buttons erscheinen darunter. (siehe Screenie am Ende)

Code:

a.AsiaButton 		{
   display:block;
   width:300px;
   height:450px;
   background:transparent url(../Grafiken/Hover/AsiaHover.png) no-repeat top left ;
					}

a.AsiaButton:hover {
   display:block;
   width:300px;
   height:450px;
   background:transparent url(../Grafiken/Hover/AsiaHover.png) no-repeat bottom left;

Soweit funktioniert ja auch alles...
Nun habe ich jedoch solche "LinkBoxen" definiert die genau auf den 2 kleineren Buttons liegen. Sie funktionieren sprich sie verlinken zum richtigen Ziel jedoch geht der Hover-Effekt beim "betreten" der Linkboxen und somit auch die kleinen Buttons flöten.

Code:

#map {
position: relative;
}

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

#map a {
position: absolute;
text-indent: -1000em;
}
#map .Button1 a {
top: 340px;
left: 5px;
width: 135px;
height: 65px;
}

#map .Button2 a {
top: 340px;
left: 160px;
width: 135px;
height: 65px;
}

Und hier die HTML-Datei.

HTML:

<html>

<head> 

<title>Restaurant Gehimtipps</title>
<link href="CSS/layout.css" 		rel="stylesheet" 	type="text/css">
<link href="CSS/LinkBoxen.css" 		rel="stylesheet"	type="text/css">
<link href="CSS/Hover.css" 			rel="stylesheet" 	type="text/css">
<link href="CSS/Hover.css" 			rel="stylesheet" 	type="text/css">

</head>

<body>
<center><img src="Grafiken/Headline.png" alt="Restaurant-Geheimtipps">

<br /><br /><br /><br />

<table width="1039" border="0" align="center">
  <tr>
  <th width="400">	<div id="map">
                	<a class="AsiaButton"></a>
                    <ul>
                        <li class="Button1"><a href="Links/A1.html">Asiatisch1</a></li>
                        <li class="Button2"><a href="Links/A2.html">Asiatisch2</a></li>
                    </ul>
                    </div></th>
                    
  <th width="400"><div id="map">
                	<a class="ItaButton"></a>
                    <ul>
                        <li class="Button1"><a href="Links/I1.html">Italienisch1</a></li>
                        <li class="Button2"><a href="Links/I2.html">Italienisch</a></li>
                    </ul>
                    </div></th>
                    
  <th width="400"><div id="map">
                	<a class="DeuButton"></a>
                    <ul>
                        <li class="Button1"><a href="Links/D1.html">Deutsch1</a></li>
                        <li class="Button2"><a href="Links/D2.html">Deutsch2</a></li>
                    </ul>
                    </div></th>
  </tr>
</table>
</center>
</body>
</html>

Meine Frage also. Was muss ich wie machen da mit der Hover-Effekt beim 'betreten' der Linkboxen immer noch aktiv bleibt?

Hier der versprochene Screenie ;)

threadi · 21 November 2010

Da Du für alle Links innerhalb von #map besondere Eigenschaften definierst, zählen diese zusätzlich zu den von dir für AsiaButton definierten Eigenschaften. Mit der Firefox-Erweiterung Firebug würdest Du das sofort sehen können. Beseitigen kannst Du das indem Du entweder die Links innerhalb von #map anders definierst, z.B. so

Code:

#map li a

oder die AsiaButtons anders definierst, so dass sie im CSS einen höheren Wert haben und dort "überzähligen" CSS-Eigenschaften zurücksetzen.

Btw.: Dein HTML-Code ist grauenhaft. Die Tabelle ist falsch eingesetzt und unnötig. Ebenso einige der verwendeten HTML-Elemente.

Manethos · 21 November 2010

Ich bin ein wirklicher Anfänger im Bereich des HTML / CSS.
Wenn du mir sagen könntest wie ich die Grafiken auch ohne Tabelle so schön nebeneinander bekomme und ich den Buttons "einen höheren Wert" verschaffe wäre ich dir sehr dankbar !

Problem: Verweis-sensitive Grafiken und Hover im CSS

Manethos

Neues Mitglied

threadi

Moderator

Manethos

Neues Mitglied

Neueste Beiträge