by kleiner_Punkt on Tue Jan 27, 2009 16:30 Ich brauche bitte eure Hilfe, wahrscheinlich seh ich die Farbe vor lauter css nicht mehr.
Folgendes Problem
Vertikale Navigation mit {NAV_LIST_UL:F,[ID],,act_path,active}
Struktur
+Home1
+ + deutsch
+ + Home2
+ + Kreise
+ + + grüne Kreise
+ + + blaue Kreise
+ + + gelbe Kreise
+ + Sterne
+ + + lila Sterne
+ + + rote Sterne
+ + + weiße Sterne
Hintergründe standardmäßig grau
Wenn ich jetzt Home2 anklicke, wird bei Home2 der Hintergrund blau ... so soll es sein,
wenn ich jetzt Kreise oder Sterne anklicke, werden dei Hintergründe auch blau (soweit wunderbar)
... ABER
die Hintergründe der jeweiligen Unterpunkte (die ja dann aufgehen) sind dann ebenfalls blau ... die sollen aber grau sein/bleiben
Wenn ich einen Unterpunkt (z.B. grüne Kreise) anwähle, dann bleibt dieser blau (soll er ja auch, weil er jetzt aktiv ist) die anderen Unterpunkte sind grau (auch wie gewollt) und der ParentPunkt "Kreise" wird grün ... auch das soll er.
... wahrscheinlich gibt es hier im Fourm die Lösung ... ich habe ehrlich auch schon gesucht, aber irgendwo steh ich auf dem Schlauch ...
... kann mir bitte jemand einen Schubs geben?
- Code: Select all
/*================================================================
CSS for an vertical menu
<div class="nlu_navi07_1">{ NAV_LIST_UL:F,0,,,active }</div>
Level 0 - 3;
07.10.06 flip-flop (KH)
31.01.07 flip-flop (KH) "white-space" bug solved
using e.g. \width: 245px; and widt\h: 195px;
in every ul li a
..................................................................*/
.nlu_navi3 {
margin: 0 0 0 40px; /* Rand = 40px abzüglich 20px einrücken*/
padding: 0px 0px 40px 0px; /* padding over all // Innerer Geesamtabstand */
text-decoration: none;
/* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
font: normal normal normal 14px/24px Arial, Verdana, Geneva, Helvetica, sans-serif;
width: 230px; /* ++ Width of Menu Items // Breite der Navigation */
/* float:left; */
}
.nlu_navi3 ul {
margin: 0;
padding: 0 0 0 0px;
border: 0;
list-style: none;
width: 230px; /* Width of Menu Items */
}
.navi_120, navi_120 ul { width: 120px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_145, navi_145 ul { width: 145px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_130, navi_130 ul { width: 130px; /* ++ Width of Menu Items // Breite der Navigation */ }
.navi_100, navi_100 ul { width: 99px; /* ++ Width of Menu Items // Breite der Navigation */ }
.nlu_navi3 em { font-style: normal; }
.nlu_navi3 li { margin: 0 0 0 0px; padding: 0 0 0 0px; } /* Level/Sub-Level gap for bottom */
.nlu_navi3 ul li { position: relative; }
/* ==== Styles for Menu Items =================================== */
/* ==== LEVEL X ================================================= */
/* ==== simple link <a> // einfacher Link <a> ==== */
.nlu_navi3 ul li a,
.nlu_navi3 ul li a:link,
.nlu_navi3 ul li a:visited,
.nlu_navi3 ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #006757; /* ++ 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: #eaeaea url(../img/kunde/navi/nav01.gif) 0px 0px no-repeat;
/* ++ bottom line if you want */
/* ++ Untere Linie wenn gewünscht */
border-bottom: 1px solid #ffffff; /* IE6 Bug ++ horiz. line between */
/* ++ Text adjust e.g. upper gap and left gap 25px */
/* ++ Text justieren 1px oben und 25px von links */
padding: 3px 0 3px 10px; /* Text adjust */
/* ++ Den "white-space" Fehler im IE7 vermeiden */
/* ++ Killing the "white-space" bug in IE7 */
width: 230px; /* IE5x Opera <= 5 */
widt\h: 220px; /* = (Width of Mebu Items) - (padding-right + left) */
}
.navi_120 ul li a, .navi_120 ul li a:link, .navi_120 ul li a:visited, .navi_120 ul li a:active {
\width: 120px; /* IE5x Opera <= 5 */
widt\h: 110px; /* = (Width of Mebu Items) - (padding-right + left) */
}
.navi_145 ul li a, .navi_145 ul li a:link, .navi_145 ul li a:visited, .navi_145 ul li a:active {
\width: 145px; /* IE5x Opera <= 5 */
widt\h: 135px; /* = (Width of Mebu Items) - (padding-right + left) */
}
.navi_130 ul li a, .navi_130 ul li a:link, .navi_130 ul li a:visited, .navi_130 ul li a:active {
\width: 130px; /* IE5x Opera <= 5 */
widt\h: 120px; /* = (Width of Mebu Items) - (padding-right + left) */
}
.navi_100 ul li a, .navi_100 ul li a:link, .navi_100 ul li a:visited, .navi_100 ul li a:active {
\width: 100px; /* IE5x Opera <= 5 */
widt\h: 90px; /* = (Width of Mebu Items) - (padding-right + left) */
}
/* ==== active link <a> // aktiver Link <a> ==== */
.nlu_navi3 ul li.active a,
.nlu_navi3 ul li.active a:link,
.nlu_navi3 ul li.active a:visited,
.nlu_navi3 ul li.active a:active {
color: #ffffff; /* #DD3C3C; /* ++ Text color // Textfarbe */
font-weight: normal; /* ++ Bold if you want // Fett wenn gewünscht */
background-color: #026288; /*url(../img/article/square.gif) 0px 0px no-repeat; */
}
.nlu_navi3 ul li.act_path a {
color: #ffffff; /* #DD3C3C; /* #DD3C3C; */
text-decoration: none; /* underline;*/
background: #007660 url(../img/kunde/navi/nav01_active.gif) 0px 0px no-repeat;
width: 220px;
}
/* ==== hover link <a> // Maus über Link <a> ==== */
.nlu_navi3 ul li a:hover {
color: #026288; /* #C9222E; */
/* text-decoration: underline; */
background: #ffffff url(../../img/article/square.gif) 0px 0px no-repeat;
}
.nlu_navi3 ul li.active a:hover { color: #ffffff; /* #FF7200; */ }
/* ==== Parent Link <a> // Only for the parent link <a> ==== */
.nlu_navi3 ul li.sub_parent a,
.nlu_navi3 ul li.sub_parent a:link,
.nlu_navi3 ul li.sub_parent a:visited {
text-decoration: none;
color: #006757;
font-size: 14px;
font-weight: normal;
padding: 0 0 0 0px;
margin: 0;
background: url(../../img/leer.gif) 0px 0px no-repeat;
}
.nlu_navi3 ul li.sub_parent.act_path a {
color: #026288; /* #DD3C3C; /* #DD3C3C; */
text-decoration: none; /* underline;*/
background: url(../../img/leer.gif) 0px 0px no-repeat;
}
.nlu_navi3 ul li.sub_parent.act_path.active a {
text-decoration: none;
color: #006757; /* #234896; */
background: url(../../img/article/square.gif) 0px 0px no-repeat;
}
.nlu_navi3 ul li.sub_parent a:hover,
.nlu_navi3 ul li.sub_parent.act_path.active a:hover { color: #026288; }
/* ==== LEVEL X + 1 ================================================= */
/* ==== simple link <a> // einfacher Link <a> ==== */
.nlu_navi3 ul ul li a,
.nlu_navi3 ul ul li a:link,
.nlu_navi3 ul ul li a:visited,
.nlu_navi3 ul ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #006757; /* ++ 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: #eaeaea url(../img/kunde/navi/nav01.gif) 0px 0px no-repeat;
/* ++ bottom line if you want */
/* ++ Untere Linie wenn gewünscht */
border-bottom: 1px solid #ffffff; /* IE6 Bug ++ horiz. line between */
/* ++ Text adjust e.g. upper gap and left gap 25px */
/* ++ Text justieren 1px oben und 25px von links */
padding: 3px 0 3px 30px; /* Text adjust */
/* ++ Den "white-space" Fehler im IE7 vermeiden */
/* ++ Killing the "white-space" bug in IE7 */
width: 210px; /* IE5x Opera <= 5 */
widt\h: 200px; /* = (Width of Mebu Items) - (padding-right + left) */
}
.navi_120 ul ul li a, .navi_120 ul li a:link, .navi_120 ul li a:visited, .navi_120 ul li a:active {
\width: 120px; /* IE5x Opera <= 5 */
widt\h: 110px; /* = (Width of Mebu Items) - (padding-right + left) */
}
.navi_145 ul ul li a, .navi_145 ul li a:link, .navi_145 ul li a:visited, .navi_145 ul li a:active {
\width: 145px; /* IE5x Opera <= 5 */
widt\h: 135px; /* = (Width of Mebu Items) - (padding-right + left) */
}
.navi_130 ul ul li a, .navi_130 ul li a:link, .navi_130 ul li a:visited, .navi_130 ul li a:active {
\width: 130px; /* IE5x Opera <= 5 */
widt\h: 120px; /* = (Width of Mebu Items) - (padding-right + left) */
}
.navi_100 ul ul li a, .navi_100 ul li a:link, .navi_100 ul li a:visited, .navi_100 ul li a:active {
\width: 100px; /* IE5x Opera <= 5 */
widt\h: 90px; /* = (Width of Mebu Items) - (padding-right + left) */
}
/* ==== active link <a> // aktiver Link <a> ==== */
.nlu_navi3 ul ul li.active a,
.nlu_navi3 ul ul li.active a:link,
.nlu_navi3 ul ul li.active a:visited,
.nlu_navi3 ul ul li.active a:active {
color: #ffffff; /* #DD3C3C; /* ++ Text color // Textfarbe */
font-weight: normal; /* ++ Bold if you want // Fett wenn gewünscht */
background-color: #026288; /*url(../img/article/square.gif) 0px 0px no-repeat; sublevel */
}
.nlu_navi3 ul ul li.act_path a {
color: #ffffff; /* #DD3C3C; /* #DD3C3C; */
text-decoration: none; /* underline;*/
background: #007660 url(../img/kunde/navi/nav01_active.gif) 0px 0px no-repeat;
width: 200px;
}
/* ==== hover link <a> // Maus über Link <a> ==== */
.nlu_navi3 ul ul li a:hover {
color: #026288; /* #C9222E; */
/* text-decoration: underline; */
background: #ffffff url(../../img/article/square.gif) 0px 0px no-repeat;
}
.nlu_navi3 ul ul li.active a:hover { color: #333333; /* #FF7200; */ }
/* ==== Parent Link <a> // Only for the parent link <a> ==== */
.nlu_navi3 ul ul li.sub_parent a,
.nlu_navi3 ul ul li.sub_parent a:link,
.nlu_navi3 ul ul li.sub_parent a:visited {
text-decoration: none;
color: #006757;
font-size: 14px;
font-weight: normal;
padding: 0 0 0 0px;
margin: 0;
background: url(../../img/leer.gif) 0px 0px no-repeat;
}
.nlu_navi3 ul ul li.sub_parent.act_path a {
color: #026288; /* #DD3C3C; /* #DD3C3C; */
text-decoration: none; /* underline;*/
background: url(../../img/leer.gif) 0px 0px no-repeat;
}
.nlu_navi3 ul ul li.sub_parent.act_path.active a {
text-decoration: none;
color: #006757; /* #234896; */
background: url(../../img/article/square.gif) 0px 0px no-repeat;
}
.nlu_navi3 ul ul li.sub_parent a:hover,
.nlu_navi3 ul ul li.sub_parent.act_path.active a:hover { color: #026288; }
/* Holly Hack. IE Requirement \*/
* html .nlu_navi3 ul ul li { float: left; height: 1%; }
* html .nlu_navi3 ul ul li a { height: 1%; }
/* End */
/* Holly Hack. IE Requirement \*/
* html .nlu_navi3 ul ul li { float: left; height: 1%; }
* html .nlu_navi3 ul ul li a { height: 1%; }
/* End */
hier die nlu_navi3.css
Lieben Dank schonmal
Steffi
