Link-Menüelement soll wenn aktiv ist rot werden , weiß echt nicht mehr weiter...

Hallo seit Tagen versuche ich vergeblich das mein Subpart "NAVI" der ein HMENU ist, die Seite wo ich mich gerade befinde oben in der Navigation rot markiert solange ich mich dort aufhalte!

Also ich habe: Unternehmen | News | Kontakt ...

Standarmässig ist alles weiß und bei hover kurz rot ich möchte aber das wenn ich mich auf der Seite Unternehmen befinde, Unternehmen rot und fett wird, bitte helft mir ich kriege das echt nicht hin.

Unten mal meine CSS-Datei, des muss ja irgendein CSS-Befehl sein denke ich mal.

Vielen Dank++

CSS:
--------------------------------------------------------------

p {
margin: 0;
}

#rootline {
position: absolute;
top: 1px;
left: 20px;
width: 450px;
height: 13px;
background: #158BC6;
font: normal 9px Verdana, Arial, Helvetica, sans-serif;
color: white;
text-decoration: none;
}

#rootline li {
color: white;
}

#rootline li a {
text-decoration: none;
color: white;
}

#rootline li a:hover {
color: white;
}

#content {
position: absolute;
top: 225px;
left: 333px;
width: 600px;
background: #158BC6;
font: normal 15px Verdana, Arial, Helvetica, sans-serif;
color: white;
}

#head {
position: absolute;
top: 15px;
left: 20px;
width: 534px;
height: 117px;
background-image: url(img.gif);
}

#header-text {
position: relative;
top: 135px;
left: 285px;
width: 450px;
height: 12px;
background: #158BC6;
font: normal 15px Verdana, Arial, Helvetica, sans-serif;
}

#navi {
position: absolute;
left: 25px;
top: 170px;
background: #158BC6;
width: 800px;
height: 45px;
}

#navi ul {
margin: 0;
padding: 0;
}

#navi li {
float: left;
display: block;
color: white;
padding: 0 17px 0 0;
font: normal 17px Verdana,Arial,Helvetica,sans-serif;
}

#navi li a {
text-decoration: none;
color: white;
}

#navi li a:hover {
color: red;
}

#navi li.ACT a,
#navi li.CUR a {
font-size: 18 px;
color: red;
position: relative;
top: -4pxM
}

#topmenu {
position: absolute;
left: 42px;
bottom: 10px;
background: black;
float: left;
display: block;
color= #000000;
padding: 0 10px 0 0;
font: normal 14px Verdana, Arial, Helvetica, sans-serif;
}

#right {
position: absolute;
height: 250px;
top: 295px;
left: 21px;
width: 275px;
background: #158BC6;
}

#left {
position: absolute;
top: 220px;
left: 21px;^
width: 275px;
background: #158BC6;
}

#left ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#left li {
text-decoration: none;
font: normal 13 px Verdana, Arial, Helvetica, sans-serif;
padding: 5px 15px 5px 10px;
color: white;
}

#left li a {
text-decoration: none;
color: white;

}

#left li a:hover {
color: red;
}

#left li.ACT,
#left li.CUR {
font-size: 18 px;
position: relative;
top: -4pxM
}

body, html {
border: 0;
margin: 0;
width: 100%;
height: 100%;
background: #158BC6;
font: normal 100.01% Verdana, Arial, Helvetic, sans-serif;
color: white;
scrollbar-highlight-color: #158BC6;
}

H1 {
font-family : Verdana, sans-serif;
font-size : 16px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
H2 {
font-family : Verdana, sans-serif;
font-size : 15px;
color : white;
margin-bottom : 10px;
margin-top : 20px;
}
H3 {
font-family : Verdana, sans-serif;
font-size : 12px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
H4 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : white;
margin-bottom : 0px;
margin-top : 10px;
}
.subhead1 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : black;
}
.subhead2 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : green;
}
.subhead3 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
}
.headerdate {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
font-weight: normal;
}

li {
text-decoration: none;
color: white;
}
li a {
color: white;
}
li a:hover {
color: red;
}

strong {
text-decoration: none;
color: white;
}

A {
color:white;
}

A:hover {
color:red;
}

A:active {
color:white;
}

hi src,
würd dir gern helfen, bin aber bißchen tippfaul - post mal den html-snipplett
grüße,
sabine

Du meinst wohl mein HTMl-Template?=?
Also der entsprechende Part heißt "navi"

HTML:
__________________________________________________________________________________
<!--###document###-->
<div id="all">
<div id="head">
</div>
<div id="content">
<!--###content###-->
hier kommt der content hin
<!--###content###-->
</div>
<div id="navi">
<!--###navi###-->
hier kommt die Navigation hin
<!--###navi###-->
</div>
<div id="right">
<!--###right###-->
hier kommt der rechte Inhalt hin
<!--###right###-->
</div>
<div id="rootline">
<!--###rootline###-->
hier kommt der rechte Inhalt hin
<!--###rootline###-->
</div>
<div id="header-text">
<!--###header-text###-->
hier kommt der rechte Inhalt hin
<!--###header-text###-->
</div>
<div id="left">
<!--###left###-->
hier kommt die link navigation hin!
<!--###left###-->
</div>

