ECB: Yaml Frage zur Kat-Navigation

[cybertramp]

Hallo zusammen,
ich habe meine Kategorie-Navigation etwas umgebaut, was die Hintergründe und das Verhalten bei aktivierter Kategorie und MouSEO [ Suchmaschinen Optimierung ]ver angeht.

Grundsätzlich ist alles mti gleichem Hintergrund.
Beim MouSEO [ Suchmaschinen Optimierung ]ver wird der jeweilige Bereich mit rotem HIntergrundbild hinterlegt, das auch bei aktiver Kategorie angezeigt wird.
Wenn ich nun Unterkategorien aufrufe, ist jedoch die gesamte Hauptkategorie und die Unterkategorie mit dem roten Hintergrund hinterlegt.

Da das ziemlich dick aussieht, wenn ne Kategorie mit mehreren Unterkategorien aufgerufen wird, würde ich das gerne so umstellen, dass bei Kategorien mit Unterkategorien nur die jeweilig aktive Unterkategorie mit dem anderen Hintergrund hinterlegt wird.

Kann mir jemand einen Tipp geben, wie ich das ändere ? Ich prpobier nun schon seit Stunden rum und krieg nen Hirnwurm dabei.

Hier die categorie_navigation.css:



/ ################################################## ################################################## ############### /
/ ### Definition des Randes für die einzelnen Kategorieebenen + Text- und Hintergrundfarbe (Werte werden vererbt) ### /
/ ### width + padding-left = 100% ################################################## ################################# /
/ ################################################## ################################################## ############### /

/ ### 1.Ebende ### /
.catListBody ul li a {
****width: 95%;
****padding: 1px 0px 1px 5%;
****color: #1E1E1E;
****border-bottom: 1px #fff solid;
****background: transparent url(../../img/boxhintergrund_Link [ Verweis auf andere Stelle der Webseite ]s.gif) no-repeat scroll center top;
}

/ ### 2.Ebende ### /
.catListBody ul li ul li a, .catListBody li.activeCat ul li a {
****width: 85%;
****padding: 1px 0px 1px 15%;
****color: #1E1E1E;
****border-bottom: 1px #fff solid;
****background-color:#F0D157;
}

/ ### 3.Ebende ### /
.catListBody ul li ul li ul li a , .catListBody li.activeCat li.activeCat ul li a{
****width: 80%;
****padding: 1px 0px 1px 20%;
****color: #1E1E1E;
****border-bottom: 1px #fff solid;
****background-color:#F0D157;
}

/ ### 4.Ebende ### /
.catListBody ul li ul li ul li ul li a , .catListBody li.activeCat li.activeCat li.activeCat ul li a {
****width: 80%;
****padding: 1px 0px 1px 20%;
****color: #1E1E1E;
****border-bottom: 1px #fff solid;
****background-color:#F0D157;
}

/ ### 5.Ebende ### /
.catListBody ul li ul li ul li ul li ul li a , .catListBody li.activeCat li.activeCat li.activeCat li.activeCat ul li a {
****width: 75%;
****padding: 1px 0px 1px 25%;
****color: #1E1E1E;
****border-bottom: 1px #fff solid;
****background-color:#F0D157;
}

/ ### 6.Ebende ### /
.catListBody ul li ul li ul li ul li ul li ul li a , .catListBody li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat ul li a {
****width: 70%;
****padding: 1px 0px 1px 30%;
****color: #1E1E1E;
****border-bottom: 1px #fff solid;
****background-color:#F0D157;
}

.catListBody li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat ul li a**{
****background-color:#F0D157;
****color: #1E1E1E;
}

/ ################################################## ########################################## /
/ ### MouseOver ################################################## ############################ /
/ ################################################## ########################################## /

/ ### 1.Ebende ### /
.catListBody li a:hover{
****background: transparent url(../../img/box__li_hintergrundrot.gif) no-repeat scroll center top;
****color: #1E1E1E;
****Text-decoration: none;
****font-weight: bold;
}

/ ### 2.Ebende ### /
.catListBody li li a:hover , .catListBody li.activeCat li a:hover{
****background: transparent url(../../img/box__li_hintergrundrot.gif) no-repeat scroll center top;
****color: #1E1E1E;
****Text-decoration: none;
****font-weight: bold;
}

/ ### 3.Ebende ### /
.catListBody li li li a:hover , .catListBody li.activeCat li.activeCat li a:hover{
****background-color:#000; color: #fff;
****Text-decoration: none;
}

