3. Navigationsebene

[designxx]

Hallo,

ich nutze CMS Made Simple 1.8.2.

Und habe folgendes Problem: Ich habe eine linke Navigation, dazu nutze ich als Standardtemplate "simple_navigation.tpl". So soll meine Navi aussehen (Namen sind Beispiele):

> TShirts
    > Rote Tshirts
        > Rot-gestreifte
        > Rot-gefleckte
        > Rot-karrierte
    > Gelbe TShirts

So sieht meine CSS-Datei dazu aus:

Code: Select all

.menue {
   background-color:#fff;
   margin:0;
   color:#fff;
   padding-bottom:0px;
   position:relative;
   font-size:13px;
   width:211px;
   text-decoration: none;
   vertical-align:top;
   text-align:left;}

/* menu li block */
.menue li {
   list-style: none;
   margin: 0;
   display: block;
text-decoration: none;
   color: #fff;
   padding-bottom:3px;}

.menue li li {
   margin:0;
   color: #fff;
   padding-top:3px;
   padding-bottom:0px;
   font-size:13px;
   padding-left:0px;}

.menue ul {
   background-color:#fff;
   margin:0;
   padding:0px;}
   
/** fix stupid ie bug with display:block; **/
* html #menue li a { height: 1%; } 
* html #menue li hr { height: 1%; }
/** end fix **/

.menue a {
    text-decoration:none;
    display: block;
    padding-left:20px;
    color: #fff;
    font-weight:normal;
    margin:0;
    padding-top:4px;
    height:20px;
   background:url(images/design/pfeil.gif) 10px 7px no-repeat; background-color:#7ab51d;}

.menue li li a {
    text-decoration:none;
    display: block;
    padding-left:30px;
    color: #fff;
    font-weight:normal;
    margin:0;
    padding-top:4px;
    height:20px;
   background-color:#7ab51d;}

.menue li li li a {
    text-decoration:none;
    display: block;
    padding-left:40px;
    color: #fff;
    font-weight:normal;
    margin:0;
    padding-top:4px;
    height:20px;
   background-color:#7ab51d;}

.menue a:hover {
    color:#fff;
    text-decoration:none;
    background-color:#006ab3;}

.menue a:visited {
    text-decoration:none;
    color: #fff;}

.menue a:active {
    text-decoration:none;
    color: #fff;}

.menue a:link {
    text-decoration:none;
    color: #fff;}

.menue a.activeparent:hover {
    color:#fff;
    text-decoration:none;
    font-weight:normal;
    background-color:#006ab3;
    font-size:13px;}

.menue ul h3 {
    display:block; 
    padding-left:20px;
    color:#fff; 
    margin:0;
    text-decoration:none;
    font-weight:normal;
    padding-top:4px;
   font-size:13px;
    height:20px;
   background:url(images/design/pfeil.gif) 10px 7px no-repeat; background-color:#006ab3;}

.menue ul ul a {
padding-left:30px;
background:url(images/design/pfeil.gif) 20px 7px no-repeat; background-color:#7ab51d;}

.menue ul ul ul a {
padding-left:40px;
background:url(images/design/pfeil.gif) 30px 7px no-repeat; background-color:#7ab51d;}

.menue li li h3 {
    display:block; 
    padding-left:30px;
    color:#fff; 
    margin:0;
    text-decoration:none;
    font-weight:normal;
    padding-top:4px;
   font-size:13px;
    height:20px;
   background:url(images/design/pfeil.gif) 20px 7px no-repeat; background-color:#006ab3;}

.menue li li li h3 {
    display:block; 
    padding-left:40px;
    color:#fff; 
    margin:0;
    text-decoration:none;
    font-weight:normal;
    padding-top:4px;
   font-size:13px;
    height:20px;
   background:url(images/design/pfeil.gif) 30px 7px no-repeat; background-color:#006ab3;}

/* section header */
.menue li.sectionheader {
    padding-left:0px;
    margin:0;
    text-decoration:none;}

.menue li.separator hr {
    display: none; /* this is for accessibility */}

.menue a.menuactive {
background-color:#009036;
background:url(images/design/pfeil.gif) 10px 7px no-repeat; background-color:#006ab3;}

Wenn ich jetzt auf "Rot-geflekte" klicke, wird das ganze aber nicht mit dem gewünschten Einzug bei Rote TShirts angezeigt, sondern so:

> TShirts
> Rote Tshirts
        > Rot-gestreifte
        > Rot-gefleckte
        > Rot-karrierte
    > Gelbe TShirts

Wie bekomme ich das hin, dass auch in der 3. Ebene die zweite Ebene richig eingerückt wird?

Vielleicht kann mir jemand helfen? Vielen Dank im Voraus!

Ganz liebe Grüße

[NaN]

Welche CSS Klasse hat "Rote Tshirts" wenn es richtig angezeigt wird und welche CSS Klasse hat es wenn Du auf "Rot-gefleckte" klickst?

[designxx]

Richtig:
Gelbe TShirts

Falsch (die Klasse hat auch die erste Ebene, sonst könnte man es ganz einfach ändern):
Rote Shirts

[mike-r]

das CSS, was Du da hast, ist das das Originale, oder hast Du da dran rumgebastelt? Normalerweise macht da ssimple-navigation keine solchen Probleme.

Kann man die Seite mal sehen dazu?

[designxx]

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}


{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent"><a class="menuactive menuparent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Das müsste die original simple_navigation.tpl sein. Die CSS Datei habe ich im Laufe
meiner Zeit mit CMS Made Simple immer mal angepasst...

Den Link zur Seite kann ich leider nicht posten.