Grafisches Menü - Bei Aktion (z.B. hover) unterschiedliche Bilder in 3 Zellen ändern

M

Midge

Grünschnabel
Hallo Community... :)

Es liegt wohl in meinem Wesen, dass ich mir mein Leben selbst immer etwas schwerer mache, als notwendig. ;)

Mein Ziel ist es, einem bisher starren Reiter-Menü Leben (wenn möglich ohne JS) einzuhauchen. Das Problem besteht allerdings darin, dass:

01.) dieses Menü 3 Zellen beinhaltet
02.) jede Zelle zwei unterschiedliche Images besitzt
03.) die bei der jeweiligen Aktion (z.B. überfahren eines Links in einer Zelle), auch die Images der anderen Zellen verändern soll.

Mein Anliegen ist in der "Sortierung" (oder Schichtung) der Reiter begründet: von Links nach Rechts (der Reiter von td 1 liegt auf dem von td 2 und dieser auf dem von td3)
menue_screen_left_to_right.jpg
... und von Rechts nach links... (und hier liegt der Reiter von td 3 auf dem von td 2 und dieser auf dem td1)
menue_screen_right_to_left.jpg

Aus diesem Grund reichen zwei identische Bilder, die in allen Zellen gleich sind nicht aus. Die oben gezeigten zwei Möglichkeiten bestehen aus insgesamt fünf unterschiedlichen Bildern. Abhängig davon, ob der ganz linke oder ganz rechte Reiter aktiviert wurde. Genau genommen bringt als jede hover Definition (einer Zelle) ein anderes Bild für die angrenzenden zwei Zellen mit sich.

Ein paar Grundlagen von CSS sind mir vertraut, allerdings nicht das komplette Spektrum der Möglichkeiten. In meiner vagen Vorstellung müsste es so aussehen, wenn jede Zelle eine eigene Classe und ID bekäme:

Code: 
td1.a:hover {
td1.background: url(hintergrundgrafik_td1_active.jpg);
td2.background: urlhintergrundgrafik_td2_inactive.jpg);
td3.background: url(hintergrundgrafik_td3_inactive.jpg);

}

Hoffentlich ist es mir gelungen, mein Anliegen einigermaßen verständlich auszudrücken!? :confused: Ich würde mich sehr über einige Lösungsansätze freuen, die es mir ermöglichen, beim überfahren (oder aktivieren) der Zelle (td 1) gleichzeitig die Bilder von (td 2) und (td 3) zu ändern.

Danke im Voraus...
Midge
 
Zuletzt bearbeitet:
Meine Frage im ersten Beitrag dieses Themas ist inzwischen hinfällig, da ich mich entschieden hab die Button nicht überlappt darzustellen. Allerdings habe ich inzwischen ein anderes Problem, welches scheinbar auf den Box-Modell-Fehler des Internet Explorer zurückzuführen ist. Ich habe mir die Browserweichen angesehen, aber irgendwie keine Option gefunden, die ich umsetzen könnte. Vorwegnehmen möchte ich, dass ich die Dokumenttyp-Deklaration (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">) nicht ändern möchte, da die Basis ein Forum aus dem Jahr 2003 ist.

Meine Gegebenheiten:

Innerhalb einer Zelle (keine Höhe, nur padding-top: 2px) habe ich eine weitere Tabelle für mein Menü angelegt.

PHP: 
$reiter_menue .= '<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr style="vertical-align: bottom;">';
$reiter_menue .= '<td class="trackmenue"><a onfocus="blur();" class="trackmenue" href="#menue">Twelve Inch</a></td>';
$reiter_menue .= '<td class="trackmenue"><a onfocus="blur();" class="trackmenue" href="#">Seven Inch</a></td>';
$reiter_menue .= '<td class="trackmenue"><a onfocus="blur();" class="trackmenue" href="#">Remix Services</a></td>';
$reiter_menue .= '<td class="trackmenueend"></td>';
$reiter_menue .= '<td >&nbsp;</td>';
$reiter_menue .= '</tr></table>';

Die CSS-Datei beinhaltet folgendes:

HTML: 
td.trackmenueend { /* Ist ein abschließendes Image ohne Funktion*/
background-image:url(/templates/fiblue3d/images/raiter_menue/v2_reiter_end.jpg);
background-repeat:no-repeat;
background-position: 0px 0px;
width: 36px;
height: 20px;
text-align:center;
padding: 0px 0px 0px 0px;
/*margin-top:10px; */
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
vertical-align: middle;
}

td.trackmenue {/* Zelle für den Link*/

   position:relative;
   width: 140px;
    height: 20px;
    text-align:center;
    font-size: 12px;
    font-family: Arial, Verdana, sans-serif;
    vertical-align: bottom;
              }

a.trackmenue {
       display:block;
       position:relative;
       left:0;
       top:0;
       text-decoration:none;
       vertical-align: bottom;
       margin: 0px 0px 0px 0px;

      }
a.trackmenue:link, a.trackmenue:visited {
       display:block;
       background-image:url(/templates/fiblue3d/images/raiter_menue/v3_reiter_inactive.jpg);
       background-repeat:no-repeat;
       height: 20px;
       width: 140px;
       background-position:0px 0px;
       padding: 3px 0px 0px 0px;
       color:#184A6D;
       vertical-align: bottom;
      }

a.trackmenue:hover {
       display:block;
       background-image:url(/templates/fiblue3d/images/raiter_menue/v3_reiter_active.jpg);
       background-repeat:no-repeat;
       background-position:0px 0px;
       height: 20px;
       width: 140px;
       padding: 3px 0px 0px 0px;
       color:#0077B5;
       font-weight: bold;
       vertical-align: bottom;
      }

a.trackmenue:active {
       display:block;
       background-image:url(/templates/fiblue3d/images/raiter_menue/v3_reiter_active.jpg);
       background-repeat:no-repeat;
       background-position:0px 0px;
       height: 20px;
       width: 140px;
       padding: 1px 0px 0px 0px;
      color:#ff8c00;
      font-weight: bold;
      vertical-align: bottom;
      }

Sorry... wenn die CSS-Definition inzwischen unnötig viele Anweisungen enthält. Damit möchte ich nur verdeutlichen, dass ich alle mir bekannten Möglichkeiten durchgespielt habe.

Zum Problem: Ich kann es drehen und wenden wie ich möchte, der Text innerhalb der Links, wird nicht vertikal ausgerichtet und sitzt immer am oberen Rand der 20 px Höhe. Erst mit padding-top: 2px weicht er vom oberen Rand. Unerwünschter Nebeneffekt ist, dass dadurch im Firefox die Hintergrundgrafik nach oben rutscht und unterhalb nicht mehr bündig ist... denn im FF addieren sich Höhe + Innenabstand (padding). Gern würde ich auf padding verzichten, sofern sich der Text vertikal zentrieren ließe (was er aber nicht macht). Ich verstehe es nicht, denn bei einer Höhe von 20 Pixeln und einer Texthöhe von 12 Pixeln, sollten eigentlich noch 8 Pixel Spielraum für "vertical-align: middle" (oder bottom) sein!?
Im Firefox (3.6.16):
sreen_menue_firefox_1.jpg
Im IE 8:
sreen_menue_IE8_1.jpg

Ich habe es auch mit Listen versucht... Das Ergebnis war identisch, zuzüglich eines weiteren Problems. ;) Es wäre sehr schön, wenn mir jemand zeitnah helfen könnte. Danke im Voraus!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück