hauptkategorie/navigation bild hinterlegen; bekomms einfach nicht hin

[einheit13]

moin moin,

ich habe recht ausführlich die sufu genutzt, aber ich habe einfach den überblick verloren. meine html und css kenntnisse sind eher learning by doing und hier komme ich wohl gerade an die meine grenzen.
ich möchte in meiner hauptkategorienavigation (ganz links) lediglich meine einzelnen hauptkategorien mit einem bild hinter der schrift belegen. wenn sich die unterkategorien aufklappen kann es gerne enfach farblich hinterlegt bleiben, ich möchte dies nur in den hauptkatgorien tun. über den adminbereich bekomme ich es nur hin, dass bilder im "mittelteil" der productlistings angezeigt werden, dasssie aber in der navigation angezeigt werden schaffe ich nicht. habe ich irgendwo etwas übersehen?

gruß

[marblemoses]

Hi,

also allgemein kannst du in CSS mit

background-image:url(dein/bild.jpg);

ein Hintergrundbild für jeden HTML Container festlegen.

Gibts einen Code-Schnipsel oder einen Link den du posten kannst?

LG.M

[einheit13]

Hi,
gerne. werde ich umgehend heute nachmittag posten wenn ich daheim bin. habe das bereits allerdings auch schoneinmal so gemacht,damit bekomme ich allerdings nicht zu jedem kategoriefeld ein eigenes kleines bild hinterlegt.

[dukie6666]

Du musst in die box_categories.html folgendes vor den Kategorienamen einbauen:

{img img=$module_data.categories_image type=m_thumb class=catimage}

Dann hast Du die Kategoriebilder in der Navi. Die musst Du halt per CSS noch anpassen.

[einheit13]

/* CATEGORY MENU */
h2.categoryheader {background-color:#F3A807; background-image:url(../img/bg_boxheader.gif);height:28px;font-size:11px; color:#FFFFFF; padding:2px 8px 0px 8px; margin:0; line-height:28px; vertical-align:middle;}
h2.categoryheader a {text-decoration:none; color:#121212}
ul#categorymenu .active, ul#categorymenu .active a { font-weight:900; color: #222;}
ul#categorymenu { list-style-type:none; }
ul#categorymenu li { list-style-type:none; border: solid #000000; border-width:3px 0px 0px 0px;}
ul#categorymenu li a{ text-decoration:none; color:#000000;}

ul#categorymenu {background-image:url(.../img/kat_lev1.jpg); margin-bottom:0px; border: /*solid #C91524;*/ 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;}
/* 2nd TIER */ ul#categorymenu li.level2 { background-color:#EEA003; padding:4px 0px 4px 24px; font-size: 0.9em;}
/* 3rd TIER */ ul#categorymenu li.level3 { background-color:#EEA003; padding:4px 0px 4px 40px;  font-size: 0.8em;}

<h2 class="boxheader">{txt key=TEXT_BOX_TITLE_CATEGORIES}</h2>
<ul id="categorymenu">
<!--
edit-->
{img img=$module_data.categories_image type=m_thumb class=catimage}
<!--
ende edit -->
{foreach name=aussen item=module_data from=$_categories}
        <li 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}
</ul>

habe beide sachen einmal ausprobiert, jedoch wenn ich in der css den background änder verschwinden nur die ränder...keine bilder hinter der kategoriebezeichnung

die änderung in der html kann ich irgendwie nicht interpretieren. bin irgendwie gerade überfordert...

[dukie6666]

das gehört so:

<h2 class="boxheader">{txt key=TEXT_BOX_TITLE_CATEGORIES}</h2> <ul id="categorymenu">  {foreach name=aussen item=module_data from=$_categories}         <li class="level{$module_data.level}{if $module_data.active} active{/if}">{img img=$module_data.categories_image type=m_icon class=catimage}  <a href="{$module_data.categories_link}" title="{$module_data.categories_heading_title}">{$module_data.categories_name}</a></li> {/foreach} </ul>

[marblemoses]

Hi,

und falls du die Bilder doch per CSS hinter die Menüpunkte legen willst, sollte das background-image bei den li (list item) und nicht beim ul (unordered list) stehen. Da du nur die Haupkategorie mit Bildern bestücken willst, kommt noch die kalsse .level1 dazu:

ul#categorymenu li.level1  {
  background-image:url(../img/kat_lev1.jpg);
  background-repeat: no-repeat;
}

Auf die Art und weise hast du hinter allen Hauptmenüpunkten das gleiche Bild. Wenn du bei jedem ein individuelles Bild haben möchtest, muss auch das HTML angepasst werden.

Die Lösung von dukie6666 funktioniert natürlich wunderbar, so können sogar die Bilder via Backend festgelegt werden. Das Bild dann mit CSS in den Hintergrund zu bekommen wird halt ein bisschen tricky.

LG.M

[einheit13]

ja genau das möchte ich, hinter jedem hauptmenüpunkt ein individuelles bild. ich halte das bei den unterkategorien bei mir für überflüssig, da die reidfer dann zu bundt werden, aber bei hauptkategorien ist das wichtig. werde ich einmal ausprobieren heute nachmittag :-)

[einheit13]

Zitat von marblemoses

Die Lösung von dukie6666 funktioniert natürlich wunderbar, so können sogar die Bilder via Backend festgelegt werden. Das Bild dann mit CSS in den Hintergrund zu bekommen wird halt ein bisschen tricky.

LG.M

korrigiert mich wenn ich das falsch sehe, aber da kommt man um eine logische operation nicht herum oder? das müsste man doch dann am besten in php lösen oder täusche ich mich dort?

[marblemoses]

Hi,

ne, soweit ich das sehe ist kein php notwendig. Im Backend kannst du bei den Kategorien Bilder festlegen, und dukie6666 hat bereits beschrieben wie du an die ran kommst. Probiers einfach mal aus.

LG.M