Probleme mit aktiven Kategorien

[Parry]

Hallo,

so kurz vor dem WE ist mir da noch eine kleine Frage eingefallen. Bin durch Zufall auf einen alten Post (Aktive Kategorie hervorheben) gestoßen und hab es dann gleich ausprobiert.

Code: CSS  [Auswählen]

/* 1st TIER */
ul#categorymenu li.level1 {
        list-style-type:none;
        background-color:#FFBC79;
        padding:4px 0px 4px 6px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
}

/* 2nd TIER */
ul#categorymenu li.level2 {
        list-style-type:none;
        background-color:#EEA003;
        padding:4px 0px 4px 24px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
}
/* 3rd TIER */
ul#categorymenu li.level3 {
        list-style-type:none;
        background-color:#EEA003;
        padding:4px 0px 4px 40px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
}
.level1 a {
        color:#000000;
        text-decoration:none;
}
.level2 a {
        color:#ffffff;
        text-decoration:none;
}
.level3 a {
        color:#ffffff;
        text-decoration:none;
}
.level1 a.current  {
        list-style-type:none;
        background-color:#cc0000;
        padding:4px 5px 4px 6px;
        font-weight:bold;
        color:#000
}

.level2 a.current  {
        font-weight:bold;
        color:#000
}

.level3 a.current  {
        font-weight:bold;
        color:#000
}

Leider mit mittelmäßigem Erfolg, ich hab (glaube ich zumindest) alles gemacht was Christian beschrieben hat. Komme dann auch soweit, dass die Höhe von der aktiven Box stimmt, nur leider geht es nicht über die Schrift. Wenn ich das über Padding lösen will bekomme ich das Problem, dass nicht alle Kategorienamen gleich lang sind.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Hat jemand eine Idee?
Danke und ein schönes WE wünsch ich euch!

Parry

Linkback: https://www.modified-shop.org/forum/index.php?topic=929.0

[Tomcraft]

Meine Idee wäre erstmal nur backgound-color und color genau gegeneinander auszutauschen, damit der Effekt nicht ganz so bescheiden aussieht. *gg*

Dann hast du in der aktiven Kat eben nur die Textfarbe geändert und nicht die Hintergrundfarbe.

[Parry]

Danke, das mit der hässlichen Farbe mache ich beim "rumspielen" damit ich auch alles genau sehen kann!  

Ok, das werde ich dann erstmal machen, aber wie ich die Hintergrundfarbe komplett ändenr kann fällt dir auch nicht ein oder?

Einen schönen Abend noch!

[Tomcraft]

Nein, tut mir leid... da komme ich auch nur soweit wie du, dass es hinter der Schrift liegt aber nicht in voller Breite des Menus

[pufaxx]

Versuch mal einen anderen Trick:

Code: CSS  [Auswählen]

ul#categorymenu li { display: inline }
ul#categorymenu a { display: block }

... und ul#categorymenu a bekommt dann die ganzen Eigenschaften von wegen "weiße Linie unten, padding, Hintergrundfarbe ... Hat zudem den Vorteil, dass man mit der Maus nicht genau den Text "treffen" muss.

[itsmedia]

Oder versuche es mit diesen angaben ACHTUNG NUR GETESTET IM FIREFOX DORT FUNKTIONIERT ES AUCH!

Code: CSS  [Auswählen]

ul#categorymenu {
        background-color:#EDEDED;
        margin-bottom:15px;
        border-top-width: 0px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #4E4E4F;
        border-right-color: #4E4E4F;
        border-bottom-color: #4E4E4F;
        border-left-color: #4E4E4F;
}

ul#categorymenu:hover {
        background-color:#FFFFFF;
        margin-bottom:15px;
        border-top-width: 0px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: solid;
        border-top-color: #4E4E4F;
        border-right-color: #4E4E4F;
        border-bottom-color: #4E4E4F;
        border-left-color: #4E4E4F;
}
/* 1st TIER */
ul#categorymenu li.level1 {
        list-style-type:none;
        background-color:#CCCCCC;
        padding:4px 0px 4px 6px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
}  

ul#categorymenu li.level1:hover {
        list-style-type:none;
        background-color:#FFFFFF;
        padding:4px 0px 4px 6px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
        color:#ffff;
}  

/* 2nd TIER */
ul#categorymenu li.level2 {
        list-style-type:none;
        background-color:#999999;
        padding:4px 0px 4px 24px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
}

ul#categorymenu li.level2:hover {
        list-style-type:none;
        background-color:#FFFFFF;
        padding:4px 0px 4px 6px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
        color:#ffff;

}
/* 3rd TIER */
ul#categorymenu li.level3 {
        list-style-type:none;
        background-color:#CCCCCC;
        padding:4px 0px 4px 40px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
}  

