hauptkategorie/navigation bild hinterlegen; bekomms einfach nicht hin

[einheit13]

das mit dem hinterlegen in css hat mit einem bild prächtig funktioniert.

vielen dank schonmal dafür.

ich schaue jetzt nach der möglichkeit dort verschiedene zu nehmen. in html sollte das eigentlich doch mit einfachen art auflistung funktionieren oder?

[marblemoses]

Hi,

damit du jedes li via CSS separat "adressieren" kannst, muss ein eindeutiger Bezeichner zu jedem li im HTML.
Z.B.:

{foreach name=aussen item=module_data from=$_categories}
        <li id="cat_{$module_data.categories_id}" class="level{$module_data.level}{if $module_data.active} active{/if}"><a href="{$module_data.categories_link}" title="{$module_data.categories_heading_title}">{$module_data.categories_name}</a></li>
{/foreach}

Durch das id="cat_{$module_data.categories_id}" hat jetzt jedes li eine id der Form cat_3, cat_7, etc. Die id der jeweiligen Kategorie musst du eben herausfinden, entweder im HTML Code des Browsers, oder im Backend bei den Kategorien.

Jetzt kannst du im CSS verschiedene Hintergrundbilder angeben:

ul#categorymenu li.level1  {
  background-repeat: no-repeat; 
}

#cat_3 {
  background-image:url(../img/kat3.jpg);
}

#cat_7 {
  background-image:url(../img/kat7.jpg);
}

/* etc. */

Viel Erfolg!
LG.M

[einheit13]

habe den "li counter" hinzugefügt in der html

{foreach name=aussen item=module_data from=$_categories}
        <li id="cat_{$module_data.categories_id}" class="level{$module_data.level}{if $module_data.active} active{/if}"><a href="{$module_data.categories_link}" title="{$module_data.categories_heading_title}">{$module_data.categories_name}</a></li>
{/foreach}

und in der css die hintergrundbilder definiert s.u. nur 1-3 sind wirklich numeriert, weil ich aktuell nicht mehr bilder hochgeladen hab. allerdings zeigt er mir nur in der letzten kategorie nr.7 ein bild an, allerdings immer das kategorie bild aus #cat_6. wenn ich es in #cat_6 ändere, ändert sich das bild in #cat_7. das versteh ich nun nicht ganz...

ul#categorymenu { margin-bottom:0px; border: solid #000000; border-width:0px 2px 4px 2px; }
/* 1st TIER */ ul#categorymenu li.level1 { /*background-color:#FFFFFF; padding:4px 0px 4px 6px; font-size: 1.0em;*/

          background-repeat: no-repeat};
          }

         #cat_1{
         background-image:url(../img/kat_lev1.jpg);
         }
         #cat_2{
         background-image:url(../img/kat_lev2.jpg);
         }
         #cat_3{
         background-image:url(../img/kat_lev3.jpg);
         }
         #cat_4{
         background-image:url(../img/kat_lev1.jpg);
         }
         #cat_5{
         background-image:url(../img/kat_lev1.jpg);
         }
         #cat_6{
         background-image:url(../img/kat_lev1.jpg);
         }
         #cat_7{
         background-image:url(../img/kat_lev1.jpg);
         }

edit: die anderen hintergrundfelder bleiben weiss.

laut firebug zieht er sich in der letzten kategorie auch das 6 bild. in den anderen kategorien nimmt er auf die list items keinen bezug

[einheit13]

über den firebug habe ich gesehen, dass er die nummerierung auch nicht stringent nach der id baut, sondern so:

auszug aus firebug

<ul id="categorymenu">
<li id="cat_40" class="level1">
<li id="cat_59" class="level1">
<li id="cat_31" class="level1">
<li id="cat_46" class="level1">
<li id="cat_45" class="level1">
<li id="cat_47" class="level1">
<li id="cat_6" class="level1">
</ul>

was erklärt, warum er die letzte (siebente) bit bild sechs versieht und beim rest nichts anzeigt. aber ich verstehe die logik dahinter nicht, wie er sich diese cat_xx zahlen zusammenbaut?
jemand ne idee wo ich da suchen sollte?

[einheit13]

versuche gerade eine andere herandgehensweise. da ich nicht herausfinden kannm warum sich die zahlen nicht so generieren, wie sie sich generieren sollten, probiere ich die abfrage über

id="cat_{$module_data.categories_name}"

allerdings bekomme ich die abfrage nicht hin.

#cat_"Kategorie_1"{
         background-image:url(../img/kat_lev1.jpg);

ich denke dass dieser weg sinnvoller ist, da die namen korrekt generiert werden, so dass sich dieser weg in meinen augen für eine abfrage besser eignet.

sieht jemand wo ich nen fehler gemacht habe? es wird nichts angezeigt.