es werden keine icons im menü angezeigt

[ralfprivat]

hallo,

habe da ein problem mit einem script, bekomme es nicht hin.

normalerweise sollte es einfach sein, aber bei mir zeigt er mir nicht die icons in der menüleiste an und ich weiß nicht warum.

es ist ein vertikalmenü mit icons das sich nach links verschiebt wen man auf die icons geht. bestimmt kennt einer das schon (siehe bild) aber bei mir werden die icons nicht angzeigt.

und nach der anleitung ist es einfach.
habe die dateien die man braucht geladen BySlideMenu.js und Mootools.js in den beiden wird ja nichts geändert.

das sind meine dateien

<ul id="textmenu">
      <li class="bg1 icon1">Element 1</li>
      <li class="bg2 icon2">Element 2</li>
      <li class="bg1 icon3">Element 3</li>
      <li class="bg2 icon4">Element 4</li>
      <li class="bg1 icon5">Element 5</li>
      <li class="bg2 icon6">Element 6</li>
      <li class="bg1 icon7">Element 7</li>
      <li class="bg2 icon8">Element 8</li>
      <li class="bg1 icon9">Element 9</li>
      </ul>

      var textmenu = new BySlideMenu('textmenu', {
      defaultIndex: 1,
      elementHeight: 30,
      elementWidth: 175
      });

#verticaltextmenu,
ul.bsm{
    margin: 0px auto;
    border:1px solid #B0B0B0;
    list-style-type: none;
}
 
ul.bsm li{
    border-left:2px solid #FFFFFF;
}
ul.bsm li.first,
#verticaltextmenu div.first{
    border-style: none;
}
ul.vertical li,
div.vertical div{
    border-top: 2px solid #ffffff;
    border-left-style: none;
}
 
#textmenu,
#fullwidthmenu{
    font-size:12pt;
    font-weight:bold;
}
#textmenu li,
#fullwidthmenu li{
    background-image:slidemenu.png;
    background-repeat:no-repeat;
    padding:1px 0 0 40px;
}
#textmenu li.icon1, #fullwidthmenu li.icon1{ background-position: 5px 1px; }
#textmenu li.icon2, #fullwidthmenu li.icon2{ background-position: 5px -22px; }
#textmenu li.icon3, #fullwidthmenu li.icon3{ background-position: 5px -48px; }
#textmenu li.icon4, #fullwidthmenu li.icon4{ background-position: 5px -66px; }
#textmenu li.icon5, #fullwidthmenu li.icon5{ background-position: 5px -88px; }
#textmenu li.icon6, #fullwidthmenu li.icon6{ background-position: 5px -110px; }
#textmenu li.icon7, #fullwidthmenu li.icon7{ background-position: 5px -132px; }
#textmenu li.icon8, #fullwidthmenu li.icon8{ background-position: 5px -156px; }
 
.bg1{ background-color: #F3F3F3; }
.bg2{ background-color: #E5E5E5; }
 
#verticaltextmenu h5{
    font-size:12pt;
    margin:1px 0 0;
    text-align:center;
}
#verticaltextmenu p{
    font-size:12pt;
    margin:0px;
    padding:2px;
    text-align:justify;
}

alle dateien befinden sich im gleichen ordner die css, js und das bild

gruß ralf

 

[dkdenz]

http://www.css4you.de/background-image.html

 

[ralfprivat]

hallo,

leider kann ich mit dem link nichts anfangen.

das bild ja schon definiert

1. welches bild
background-image:slidemenu.png;

2. welchen ausschnitt er nehmen soll

{ background-position: 5px 1px; }
{ background-position: 5px -22px; }
{ background-position: 5px -48px; }
usw.

er macht ja alles die hintergund farbe (bg1 und bg2 definiert) er verschiebt auch vertikal alles er zeigt auch den text an nur nicht die icons vor den texten.

gruß ralf

 

[HTML 4 YOU]

background-image:slidemenu.png;

Und das ist dein Fehler.... Es müsste heißen: background-image: url(slidemenu.png);

 

[dkdenz]

leider kann ich mit dem link nichts anfangen.

Hm, Wink mit dem Zaunpfahl hat nix genutzt...

Edit: Verschiebe das mal zu CSS...

 

[ralfprivat]

hallo,

der zaunpfahl war nicht groß genug. es funktioniert.

ich dachte nur der bild name reicht wen alles im selben ordner liegt, habe auch nur auf den namen geschaut

DANKE FÜR DIE HILFE


gruss ralf