NAV_LIST_UL:HCSS

[chrmey]

Hallo Zusammen,

die NAV_LIST_UL finde ich an sich sehr gelungen. Leider habe ich einige Probleme auf Grund mangelnder Anleitung.
Meine Fragen:

1. In welches Verzeichnis muss die nav_list_ul_hcss.css? Das css wird durch Aufruf automatisch importiert. Ist das so in Ordnung, oder muss es in die Vorlage aufgenommen werden (also kopieren in den Ordner /template/inc_css/ oder belassen in /template/inc_css/specific/

2. IE und FF verhalten sich mal wieder total anders (trotz ie.hack). Anbei die CSS Datei und ein Bild vom IE. Im FF sieht alles in Ordnung aus.

Code: Select all

/* 

	Sample CSS for use in combination with {NAV_LIST_UL:HCSS}
	
	CSS for show/hide flyout menu is rendered dynamically in the style section
	Basis of this CSS is taken from http://www.alistapart.com/articles/horizdropdowns/

*/

.hcss_menu {
	font: normal normal 11px/28px Verdana, Geneva, Arial, Helvetica, sans-serif;
	}

.hcss_menu em {
	font-style: normal;
	}
	
.hcss_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 0;
}
	
.hcss_menu ul li {
	float: left;
	position: relative;
	width: 110px; /* Width of Menu Items */
	height: 28px;
    /*background: url(../../img/article/navi1_act.gif) 0px 0px no-repeat;*/
	}
	
.hcss_menu li ul {
	position: absolute;
	left: 0; /* Set 1px less than menu width */
	top: 28px;
	display: none;
	border: 0;
	}
	
.hcss_menu li ul li ul {
	left: 150px;
	top: 0;
	}
	
/* Styles for Menu Items */

.hcss_menu ul li a, .hcss_menu ul li a:link, .hcss_menu ul li a:visited, .hcss_menu ul li a:active {
	display: block;
	text-decoration: none;
	color: #FFFFFF;
    background: url(../../../img/article/navi1_norm.gif) 0px 0px no-repeat;
	padding: 0px;
	border: 0;
	text-align: center;
	}
	
.hcss_menu ul li.active a, .hcss_menu ul li.active a:active, .hcss_menu ul li.active a:link {
/*      .hcss_menu ul li.active a:visited, */
/*	text-align: left; */
    background: url(../../../img/article/navi1_act.gif) 0px 0px no-repeat;
/*	padding-left: 7px; */
}

.hcss_menu ul li a:hover {
	color: White;
	background: url(../../../img/article/navi1_hov.gif) 0px 0px no-repeat;
}

.hcss_menu ul li:hover a {
	color: White;
    background: url(../../../img/article/navi1_hov.gif) 0px 0px no-repeat;
}

.hcss_menu ul li ul li a {
	width: 180px; /* Width of Menu Items */
    height: 27px;
	text-align: center;
	background: #97BA25;
}

.hcss_menu ul li:hover ul li a { /* Hintergrund fuer die SUBs */
	padding-left: 25px;
	text-align: left;
	background: #97BA25; 
	color: #FFFFFF;
	border-bottom: 1px;
	border-color: #D8E4B4;
	border-style: solid;
}

.hcss_menu ul li ul li a:hover {
	background: #6D8B14; /* #708090; */
}
	
/* Holly Hack. IE Requirement \*/
* html .hcss_menu ul li { float: left; height: 1%; }
* html .hcss_menu ul li a { height: 1%; }
/* End */

DIE MAUS STEHT AUF DER TASTE BÜRO!!!!!

Freue mich über jeden Hinweis!!!
Gruß Christian

[flip-flop]

Hi,

du kannst dir diese CSS Datei schnappen und nach /inc_css/ als z.B. nlu_hcss_1.css kopieren.
Hier sind die Klassen umbenannt, damit es keinen Stress mit dem Original gibt.

Dort fügst du noch folgendes an (Der Aufruf HCSS generiert eigentlich nur diese Anweisungen, sonst ist es ein F Aufruf). :