/ ### 4.Ebende ### /
.catListBody li li li li a:hover , .catListBody li.activeCat li.activeCat li.activeCat li a:hover{
****background-color:#000; color: #fff;
****Text-decoration: none;
}

/ ### 5.Ebende ### /
.catListBody li li li li li a:hover , .catListBody li.activeCat li.activeCat li.activeCat li.activeCat li a:hover{
****background-color:#000; color: #fff;
****Text-decoration: none;
}

/ ### 6.Ebende ### /
.catListBody li li li li li li a:hover , .catListBody li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat li a:hover{
****background-color:#000; color: #fff;
****Text-decoration: none;
}

/ ################################################## ########################################## /
/ ### Aktive Kategorie ################################################## ##################### /
/ ################################################## ########################################## /

.catListBody li.activeCat a {
****background: transparent url(../../img/box__li_hintergrundrot.gif) no-repeat scroll center top;
****color: #1E1E1E;
****Text-decoration: none;
****font-weight: bold;
}
.catListBody li.activeCat li.activeCat a {
****background: transparent url(../../img/box__li_hintergrundrot.gif) no-repeat scroll center top;
****color: #1E1E1E;
****Text-decoration: none;
****font-weight: bold;
}
.catListBody li.activeCat li.activeCat li.activeCat a ,
.catListBody li.activeCat li.activeCat li.activeCat li.activeCat a ,
.catListBody li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat a ,
.catListBody li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat a {
****background-color: #000;
****color: #FFF;
}****

}


Ein Bild von nicht aktiver und aktiver Kat. häng ich Euch mal dran, damit meine wirre Schilderung vielleicht etwas verständlicher wird:

http://freenet-homepage.de/info_sandra/beispiel.jpg

Link [ Verweis auf andere Stelle der Webseite ]s ist also der inaktive Kat-Baum und rechts die aktivierte Unterkategorie - ich möchte aber, dass nur z.B. die aktive Sirup-Unterkategorie rot hinterlegt wird - der Rest soll bitte den normalen HIntergrund behalten...

äh.. ja.. hoffe, es wird jemand schlau draus ;-)

[msslovi0]

Ein Link zum Shop/Onlineshop wäre sicherlich hilfreich.

[cybertramp]

''>ZITAT(msslovi0 @ May 5 2009, 16:50) 169329
Ein Link zum Shop/Onlineshop wäre sicherlich hilfreich.
[/b]


@Msslovi0

ich experimentier derzeit noch lokal rum (Xampp) - d.h. es ist noch nix Online.

[gdevelop]

Ein Glückswurf: Wird evtl. ".activeCat" wird an die ListenElemente der Unterkategorien angehängt ?


Kannst Du den HTML-Code zu Deinen beiden Beispielen mal posten?

[cybertramp]

Hallo Gdev

Deine Idee war richtig, da wird ein activeCat drangehangen. Ich poste aber trotzdem mal den Code für alle Varianten:

Hier erst mal der Quelltext ohne aktivierte Kategorie (Bild 1)


<div id="col1">
<div id="col1_content" class="clearfix">
<div id="box_categories" class="catList">
<h4>Kategorien</h4>
"catListBody">

<li id="cidaromens252223stoffe">
Aromen & Süßstoffe (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=15)

<li id="cidgetr228nke">
Getränke (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=12)

<li id="cids252223igkeiten">
Süßigkeiten (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=8)

<li id="cidschokolade">
Schokolade (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=9)

<li id="cidbrotbr246tchen">
Brot & Brötchen (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=1)

<li id="cidm252slimarmeladeco">
Müsli, Marmelade & Co (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=17)

<li id="cidkuchenpl228tzchen">
Kuchen & Plätzchen (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=3)

<li id="cidlowcarbnudeln">
Low-Carb-Nudeln (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=11)

<li id="cidsirupso223en">
Sirup & Soßen (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=2)

<li id="cidproteineshakes">
Proteine-Shakes (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=7)

<li id="cidproteinriegel">
Protein-Riegel (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=16)


</div>
</div>


ich hab jetzt hier nur die Sirup & Soßen-Kategorie und mal die Nudeln darüber ausgeklappt reinkopiert. Der Rest ist eh gleich ..


Quelltext für die kategorie-Navigation mit aktiver Kategorie im Bereich Sirup/Soßen (Bild 2)


<div id="col1_content" class="clearfix">
<div id="box_categories" class="catList">
<h4>Kategorien</h4>
"catListBody">

