• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hover mittels Bildverschiebung

M

memento

Neues Mitglied
Hallo Ihr!

Ich stehe vor folgender Problematik und finde nicht und nicht den Fehler:

Die Hauptnavigation besteht aus EINER Grafik und soll mittels Bildverschiebung funktionieren.
Derzeit zeigt es mir aber die gesamte Grafik an, anstatt nur einen Ausschnitt (den jeweiligen Menüpunkt) davon.
Um euch die Navigation optisch vorstellen zu können, bitte Link ansehen:

https://picasaweb.google.com/103796...authkey=Gv1sRgCNzh7PX_6sKD5wE&feat=directlink


Ich danke euch vielmals für eure Zeit und Hilfestellung!


HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css"/>
  <script type="text/javascript">swfobject.registerObject("FlashID");</script>
  <script src="scripts/swfobject_modified.js" type="text/javascript"></script>

<title>Herzlich Willkommen bei Raw Matters!</title>
  <meta name="description" content="160 Z"/>
  <meta name="keywords" content="5 Key"/>
  <meta name="robots" content="index,follow"/>
  <meta name="revisit-after" content="7 days"/>
  <meta name="language" content="de"/>
  <meta name="zipcode" content="0000"/>
  <meta name="city" content="Muster Stadt"/>
  <meta name="state" content="Muster Bundesland"/>
  <meta name="country" content="AT"/>
  <meta name="author" content="Muster"/>
</head>

<body>
  <div class="wrapper">
   <!-- <div id="headerDiv">
      <div id="headerPicture" style="no-repeat scroll -55px 0pt transparent"><img title="Mr. X" src=images/menu_balken.png alt=”Mr. X">
    </div> -->
    
    <div id="headerDiv">
            <div id="headerPicture" style="background: url(images/menu_balken.png) no-repeat scroll -55px 0pt transparent">

                <a class="cursorHand" href="#" onmouseover="placeMenue(0);" onmouseout="restoreMenue();"><div id="headerIdee"></div></a>

                <a class="cursorHand" href="#" onmouseover="placeMenue(1);" onmouseout="restoreMenue();"><div id="headerUns"></div></a>

                <a class="cursorHand" href="#" onmouseover="placeMenue(2);" onmouseout="restoreMenue();"><div id="headerTeilnehmen"></div></a>

                <a class="cursorHand" href="#" onmouseover="placeMenue(3);" onmouseout="restoreMenue();"><div id="headerRueckschau"></div></a>

                <a class="cursorHand" href="#" onmouseover="placeMenue(4);" onmouseout="restoreMenue();"><div id="headerNetzwerk"></div></a>

                <a class="cursorHand" href="#" onmouseover="placeMenue(5);" onmouseout="restoreMenue();"><div id="headerKontakt"></div></a>
    </div>
          <div>Test Text Test Text</div>
      </div>
  </div>
  
       <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="400" >
        <param name="wmode" value="transparent" />
        <param name="movie" value="fla/wurzel.swf" />
        <param name="quality" value="high" />
        <param name="swfversion" value="6.0.65.0" />
        <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
        <param name="expressinstall" value="scripts/expressInstall.swf" />
        <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
        <!--[if !IE]>-->
        <object id="FlashID" data="fla/wurzel.swf" type="application/x-shockwave-flash" width="550" height="400">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="scripts/expressInstall.swf" />
          <!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
          <div>
            <h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
          </div>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
      
  </body>
</html>

Code: 
@charset "utf-8";
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

td {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.bodystyle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.small {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
}

.medium {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.big {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.xbig {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
}

.expanded {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 2px;
}

.justified {
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
}

/* Schrift ENDE */

.wrapper {
    width: 1001px;
    position: absolute;
    top: 0px; right: 0px; bottom: 0px; left: 150px; 
}

#FlashID {
    position: absolute;
    z-index: -1;
    width: 125%;
    height: 125%;
    margin: -80px 0 0 0;
}


/* Navigation ALT

.navigation {
  width: 1000px;
  height: 55px;
  overflow: hidden;
}
.navigation a {
  text-decoration: none;
  display: block;
  height: 110px;
}
.navigation a img {
  border: 0;
}
.navigation a:hover {
  margin-top: -55px;
}

*/ 


/* Navigation NEU */

#headerPicture {
    background: url(menu_balken.png) no-repeat scroll -55px 0 transparent;
    height: 385px;
    position: absolute;
    width: 1000px;
    background-image: url(menu_balken.png);
}
#headerPicture div {
    float: left;
    height: 100%;
}
#headerIdee {
    width: 166px;
}
#headerUns {
    width: 166px;
}
#headerTeilnehmen {
    width: 166px;
}
#headerRueckschau {
    width: 166px;
}
#headerNetzwerk {
    width: 166px;
}
#headerKontakt {
    width: 166px;
}
#headerPicture:hover #headerPicture {
    background: no-repeat scroll 0 0 transparent;
}
 
So gehts wohl einfacher und ohne js.

HTML: 
<ul>
  <li><a href=#>Link 1</a></li>
  <li><a href=#>Link 2</a></li>
  <li><a href=#>Link 3</a></li>
  <li><a href=#>Link 4</a></li>
</ul>
css
HTML: 
            ul { display: inline ; }
            ul li { background: #fc00fc ; color: #FFF ; float: left ; list-style-type: none ; text-align: center ; }
            ul li a { color: #FFF ; text-decoration: none ; display: block ; width: 100px ; height: 50px ; line-height: 50px ; font-weight: bold ; }
            ul li:hover a { border-bottom: 5px solid #fc00fc ; }

edit: css stimmte noch nicht
 
Zuletzt bearbeitet:
Danke für deine Antwort!

Ich habe auch zuerst daran gedacht es so zu machen, aber ich möchte als Menü lediglich zuerst die Linie und ERST wenn man mit der Maus drüber fährt, dass es aufklappt. (Siehe Bilderlink erster Beitrag).

Wenn man es ohne Grafik löst wie du, ist es dann so möglich wie ich es umsetzen möchte?

Danke für deine Hilfe!
 
etwa so....

css
HTML: 
            ul { display: inline ; width: 400px ; background: #fc00fc ; height: 20px ; } /* Breite muss noch angepasst werden */
            ul:hover { width: auto ; height: auto ; background: none ; }
            ul li { display: none ; }
            ul:hover li { display: block ; background: #fc00fc ; color: #FFF ; float: left ; list-style-type: none ; text-align: center ; }
            ul li a { color: #FFF ; text-decoration: none ; display: block ; width: 100px ; height: 50px ; line-height: 50px ; font-weight: bold ; }
            ul li:hover a { border-bottom: 5px solid #fc00fc ; }
 
Du hast mich verstanden! :-) DANKE!

Ich muss jetzt im Prinzip nur mehr aus dem kleinen Block die CSS so anpassen, dass es eine Linie wird.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben