Hallo Experten,
hier ist eine TYPO3 Neuling mit riesen Problem
Ich möchte in meinem Projekt gerne diese
http://www.cssplay.co.uk/menus/simple_dropline.html
Dropline Navigation realisieren. Dies habe ich bereits per html und css statisch realisiert. Als ich aber das ganze mit TYPO3 realiseren wollte, entstanden viele Probleme. Zu einem die Schriften standen nicht da wo sie sein sollten, zum anderen die Formatierung war nicht richtig.
Ich möchte gerne, für die obere Menuleiste ein anderes Hover-Effekt als die für untere. Das klappt auch. Doch bei dem unteren Menüpunkt wird die Formattierung der oberen Menü und dem von unteren Menü übernommen. Also, es entstehen gleichzeitig zwei Hover-Effekte bei dem unteren Menü. Ich vermute, dass da was mit meinem TYPOScript nicht in Ordnung ist, da dass ganze ja ohne Probleme statisch funktioniert hat.
Ich hoffe ihr könnt mir helfen.
Den TYPOScript Code für die Navigation und den CSS schicke ich mit
marks.NAVIGATION = HMENU
marks.NAVIGATION{
special = directory
special.value = 123
1 = TMENU
1{
#<dfn>-Tag in den Quelltext einfügen, um die Navigation zugänglich zu machen
#barrierefrei
# IProcFunc = user_cronaccessiblemenus->makeAccessible
# IProcFunc.dfn = 1
# IProcFunc.inATag = 1
#Eigenschaft noBlur wird deaktiviert, um mit der
#Tabulatortaste zu navigieren
noBlur = 1
wrap = <ul class="menu"> | </ul>
NO = 1
NO{
linkWrap = <li> | <span class="usb">. </span> </li>
ATagTitle.field = subtitle // title
stdWrap.htmlSpecialChars = 1
}
ACT = 1
ACT.wrapItemAndSub = <li class="current"> | </li>
ACT.doNotLinkIt = 1
}
2 = TMENU
2{
#<dfn>-Tag in den Quelltext einfügen, um die Navigation zugänglich zu machen
#barrierefrei
#IProcFunc = user_cronaccessiblemenus->makeAccessible
#IProcFunc.dfn = 1
#IProcFunc.inATag = 1
noBlur = 1
wrap = <ul class="sub_menu"> | </ul>
NO = 1
NO.linkWrap = <li> | <span class="usb">. </span></li>
NO.ATagTitle.field = subtitle // title
NO.stdWrap.htmlSpecialChars = 1
CUR = 1
CUR.wrapItemAndSub = <li class="sub_current"> | </li>
CUR.doNotLinkIt = 1
}
}
/*CSS Code*/
/*Navigation*/
#naviWrapper {
background-color:#fff1e6;
border-left:1px solid #666666; /*äußere Rahmen für die Navigation*/
border-right:1px solid #666666;
border-bottom:2px solid #9e131c;
clear: left;
margin:0px auto; /*nur hier, ansonsten 0*/
overflow:hidden;
width:80%;
height:4.8em;
}
#Navigation {
background:#fff1e6 url(../images/Navi.gif) repeat-x scroll 0 0;
float:left;
height:2.3em;
width: 100%;
position: relative;
}
#Navigation ul li {
display: inline;
float: left;
margin: 0;
width: auto;
padding:0;
height:auto;
/*border: 1px dashed #FFFF00;*/
}
#Navigation .menu, #Navigation .current {
color:#EAEAEA;
font-size: 1.1em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding: 0.03em 1em 1em 1em;
list-style:none;
display:block;
}
#Navigation .menu a, #Navigation .current a {
color:#EAEAEA;
display: block;
float:left;
font-size: 1.1em;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 100%;
margin: 0 auto;
position: relative;
text-align: center;
text-decoration: none;
white-space: nowrap;
padding: 0.3em 1em 1em 1em;/*richtet den oberen Menüzeile auf dem Hintergrundbild*/
}
#Navigation .current a{
background-color: #fff1e6;
border-top: 3px solid #9e131c;
color: #000000;
padding-top: 0.1em;
}
#Navigation li.current {
background-position:0 -75px;
background-color: #fff1e6;
border-top: 3px solid #9e131c;
color: #000000;
padding-top: 0em;
}
#Navigation .menu a:hover/*,
#Navigation .menu li:hover a*/ {
/* background-position:0 -75px;
cursor:pointer;
background-color: #fff1e6;
border-top: 3px solid #9e131c;
color: #000000;
padding-top: 0em;*/
color:#FFFF33;
}
/*#Navigation .menu a:hover{
color:#33FF00;
}*/
/*-----------------------------------------------------------------------------
Untermenü
-------------------------------------------------------------------------------*/
#Navigation ul li ul li{
display: inline;
float: left;
margin: 0;
width: ;
padding:0.1em;
height:auto;
/*border: 1px dashed #00FF00;*/
}
#Navigation .sub{
position:absolute;
left:-1000px;
top:-1000px;
width:0;
height:0;
overflow:hidden;
display:inline;
/* display: none;*/
}
#Navigation .sub_menu{
/*background:##fff1e6 none repeat scroll 0 0;*/
/*color:#000000;*/
display:block;
left:0;
padding:0;
position:absolute;
top:25px;
width: 100%;
/*height:13px;*/
z-index:10;
margin: 0;
}
#Navigation .sub_menu a {
background:#fff1e6 url(../images/Kaestchen.gif) no-repeat scroll right 35%;
border:0 none;
color:#818080;
display:block;
float:left;
font-size:0.9em;
font-family: Verdana, Arial, Helvetica, sans-serif;
/*height:23.5px;*/
line-height:20px;
margin:0;
padding:0.1em 1em 1em 1em;
text-decoration:none;
white-space:nowrap;
list-style: none;
}
#Navigation .sub_menu li:hover a {
color:#000000;
text-decoration: underline;
}
#Navigation .sub_current {
color:#000000;
font-size:0.9em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration:underline;
padding:0.4em 1em 1em 1.8em;