Text unter FishEyes statt drüber?

H

hinkel11

Mitglied
Hallo,

ich habe mich nun entschlossen meine Javascript-Hauptnavi durch eine reine CSS-Hauptnavi zu ersetzen, da es mit dem Javascript doch immer wieder Problem gab, vor allem was die Kompatibilität mit anderen JS-Komponenten betrifft.

Die neue Navi ist hier zu sehen:
http://www.corona-gehren.de/main/index.php?Itemid=192

Hier die alte Navi:
http://www.corona-gehren.de/main/index.php?Itemid=165

Ich hätte es jedoch gern so, dass der Text bei der neuen Navi unterhalb und nicht oberhalb des jeweiligen Buttons angezeigt wird, genauso wie es bei der alten Navi der Fall war. Ich dachte es würde genügen, den das span aus dem folgenden Code einfach nach und nicht vor dem Bild zu setzen. Klappt jedoch nicht so.

Hätte da jemand eine Idee? Danke.

Hier mal der vollständige Code (HTML und CSS):
Code: 
<style type="text/css">
<!--
.expand-up {
  font-family:Arial, Helvetica, sans-serif;
  line-height:normal;
  height:150px;
  width:100%;
  background: url(/images/demos/macosx-style-background.png)   no-repeat;
  overflow:visible;
}

.expand-up ul {
  padding:0; 
  margin:0 auto; 
  list-style-type:none;
  float:left;
  position:relative; 
  left:50%;
  margin-top: 3%;
}

.expand-up ul li {
  float:left; 
  position:relative; 
  right:50%;
}
.expand-up ul li a {
  text-decoration:none;
}
.expand-up ul li a img {
  width:60px;
  height:61px;
  border:none;
}
.expand-up ul li a span {
  display:none;
  font-size:14px;
  text-align:center;
  color:#ff0000;
}
.expand-up ul li:hover a span {
  display:block;
  margin-top:-65px;
}
.expand-up ul li:hover a img {
  width:100px;
  height:100px;
}
.expand-up ul li:hover + li a img {
  width:60px;
  height:60px;
  margin-top:-10px;
}
.expand-up ul li:hover + li + li a img {
  width:55px;
  height:55px;
  margin-top:-5px;
}
-->

</style>
<div class="expand-up">
<ul>
  <li>
    <a href="#">
      <span>Startseite</span>
      <img style="behavior: url(images/iepngfix/iepngfix.htc);" src="modules/mod_fisheye_menu_camp26/fisheye_menu/images/button-start-trans.png" alt="Startseite" />
    </a>
  </li>
  <li> ... </li>
   usw.
 
hinkel11 hat gesagt.:
Ich hätte es jedoch gern so, dass der Text bei der neuen Navi unterhalb und nicht oberhalb des jeweiligen Buttons angezeigt wird, genauso wie es bei der alten Navi der Fall war. Ich dachte es würde genügen, den das span aus dem folgenden Code einfach nach und nicht vor dem Bild zu setzen. Klappt jedoch nicht so.
Zum Vergrößern anklicken....
Doch, doch, das klappt so sehr wohl :)

HTML: 
<a href="#">   
      <img style="behavior: url(images/iepngfix/iepngfix.htc);" src="modules/mod_fisheye_menu_camp26/fisheye_menu/images/button-start-trans.png" alt="Startseite" />
      <span>Startseite</span>
</a>
CSS: 
.expand-up ul li:hover a span {
  display:block;
  /*margin-top:-65px;*/
}

mfg Maik
 
Genauso hatte ich es zuvor auch. Nur wie man sieht, schiebt sich das ganze aus irgendeinem Grund nach unten, d.h. das Bild geht beim drüberfahren etwas nach unten und nicht wie vorher nach oben. Es sollte halt alles, also Button plus Text, in den Bereich mit der Hintergrundtextur passen, wie bei der alten Navi.
 
Ja und? Das eine (Textposition) hat doch mit dem anderen (Bildposition beim Überfahren) überhaupt nichts zu tun. Will sagen: Mit deinem ursprünglichen Code wird das Bild genau so wenig nach oben verschoben.

Wie dies funktioniert, kannst du beispielsweise deinem Tooltip entnehmen :rolleyes:

mfg Maik
 
Hmm...ich werd nicht so recht schlau beim Blick auf meinen Tooltip. Hat das Problem was mit der Positionierung zu tun oder gehts krieg ich das ganze durch ändern irgendwelche margins in hin?
 
Wenn du aus dem kleinen übersichtlichen Tooltip-CSS nicht schlau wirst, wie du ihn positioniert hast, fällt mir dazu ehrlich gesagt nichts mehr ein :rolleyes:

CSS: 
.expand-up ul li a {
  text-decoration:none;
  display:block;
  width:100px;
  height:100px;
}

...

.expand-up ul li:hover a img {
  width:100px;
  height:100px;
  position:relative;
  top:-20px;
  right:20px;
}

mfg Maik
 
Ok, also ich komme der Sache näher. Hat zwar mit deinen Angaben nicht ganz geklappt, aber habs nun zumindest schonmal so hinbekommen, dass das Bild etwas nach oben rutscht. Nur irgendwie wird der Text nicht mit nach oben gezogen. Da dachte ich mir ich trage bei ".expand-up ul li:hover a img" so was ein wie "top: -60px". Rührt sich aber nichts.
 
Meine Angaben hab ich zu Demonstrationszwecken frei gewählt, und hierbei nicht auf deine Seitenverhältnisse geachtet - das ist und bleibt noch immer dein eigener Job :p

In meinem Beispiel wird das Grafikelement um 20px nach oben verschoben - daraus folgt für den Textbereich:
CSS: 
.expand-up ul li:hover a span {
  display:block;
  margin-top:-20px;
}

mfg Maik
 
Danke. Jetzt klappts. Nur das mit dem "display:block" bei ".expand-up ul li a" hat bei mir aus irgend einem Grund alles durcheinander gehauen. Hab ich deshalb weggelassen.
 
Sorry, ich muss dass Thema nochmal aufnehmen.

Gibt es eine Möglichkeit dieses hässliche Hinundherspringen der Zeile zu verhindern? Also wenn man mit der Maus über einen Button fährt sieht mann, dass sich das Menü horizontal erweitert (ist klar, wegen der breiteren Buttons beim hovern).

Hier nochmal die Seite:
http://www.corona-gehren.de/main
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück