[Problem] Sprite-Navigation mit mootoolsnav

**k0n** · 25.03.2011, 08:38

Hallo liebe contao-Community.

ich bin neu auf dem Gebiet contao & CSS und komme bei einer Sache nicht weiter

Wie im contaowiki beschrieben, habe ich mir eine Spritenavigationsleiste erstellt,
es klappt auch soweit alles.
http://de.contaowiki.org/Navigation_...fiken_-_Sprite

Der Code lautet

Code:

#left .mod_navigation {
   width:200px;
}
 
#left .mod_navigation ul {
   margin:0;
   padding:0;
   list-style-type:none;
}
 
#left .mod_navigation li {
   margin:0;
   padding:0;
}
 
#left .mod_navigation a,
#left .mod_navigation span {
   height:40px;
   display:block;
   text-indent:-3000px;
   background-repeat: none;
}
 
#left .mod_navigation a:link,
#left .mod_navigation a:visited {
   background-position: top left;
}
 
#left .mod_navigation a:hover,
#left .mod_navigation a:focus,
#left .mod_navigation a:active,
#left .mod_navigation span {
   background-position: 0 -40px;
}
 
/* Definition der einzelnen Bilder */
#left .mod_navigation .startseite a,
#left .mod_navigation .startseite span {
   background-image: url(tl_files/menue/startseite.png);
}
 
#left .mod_navigation .michael a,
#left .mod_navigation .michael span {
   background-image: url(tl_files/menue/michael.png);
}
 
#left .mod_navigation .seminare a,
#left .mod_navigation .seminare span {
   background-image: url(tl_files/menue/seminare.png);
}
 
#left .mod_navigation .seminare09 a,
#left .mod_navigation .seminare09 span {
   background-image: url(tl_files/menue/seminare09.png);
}
 
#left .mod_navigation .seminare10 a,
#left .mod_navigation .seminare10 span {
   background-image: url(tl_files/menue/seminare10.png);
}
 
#left .mod_navigation .seminare11 a,
#left .mod_navigation .seminare11 span {
   background-image: url(tl_files/menue/seminare11.png);
}
 
#left .mod_navigation .buecher a,
#left .mod_navigation .buecher span {
   background-image: url(tl_files/menue/buecher.png);
}
 
#left .mod_navigation .vortraege a,
#left .mod_navigation .vortraege span {
   background-image: url(tl_files/menue/vortraege.png);
}

#left .mod_navigation .kontakt a,
#left .mod_navigation .kontakt span {
   background-image: url(tl_files/menue/kontakt_impr.png);
}

Da ich aber für ein paar Menüpunkte Unterpunkte erstellen wollte, habe ich mootoolsnav installiert und - was wohl jetzt sehr laienhaft erscheinen mag

- einfach
.mod_navigation gegen .mod_mootoolsnav ersetzt.

Das Problem ist aber nun, dass bei der mootoolsnav-Menüleiste alle Grafiken richtig angezeigt werden bis auf die Grafik der Seite, die aktiviert/angeklickt ist. Hier steht anstelle der Grafik nur der Text (z.B. "Startseite" etc.)

Ich wäre für einen Tip sehr dankbar, wie ich das Problem lösen kann.

Mit freundlichen Grüßen,
kon

**k0n** · 26.03.2011, 13:33

Weiss denn wirklich niemand, woran das liegt? Wie muss ich den Code außerdem noch anpassen, damit er auch für mootoolsnav "kompatibel" ist?

Oder hat jemand eine Alternative für ein ausklappbares Navigationsmenü mit Grafiken?

MfG k0n

**bizon** · 26.03.2011, 14:41

In der .mod_navigation wird das aktive Element über den "span" tag angesprochen.
Bei mootoolsnav ist es ein "p" tag.

Deshalb greift dein jetziges CCS nicht bei mootoolsnav.
Installiere im Firefox das Addon "Firebug", dann kannst du das nachvollziehen.

**k0n** · 26.03.2011, 17:08

Wirklich nachvollziehen kann ich das zwar ehrlich gesagt nicht ^^, der "AHAA"-Effekt lässt bei mir noch auf sich warten

... hatte Firebug schon drauf, aber vielen Dank für den Hinweis mit span und p!!! Jetzt funktioniert das Script

Eine letzte Frage noch:
Ober- und unterhalb des aktiven Links ist nun ein Abstand, welcher auch vorhanden ist, wenn man keine Sprite-Grafiken drüberlegt.

Wenn ich mich nicht irre, liegt das an dem <p>-Tag in Zeile 17 in "nav_moomenu.tpl":

Code:

<li class="<?php if ($item['class']) echo $item['class']; ?><?php if($this->level == $togglerlevel) echo ' nosubmenu'; ?>"><p class="active <?php if ($item['class']): ?> <?php echo $item['class']; endif; ?>"><?php echo $item['link']; ?></p></li>

Wie kann ich denn den Absatz entfernen und wie würde sich das dann wieder auf meinen CSS-Code auswirken?

Gruß k0n

**bizon** · 26.03.2011, 18:54

Vermutlich aus der basic.css bekommt der p-tag ein margin mit.
Passe es z.B. mit

.mod_mootoolsnav p.active {margin:0;} ...

deinen Wünschen an.
Das ist übrigens was ich mit dem Firebug meinte: Klicke in deiner Website mit der rechten Maustaste auf den aktiven Link und wähle im Kontextmenü "Element untersuchen" aus. Dann siehst du alle Formatierungen, die das p-tag hat.