Hi,
habe eine Seite aus einem anderen CMS übernommen und die Navi mit NAV_LIST_UL umgesetzt. Allerdings habe ich das Problem, dass beim IE6 der Level 1 "verschwindet" und nur der Level 2 angezeigt wird.
Replacement Tag:
{NAV_LIST_UL:F,1,,,active}
Ergibt :
Code: Select all
<ul>
<li class="sub_no"><a href="de_startseite.phtml">Startseite</a></li>
<li class="sub_no"><a href="de_lebenslauf.phtml">Kynologischer Lebenslauf</a></li>
<li class="sub_no"><a href="de_news.phtml">News</a></li>
<li class="sub_ul active"><a href="de_hunde.phtml">Hunde</a>
<ul>
<li class="sub_no"><a href="de_kid.phtml">ForRest Cottage Cincinnati Kid <br /> <i>Rufname: Kid</i></a></li>
<li class="sub_no"><a href="de_connor.phtml">Bäveråsens Zeb<br /><i>Rufname: Connor</i></a></li>
<li class="sub_ul active"><a href="de_kansas.phtml">Kansas my Melodie of golden Spirit<br /><i>Rufname: Kansas</i></a>
<ul>
<li class="sub_no"><a href="de_pedigree_kansas.phtml">Stammbaum</a></li>
<li class="sub_no"><a href="de_ergebnisse_kansas.phtml">Arbeitsergebnisse</a></li>
<li class="sub_no"><a href="de_galerie_kansas.phtml">Galerie</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub_no"><a href="de_seminare.phtml">Seminare</a></li>
<li class="sub_no"><a href="de_guestbook.phtml">Gästebuch</a></li>
<li class="sub_no"><a href="de_kontakt.phtml">Kontakt</a></li>
<li class="sub_no"><a href="de_links.phtml">Links</a></li>
<li class="sub_no"><a href="de_impressum.phtml">Impressum</a></li>
</ul>
Die eingesetzte CSS :
Code: Select all
/*========================================================================
CSS for an vertical menu
Template call: <div class="nlu_navi1">{NAV_LIST_UL:F,0,,,active}</div>
Level 0 - 2;
07.10.06 flip-flop (KH)
========================================================================*/
.nlu_navi1 {
margin: 0;
padding: 0 0 0 0;
border: 0;
text-decoration: none;
/* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
font: normal normal 11px/19px "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 240px; /* ++ Width of Menu Items // Breite der Navigation*/
/* float:left; */
}
.nlu_navi1 em { font-style: normal; }
.nlu_navi1 ul {
margin: 0;
padding: 0;
border: 0;
list-style: none;
width: 240px; /* ++ Width of Menu Items // Breite der Navigation */
}
.nlu_navi1 ul li { position: relative; }
/*--- Styles for Menu Items ------------------------------------*/
/*--- LEVEL X --------------------------------------------------*/
/*---- simple link <a> // einfacher Link <a> */
.nlu_navi1 ul li a,
.nlu_navi1 ul li a:link,
.nlu_navi1 ul li a:visited,
.nlu_navi1 ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #50591A; /* ++ Text color // Textfarbe */
/* ++ background color; url of the image; image adjust e.g. left gap 10px */
/* ++ Hintergrundfarbe; URL der Grafik ; Grafik einrücken z.B. 10px */
background: #BFB193 url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;
/* ++ Text adjust e.g. upper gap and left gap 25px */
/* ++ Text justieren 1px oben und 25px von links */
padding: 1px 0 0 25px;
/* ++ Den "white-space" Fehler im IE7 vermeiden */
/* ++ Killing the "white-space" bug in IE7 */
\width: 240px; /* IE5x Opera <= 5 */
widt\h: 215px; /* = (Width of Menu Items) - (padding-right + left) */
/* ++ bottom line if you want */
/* ++ Untere Linie wenn gewünscht */
/*border-bottom: 1px solid #ccc; ++ horiz. line between */
}
/*---- active link <a> // aktiver Link <a> */
.nlu_navi1 ul li.active a,
.nlu_navi1 ul li.active a:link,
.nlu_navi1 ul li.active a:visited,
.nlu_navi1 ul li.active a:active {
color: #50591A; /* ++ Text color // Textfarbe */
font-weight: bold; /* ++ Bold if you want // Fett wenn gewünscht */
/* background for the active state // Hintergrund für den aktiven Status */
background: #BFB193 url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}
/*---- hover link <a> // Maus über Link <a> */
.nlu_navi1 ul li a:hover,
.nlu_navi1 ul li.active a:hover {
color: White;
/* text-decoration: underline; */
background: #BFB193 url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}
/*--- LEVEL X+1 ------------------------------------------------*/
.nlu_navi1 ul ul li.sub_no a,
.nlu_navi1 ul ul li.sub_no a:link,
.nlu_navi1 ul ul li.sub_no a:visited,
.nlu_navi1 ul ul li.sub_no a:active,
.nlu_navi1 ul ul li.sub_ul a,
.nlu_navi1 ul ul li.sub_ul a:link,
.nlu_navi1 ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul li.sub_ul a:active {
display: block;
text-decoration: none;
text-transform: none;
font-weight: normal;
color: #50591A;
background: #BFB193 url(../../img/article/navi1_norm.gif) 25px 1px no-repeat;
padding: 1px 0 0 40px;
\width: 240px; /* IE5x Opera <= 5 */
widt\h: 200px; /* = (Width of Menu Items) - (padding-right + left) */
border: 0;
border-bottom: 1px solid #ccc; /* IE6 Bug */
}
.nlu_navi1 ul ul li.active a,
.nlu_navi1 ul ul li.active a:link,
.nlu_navi1 ul ul li.active a:visited,
.nlu_navi1 ul ul li.active a:active {
color: #50591A;
font-weight: bold;
background: #BFB193 url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}
.nlu_navi1 ul ul li a:hover,
.nlu_navi1 ul ul li.sub_no a:hover,
.nlu_navi1 ul ul li.sub_ul a:hover,
.nlu_navi1 ul ul li.active a:hover {
color: White;
/* text-decoration: underline; */
background: #BFB193 url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
/*--- LEVEL X+2 ------------------------------------------------*/
.nlu_navi1 ul ul ul li.sub_no a,
.nlu_navi1 ul ul ul li.sub_no a:link,
.nlu_navi1 ul ul ul li.sub_no a:visited,
.nlu_navi1 ul ul ul li.sub_no a:active,
.nlu_navi1 ul ul ul li.sub_ul a,
.nlu_navi1 ul ul ul li.sub_ul a:link,
.nlu_navi1 ul ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul ul li.sub_ul a:active {
display: block;
text-decoration: none;
text-transform: none;
font-weight: normal;
color: #50591A;
background: #BFB193 url(../../img/article/navi1_norm.gif) 40px 1px no-repeat;
padding: 1px 0 0 55px;
\width: 240px; /* IE5x Opera <= 5 */
widt\h: 185px; /* = (Width of Menu Items) - (padding-right + left) */
border: 0;
border-bottom: 1px solid #ccc; /* IE6 Bug */
}
.nlu_navi1 ul ul ul li.active a,
.nlu_navi1 ul ul ul li.active a:link,
.nlu_navi1 ul ul ul li.active a:visited,
.nlu_navi1 ul ul ul li.active a:active {
color: #50591A;
font-weight: bold;
background: #BFB193 url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
}
.nlu_navi1 ul ul ul li a:hover,
.nlu_navi1 ul ul ul li.sub_no a:hover,
.nlu_navi1 ul ul ul li.sub_ul a:hover,
.nlu_navi1 ul ul ul li.active a:hover {
color: White;
/* text-decoration: underline; */
background: #BFB193 url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}
* Holly Hack. IE Requirement \*/
* html .nlu_navi1 ul li { float: left; height: 1%; }
* html .nlu_navi1 ul li a { height: 1%; }
/* End */
/* ==== End nlu_navi1 === */
Ergebnis im IE 6 :
So sollte es Aussehen (hier IE 7):
Ich hab im Moment ein Brett vor dem Kopf. Die Seite läuft noch auf 1.2.8, soll aber auf 1.3.3 upgedatet werden. Ich würde aber den Fehler gerne vorher einkreisen.
Thx und Grüße
Achim