<li id="cidaromens252223stoffe">

<li id="cidgetr228nke">

<li id="cids252223igkeiten">

<li id="cidschokolade">

<li id="cidbrotbr246tchen">

<li id="cidm252slimarmeladeco">

<li id="cidkuchenpl228tzchen">

<li id="cidlowcarbnudeln">
Low-Carb-Nudeln (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=11)

<li id="cidsirupso223en" class="activeCat">
Sirup & Soßen (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=2)



<li id="cidproteineshakes">

<li id="cidproteinriegel">


</div>
</div>




Wenn ich in der Kategorie Sirup & Soßen auf die Unterkategorie Sirup klicke, dann sieht der Code wie folgt aus:


<div id="col1">
<div id="col1_content" class="clearfix">
<div id="box_categories" class="catList">
<h4>Kategorien</h4>
"catListBody">

<li id="cidaromens252223stoffe">

<li id="cidgetr228nke">

<li id="cids252223igkeiten">

<li id="cidschokolade">

<li id="cidbrotbr246tchen">

<li id="cidm252slimarmeladeco">

<li id="cidkuchenpl228tzchen">

<li id="cidlowcarbnudeln">

<li id="cidsirupso223en" class="activeCat">
Sirup & Soßen (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=2)

<li id="cidsirup" class="activeCat">
Sirup (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=2_4)

<li id="cidso223en">
Soßen (http://localhost/llc_Shop/Onlineshop / Onlineshop_ecb/index.php?cPath=2_5)



<li id="cidproteineshakes">

<li id="cidproteinriegel">


</div>
</div>


Also wandert das activeCat einfach nur eins runter. Leider bleibt die Hauptkategorie dann trotzdem noch aktiv und zieht auch die Soßen da mit rein ... nicht nur den Sirup ... d.h. das Bild 2 bleibt gleich.

Hoffe, ich hab mich halbwegs verständlich ausgedrückt ?

[msslovi0]

Naja, die normalen li's unterhalb der ersten .activeCat müssen halt den Standard-Background bekommen, also .catListBody li.activeCat li a {
** / Standardhintergrund wie er eben definiert ist /
}

Auf die richtige Position im Quelltext achten, muss unterhalb von .catListBody li.activeCat li.activeCat a stehen, sonst überschreibt sich das wieder!

[cybertramp]

Ich probiers morgen aus.

Herzlichen Dank !!! :smiley_emoticons_winken4:

[cybertramp]

Hm, ich habs mal reingehauen.

Wenn ich´s in der Categorie-Navigation.css




/ ################################################## ########################################## /
/ ### Aktive Kategorie ################################################## ##################### /
/ ################################################## ########################################## /

.catListBody li.activeCat a {
****background: transparent url(../../img/box__li_hintergrundrot.gif) no-repeat scroll center top;
****color: #1E1E1E;
****Text-decoration: none;
****font-weight: bold;
}
.catListBody li.activeCat li.activeCat a {
****background: transparent url(../../img/box__li_hintergrundrot.gif) no-repeat scroll center top;
****color: #1E1E1E;
****Text-decoration: none;
****font-weight: bold;
}
.catListBody li.activeCat li.activeCat li.activeCat a ,
.catListBody li.activeCat li.activeCat li.activeCat li.activeCat a ,
.catListBody li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat a ,
.catListBody li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat li.activeCat a {
****background-color: #000;
****color: #FFF;
}

in der 2. Reihe unter

.catListBody li.activeCat li.activeCat a

reinhaue und oben raushole

.catListBody li.activeCat a {
background: transparent url(../../img/boxhintergrund_Link [ Verweis auf andere Stelle der Webseite ]s.gif) no-repeat scroll center top;
color: #1E1E1E;
Text-decoration: none;
font-weight: bold;
}

ist zwar die Unterkategorie dann schön rot hinterlegt, jedoch funzt es logischerweise bei KEINER Hauptkategorie mehr.

und wenn ich den Hintergrund in beide reinhaue, bleiben halt auch alle (Hauptkategorie und alle Unterkategorien) mit rotem Hintergrund.

Könnte es nicht so ne If/else Regelung für so ne Situation geben ??
D.h. wenn Unterkategorie aktiv, dann Hauptkategorie nicht aktiv .... oder so ?

[cybertramp]

Ich schieb´s nochmal hoch.. hat keiner von Euch ne glorreiche Idee, wie man das lösen könnte ?