<div id="footer">
<!--###footer###-->
hier kommt der footer hin!
<!--###footer###-->
</div>

<!--###document###-->

Hast du das gemeint`?

lg chris

..ne, das Frontend-html, das typo rausgibt, einfach nur den Bereich mit der navi

ok

ich gib dir einfach mal die url bevor ich das falsche ausschneied :o

www.spedition-flamm.de

Lg und danke

hi chris,
damit deine Css auf

#navi li.ACT a,
#navi li.CUR a {
font-size: 18 px;
color: red;
position: relative;
top: -4pxM
}

anspringt, sollte im Quelltext sowas stehen wie

<li class="ACT"><a href="Unternehmen.unternehmen.0.html" onfocus="blurLink(this);">Unternehmen</a></li>

bei dir heißts aber

<li class="NO"><a href="Unternehmen.unternehmen.0.html" onfocus="blurLink(this);">Unternehmen</a></li>

änder das mal im TS-Template, dann klapps auch 😉

he super darauf wäre ich nie gekommen ;-)

Jetzt hab ich nur das Prob das standardmässig alles rot ist ich schreib hier mal den CSS-Ausschnitt und was ich dazu versteh

*/ Allgemeiner Teil Positionierung und Farbe
#navi {
position: absolute;
left: 25px;
top: 170px;
background: #158BC6;
width: 800px;
height: 45px;
}

*/ Die Listenformatierung
#navi ul {
margin: 0;
padding: 0;
}

*/ Wie soll der Link aussehen, standardmässig weiß ist er aber nicht !??
#navi li {
float: left;
display: block;
color: white;
padding: 0 17px 0 0;
font: normal 17px Verdana,Arial,Helvetica,sans-serif;
}

*/ Standardmässig weiß
#navi li a {
text-decoration: none;
color: white;
}

*/ wenn ich mit der Maus darüber fahre, soll er rot werden
#navi li a:hover {
color: red;
}

*/ Wenn er aktiv ist soll er rot werden
#navi li.ACT a,
#navi li.CUR a {
font-size: 18 px;
color: red;
position: relative;
top: -4pxM
}

Wo liegt jetzt noch mein Fehler??

Lg udn thx!

muss irgendwas mit dem hier zu tun haben weil wenn ich
#navi li.ACT a, ausschneide wird es wieder weiß. Aber ich möchte ja das das aktive Element rot wird und nicht alle`????

Hast du mir noch einen Tipp??
Danke

#navi li.ACT a,
#navi li.CUR a {
font-size: 18 px;
color: red;
position: relative;
top: -4pxM
}

hi chris,
hatte ein paar Tage zu tun. jetzt ist grade wieder alles beim alten, oder? alle Links in #navi haben die Klasse "NO".
an sich hatte ichs lokal angesehen, da hats funktioniert.
ich denk nicht daß es ein CSS-problem ist, sondern daß dein TS-HMENU keinen Unterschied zwischen aktiven und normalen Links macht.

NO = 1
NO.wrapItemAndSub = <li class="NO">|</li>
ACT = 1
ACT.wrapItemAndSub = <li class="ACT">|</li>

sonst empfielt sich ein genauer Blick ins Tutorial, oder hier in die TSREF
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/ContentObjects/Hmenu/Tmenu/Index.html#confval-menu-tmenu-item-states

hmm .. ja alles noch beim alten ;-) weil es immer noch nicht geht könntest du nochmal kurz einen blick auf mein TS werfen? Dank!

#Einbindung Navigation
subparts.navi = HMENU
subparts.navi {

special = directory
special.value = 456
wrap = <ul> | </ul>
1 = TMENU
1.NO.allWrap= <li class="NO"> | </li>
ACT = 1
ACT.allWrap = <li class="ACT"> | </li>

#Enable active state and set properties:
ACT = 1
ACT.allWrap = <div class="menu1-level1-act"> | </div> 


}

typo3src schrieb

#Einbindung Navigation
subparts.navi = HMENU
subparts.navi {

special = directory
special.value = 456
wrap = <ul> | </ul>
# 1 = TMENU
# 1.NO.allWrap= <li class="NO"> | </li>
1 {
NO.allWrap= <li class="NO"> | </li>

#Enable active state and set properties:
ACT = 1
#ACT.allWrap = <div class="menu1-level1-act"> | </div> 
ACT.allWrap = <li class="ACT"> | </li> 
}
}

(ACT muß doch mit unter 1 rein)

lies mal eins von den guten tutorials auf typo3.org (kannst du einigermaßen englisch? es lohnt sich echt).
modern template building - hoffe sie haben den site nach dem relounch wieder soweit..