Problem: Verweis-sensitive Grafiken und Hover im CSS

Manethos

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;

Alles anzeigen

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;
}

Alles anzeigen

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"></center>


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


<table 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>
</body>
</html>

Alles anzeigen

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 ;)

Ericfischer

Wenn ich mich nicht täusche brauchen alle class="AsiaButton" und dann mittels class="Button1".
Den Button1 Hover musst du dementsprechend mit dem AsiaButton Hover verknüpfen.

Mach vorher ein Backup...^^ Ich bin nicht 100% sicher ob das geht.

Manethos

Ich versteh jetzt nicht was du meinst.

Sry ich bin halt ein HTML-Noob!

Wenn du etwas genauer beschrieben könntest was du meinst wär' das ziehmlich hilfreich.

Ericfischer

Kannst du evtl. mal einen Link zu der Seite reinstellen?

Ich würde es gern mal versuchen anzupassen

Ericfischer

Der Threadersteller hat mir die Resourcen mal geschickt...

Du hast das <a> an der falschen Stelle geschlossen.
So muss das aussehen:

HTML

<th width="400">
	<div id="map">
        <a class="AsiaButton">
            <ul>
                <li class="Button1"><a href="Links/A1.html">Asiatisch1</a></li>
                <li class="Button2"><a href="Links/A2.html">Asiatisch2</a></li>
            </ul>
        </a>
    </div>
  </th>

Jetzt musst du aber noch die Hover Grafiken anpassen!

LG
Eric

Manethos

Wenn ich ich den a-Tag später schließe löst sich mien Problem leider auch nicht. Der Hover-Effekt verschwidnet beim "betreten" der LinkBox

Ericfischer

Also im Opera hatte ich das Problem gestern nicht.
Ich kann mir das ja nochmal kurz anschauen...

Manethos

Das ganze ist ein Schulprojekt bin also an Firefox und InternetExplorer gebunden obwohl der IE außeracht gelassen werden kann

Ericfischer

CSS hab ich jetzt nur ein paar Basics -.-

schau dir mal auf cssplay.co.uk die "CSS Multilevel Dropdown Menüs" an.
Das ist das was du machen willst.
Ich hab dafür jetzt aber grad keine Zeit und auch keine lust mich damit groß zu beschäftigen.

Sorry, aber du schaffst das schon

Aber bestimmt kein Schulprojekt an nem Gymnasium?!

Andere Forenmitglieder hier haben mehr Ahnung in solchen Sachen wie ich... welche sich auch mal melden könnten

Tobse

Naja, mit CSS geht das auch nicht ganz so gut. Aber dashier funktioniert (im FF 3.6 getestet):

HTML

<html>
 <head>
  <style type="text/css">
     .tipButton {
    width: 300px;
    height: 400px;
   }
   .tipButton .button {
    width: 300px;
    height: 300px;
    background: #000;
    /* Hier dann das Background-URL hin*/
    background-position: 0 0;
   }
   .tipButton .linkButton {
    display: none;
    border: 2px solid #808080;
    background: #CCC;
    color: #000;
    width: 120px;
    height: 30px;
    float: left;
   }
   div.tipButton:hover .button {
    /* Hier das Background-Position für hover */
    background: #F00;
   }
   div.tipButton:hover .linkButton {
    display: block;
   }
  </style>
 </head>
 <body>
  <div class="tipButton">
   <div class="button"></div>
   <a href="foo.html" class="linkButton">Tipp1</a>
   <a href="foo2.html" class="linkButton">Tipp2</a>
  </div>
 </body>
</html>

Alles anzeigen

unknownsoldier

Tobse was du da baust ist echt nicht optimal, ich habe das gefühl du liebst es DIVs in Massen zu benutzen.

Mal davon abgesehen können ältere Browser keine "div"-Elemente hovern.

naja, ich könnte was bauen aber habe gerade keine Zeit, hier ein Hinweis[Tobses Prinzip ist von der Idee her schon richtig]:

Code

.outer_button {}
.outer_button a {display:none;}
.outer_button:hover a{display:block;}
.outer_button a:hover{}

Manethos

Ich bau mir gerade was zu sammen, die Erfolgschancen schätz ich aber als gering ein

Kannst dir ruhig Zeit lassen hab ja noch bis Freitag Zeit

unknownsoldier

Du kannst wenn du magst mir mal die benötigten Bilder senden, dann baue ich dir das zusammen.

Problem: Verweis-sensitive Grafiken und Hover im CSS

Tags

Benutzer online in diesem Thema