Jump to content
xt:Commerce Community Forum

hauptkategorie/navigation bild hinterlegen; bekomms einfach nicht hin

einheit13

By einheit13,
in xt:Commerce - Templates / Shop

Recommended Posts

einheit13 Newbie

einheit13

Posted
Posted

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ß

Link to comment
Share on other sites
einheit13 Newbie

einheit13

Posted
  • Author
Posted 


/* 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 [COLOR="Red"]{background-image:url(.../img/kat_lev1.jpg);[/COLOR] 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-->

[COLOR="Red"]{img img=$module_data.categories_image type=m_thumb class=catimage}[/COLOR]

<!--

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...

Link to comment
Share on other sites
dukie6666 Newbie

dukie6666

Posted
Posted

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}">[COLOR=Red]{img img=$module_data.categories_image type=m_icon class=catimage}[/COLOR]  <a href="{$module_data.categories_link}" title="{$module_data.categories_heading_title}">{$module_data.categories_name}</a></li> {/foreach} </ul>[/CODE]

Link to comment
Share on other sites
marblemoses Newbie

marblemoses

Posted
Posted

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

Link to comment
Share on other sites
einheit13 Newbie

einheit13

Posted
  • Author
Posted

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 :-)

Link to comment
Share on other sites
einheit13 Newbie

einheit13

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
marblemoses Newbie

marblemoses

Posted
Posted

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

Link to comment
Share on other sites
einheit13 Newbie

einheit13

Posted
  • Author
Posted

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}[/HTML]

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...

[code] 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); } [COLOR="Red"]#cat_6{ background-image:url(../img/kat_lev1.jpg); }[/COLOR] [COLOR="Lime"]#cat_7{ background-image:url(../img/kat_lev1.jpg); }[/COLOR] [/code]

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

Link to comment
Share on other sites
einheit13 Newbie

einheit13

Posted
  • Author
Posted

ü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?

Link to comment
Share on other sites
einheit13 Newbie

einheit13

Posted
  • Author
Posted

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_[COLOR="Red"]name[/COLOR]}"
allerdings bekomme ich die abfrage nicht hin. 
#cat_"[COLOR="SandyBrown"]Kategorie_1[/COLOR]"{

         background-image:url(../img/kat_lev1.jpg);[/code]

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...