Navigation - Probleme

Hallo,

ich habe folgendes Problem. Ich habe eine Navigation mittels CSS erstellt. Sie funktioniert auch soweit, jedoch werden der ACT und der CUR - Zustand nicht übernommen, das heißt, der bold und andere-Farbe-Zustand werden nicht angezeigt. Ich weiß einfach nicht mehr weiter und hoffe hier einen Lösungsvorschlag angeboten zu bekommen.

Hier meine dateien:

styles.css

@import url(content.css);

html,body{margin:0;padding:0;background: #FFF;}

body{ font: arial,sans-serif; text-align:center; }

a {
margin:0;
padding:0;
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: normal;
color: #688C8C;
text-decoration: none;
}

a:hover {
font-weight: bold;
color: red;
}

....

#navi ul {
margin: 0;
padding: 20px 20px 20px 40px;
list-style-type: none;
}
#navi li {
margin: 0; padding: 0;
text-decoration: none;
font-family: verdana, sans-serif;

/* padding: 5px 0 5px 30px;*/
}
#navi li a {
text-decoration: none;
color: #688C8C;
font-weight: normal;
}
#navi li a:hover {
color: red;
font-weight: bold;
}

div#navi li.ACT,
div#navi li.CUR {
font-weight: bold;
color: #FF0000;
}

...

content.css

....

/***************************/
/* General element styles: */
/***************************/
H1, H2, H3, H4, H5, P, TD, UL, OL, BLOCKQUOTE, INPUT, TEXTAREA, SELECT { font-family: arial, helvetica; color: #000000; }
PRE { font-family: arial, helvetica; }
A { color: #000000; text-decoration: underline; font-weight:normal; }
A:hover { color: #660000; font-weight:bold; }
FORM { margin: 0px 0px 0px 0px;}
P, PRE { margin: 0px 0px 0px 0px; }
P, TD, UL, OL { font-size: 12px; }
INPUT, TEXTAREA, SELECT { padding-left: 5px; font-size: 12px; }

.....

und hier noch mein Setup:

.....

subparts.NAVI = HMENU
subparts.NAVI.stdWrap.wrap = <ul> | </ul>
subparts.NAVI.1 = TMENU
subparts.NAVI.1 {
expAll = 0
NO.wrapItemAndSub = <li class="NO"> | </li>
ACT = 1
ACT.wrapItemAndSub = <li class="ACT"> | </li>
CUR = 1
CUR.wrapItemAndSub = <li class="CUR"> | </li>
}
subparts.NAVI.2 = TMENU
subparts.NAVI.2.wrap = <ul> | </ul>
subparts.NAVI.2 {
expAll = 0
NO.wrapItemAndSub = <li class="NO"> | </li>
ACT = 1
ACT.wrapItemAndSub = <li class="ACT"> | </li>
CUR = 1
CUR.wrapItemAndSub = <li class="CUR"> | </li>
}

subparts.NAVI.3 = TMENU
subparts.NAVI.3.wrap = <ul> | </ul>
subparts.NAVI.3 {
expAll = 0
NO.wrapItemAndSub = <li class="NO"> | </li>
ACT = 1
ACT.wrapItemAndSub = <li class="ACT"> | </li>
CUR = 1
CUR.wrapItemAndSub = <li class="CUR"> | </li>
}

Salue,

Du überschreibst die Styles:

div#navi li.ACT,
div#navi li.CUR {
font-weight: bold;
color: #FF0000;
}

hier weist du "li" font-weight: bold; zu, definierst danach aber

#navi li a {
text-decoration: none;
color: #688C8C;
font-weight: normal;
}

Der Browser erkennt also die Styles für "li.ACT" bzw. "li.CUR", schreibt den Text dementsprechend fett. Nun ist der vorhandene Text aber ein Link, also sucht sich der Browser die Styles für "li a" und setzt diese um -> Dein Text erscheint normal.

Um den von Dir gewünschten Effekt umzusetzen, müsstest du

div#navi li.ACT a,
div#navi li.CUR a {
      font-weight: bold;
      color: #FF0000;
}

definieren, und nicht nur "li".

Hoffe, es war einigermassen verständlich :-)
Gruss, Claude

danke, du hast mir sehr geholfen 🙂