Code: Select all

/* Holly Hack. IE Requirement \*/
* html .hcss_menu1 ul li { float: left; height: 1%; }
* html .hcss_menu1 ul li a { height: 1%; }
/* End */

.hcss_menu1 ul ul { display: none; }
.hcss_menu1 ul li:hover ul { display: block; }
.hcss_menu1 ul li:hover ul ul { display: none; }
.hcss_menu1 ul ul li:hover ul { display: block; }
.hcss_menu1 ul li:hover ul ul ul { display: none; }
.hcss_menu1 ul ul ul li:hover ul { display: block; }
.hcss_menu1 ul li:hover ul ul ul ul { display: none; }
.hcss_menu1 ul ul ul ul li:hover ul { display: block; }
.hcss_menu1 ul li:hover ul ul ul ul ul { display: none; }
.hcss_menu1 ul ul ul ul ul li:hover ul { display: block; }
.hcss_menu1 ul li:hover ul ul ul ul ul ul { display: none; }
.hcss_menu1 ul ul ul ul ul ul li:hover ul { display: block; }

/* ====== END nlu_hcss07_2 ======= */

Aufruf:

Code: Select all

<div class="hcss_menu1">{NAV_LIST_UL:F,0,10,,active}</div> 

Die HCSS ist also nichts anderes als die Ausgabe einer kompletten Liste.
Man muss aber einmalig das Original mit HCSS aufrufen um den unteren Teil zu erhalten.
Natürlich muss die neue CSS-Datei in die Vorlage eingebunden werden.

Knut

[chrmey]

Hallo Knut,

danke für die schnelle Antwort. Leider verstehe ich nicht ganz was Du meinst. Ich habe den unteren Teil in das Original eingefügt und auf hcss_menu verändert. Dies brachte jedoch keinen Erfolg

Was meinst Du eigentlich mit

du kannst dir diese CSS Datei schnappen

Meinst Du meine eigene Datei (Vorlage von phpwcms)?

[flip-flop]

Mit CSS-Datei schnappen meine ich die /template/inc_css/specific/nav_list_ul_hcss.css nach /template/inc_css/ als nlu_hcss_1.css kopieren und den gezeigten Teil am Ende einfügen.

Mit dem Aufruf <div class="hcss_menu1">{NAV_LIST_UL:F,0,10,,active}</div>
hast du nun eine separate CSS-Datei die vor allem updateresistent ist und das Original bleibt sauber.

Knut

[chrmey]

Nochmals Danke,

leider behebt das nicht mein Problem. Das Menü entspricht immer noch nicht meinen Wünschen. Was macht hier der IE anders als der FF???

Der Hinweis auf updateresistent ist natürlich richtig. Leider wird aber scheinbar durch den Aufruf der NAV_LIST_UL das CSS aus /template/inc_css/specific/ automatisch importiert. Somit sieht es jetzt noch schlimmer aus

Benutze übrigens v1.3.3.

Auszug aus dem generierten Quelltext:

Code: Select all

  <style type="text/css">
  <!-- 
    @import url("template/inc_css/frontend.css");
    @import url("template/inc_css/nlu_hcss_1.css");
  //-->
  </style>
<!--[if lte IE 6]>
<script type="text/javascript" src="template/inc_js/minmax.js"></script>
<![endif]-->

  <style type="text/css">
  <!-- 
    @import url("template/inc_css/specific/nav_list_ul_hcss.css");
    .hcss_menu ul ul { display: none; }
    .hcss_menu ul li:hover ul { display: block; }
    .hcss_menu ul li:hover ul ul { display: none; }
    .hcss_menu ul ul li:hover ul { display: block; }
  //-->
  </style>

...

<div class="hcss_menu1"><div class="hcss_menu">
...

[flip-flop]

Wenn du die NAvu mit <div class="hcss_menu1">{NAV_LIST_UL:F,0,10,,active}</div> aufrufst wird garantiert keine HCSS - CSS-Datei geladen.