ul#categorymenu li.level3:hover {
        list-style-type:none;
        background-color:#FFFFFF;
        padding:4px 0px 4px 6px;
        border: solid #fff;
        border-width:1px 0px 0px 0px;
        color:#ffff;

}

Und denk auch an die xtc_show_category.inc.php

[Tomcraft]

Fieses Konstrukt!

Da würde ich die "block" Variante bevorzugen.

[Parry]

Hallo,

also ich habe den Tipp von Pufaxx umgesetzt und die Sache sieht genauso aus wie ich mir das vorgestellt habe (im Firefox und Opera).

Navigation Firefox:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Navigation IE:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Der gute alte IE ( spielt da aber leider nicht so mit, es sei denn man nutzt ihn im Kompatibilitätsmodus.

Hier ist mein stylesheet.css, sieht einer der .css Profis auf die Schnelle vielleicht einen Fehler?

Code: CSS  [Auswählen]

/* CATEGORY MENU */
h2.categoryheader {
        background:url("img/box_header.png") no-repeat;
        height:26px;
        padding:0px 8px 0px 8px;
        margin:0px;
        vertical-align:middle;
}
ul#categorymenu {
        background-color:#515050;
}
ul#categorymenu a {
        display: block;
        height:24px;
        padding:4px 0px 0px 8px;
        border: solid #3f3f3f;
        border-width:1px 1px 0px 0px;
}
#categorymenu a:hover {
        background-color:#cc0000;
        color:#ffffff;
}
/* NEUES DESIGN DER KATEGORIEN*/
/* 1st TIER */
ul#categorymenu li.level1 {
        list-style-type:none;
}
/* 2nd TIER */
ul#categorymenu li.level2 {
        list-style-type:none;
}
/* 3rd TIER */
ul#categorymenu li.level3 {
        list-style-type:none;
}
.level1 a {
        color:#ffffff;
        text-decoration:none;
        background-color:#515050;
}
.level2 a {
        color:#ffffff;
        text-decoration:none;
        background-color:#6a6a6a;
}
.level3 a {
        color:#ffffff;
        text-decoration:none;
        background-color:#8f8f8f;
}
.level1 a.current  {
        display: inline;
        display:block;
}
.level2 a.current  {
        display: inline;
        display:block;
}
.level3 a.current  {
        display: inline;
        display:block;
}

Danke und Grüße Parry

[guensi]

Code: CSS  [Auswählen]

.level1 a.current  {
        display: inline;
        display:block;
}
.level2 a.current  {
        display: inline;
        display:block;
}
.level3 a.current  {
        display: inline;
        display:block;
}

Tja wie soll er dir dass denn nun darstellen - inline oder block? Der IE macht vermutlich folgendes - er nimmt den ersten Befehl und ignoriert den Rest -> ergo es funktioniert nicht. Andere Browser arbeiten sich bis zum Ende durch und nehmen den jeweils letzten Befehl als gültig an -> ergo es funktioniert. Schmeiss da überall mal das display:inline; raus, dann sollte es auch im IE gehen.

[Parry]

Hallo,

ich hab deinen Rat befolgt, doch der doofe IE macht immernoch das gleiche.  
Kann ich nur hoffen, dass die verwendeten Browser der Kunden ähnlich der Umfrage hier im Forum sind, oder gibt es noch Hoffnung?

Gruß Parry

[guensi]

Haste mal nen Link damit man sich den Quelltext anschauen kann?

[Parry]

Hier: http://www.its-sport.de/

Vielen Dank

[guensi]

Prinzipiell mal ein klarer Fall von Problem bei der Erstellung der Listen.

Code: XML  [Auswählen]

<li class="level1"><a class="current" href="http://www.its-sport.de/XLR8®-Angebot-Packs:::10.html">XLR8® Angebot Packs
<li class="level2"><a class="" href="http://www.its-sport.de/XLR8®-Angebot-Packs/XLR8®-Gymnastikball-Sets:::10_66.html">XLR8® Gymnastikball Sets

Deine Listen werden nicht geschlossen - das heisst das </li> Tag am Ende fehlt. Das sollte es in XHTML nicht geben, mit HTML hat das noch funktioniert. Kann sein, dass der IE8 darauf so allergisch reagiert, dass er einen leeren Listeneintrag darunter einblendet.

Im letzten Listeneintrag wird das li geschlossen.

Code: XML  [Auswählen]

<li class="level1"><a class="" href="http://www.its-sport.de/Trainingsunterlagen:::11.html">Trainingsunterlagen</a></li></ul>

Kannst ja mal schauen, ob der IE8 da nix mehr drunter bastelt. Dann wäre das dein Problem.

[Parry]

Yippie, es hat geklappt (war ein Fehler in der xtc_show_category)
Guensi du bist der Beste und weil ich grad sowieso am Basteln war habe ich dir ein schönes Avatar gemacht.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Danke

[guensi]

Danke - freut mich dass ich helfen konnte. <grins> der herzigünsi ist echt allerliebst