[typo3_gaby]

Hallo User,

habe ein grundlegendes Problem mit meinem linken Menü. TS und CSS siehe unten:

- Möchte in der 3. Ebene ein [beforeImg] realisieren.

- Das [beforeImg] auf der 3. Ebene wird zwar angezeigt, aber der Navigationspunkt umgebrochen - also

[PUNKT]
MENÜPUNKT

statt

[PUNKT] MENÜPUNKT

- Ich muss [position: block] im CSS verwenden, weil sonst das Menü "zerschossen" wird (d.h. keine sauberen Trennlinien).

Kennt jemand eine Lösung?

Liebe Grüße
Gaby

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43:

### TS ### page.10.subparts.LINKS-MENU = HMENU page.10.subparts.LINKS-MENU { special = directory special.value = 3 entryLevel = 1 1 = TMENU 1 { noBlur = 1 expAll = 0 wrap = <ul>|</ul> NO.wrapItemAndSub = <li class="links-ebene-1-no">|</li> NO.ATagTitle.field = abstract // description // subtitle // title ACT = 1 ACT.wrapItemAndSub = <li class="links-ebene-1-act">|</li> ACT.ATagTitle.field = abstract // description //subtitle //  title } 2 = TMENU 2 { noBlur = 1 expAll = 0 NO.wrapItemAndSub = <li class="links-ebene-2-no">|</li> NO.ATagTitle.field = abstract // description // title ACT = 1 ACT.wrapItemAndSub = <li class="links-ebene-2-act">|</li> ACT.ATagTitle.field = abstract // description // title } 3 = TMENU 3 { noBlur = 1 expAll = 0 NO.wrapItemAndSub = <li class="links-ebene-3-no">|</li> NO.beforeImg = fileadmin/designbilder/nosub.gif NO.beforeImgLink = 1 NO.ATagTitle.field = abstract // description // title ACT = 1 ACT.wrapItemAndSub = <li class="links-ebene-3-act">|</li> ACT.beforeImg = fileadmin/designbilder/nosub.gif ACT.ATagTitle.field = abstract // description // title ACT.beforeImgLink = 1 } }

PHP-Code:


### CSS ###
 
 
#links-menu ul {
        margin: 0;
        padding: 0;
        overflow: hidden;
        list-style-type: none; 
}
 
#links-menu ul a {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        text-decoration: none;
        display: block;
}
 
#links-menu ul li {
        display: block;
        padding: 0;
        margin: 0;
        border-top-width: 1px;
        border-bottom-width: 0px;
        border-top-style: solid;
        border-bottom-style: solid;
        border-top-color: #ffffff;
        border-bottom-color: #ffffff;
        background: #123456;
}
 
#links-menu li.links-ebene-1-no a {
        height: auto;
        text-decoration:none;
        display: block;
        font-weight: bold;
        padding: 4px 6px 4px 15px;
        background: #123456;
        color: #000000;
}
 
#links-menu li.links-ebene-1-no a:hover, #links-ebene li.links-ebene-1-act a {
        height: auto;
        text-decoration: none;
        display: block;
        padding: 4px 6px 4px 15px;
        background: #123456;
        font-weight: bold;
        color: #000000;
}
 
#links-menu li.links-ebene-2-no a {
        height: auto;
        text-decoration: none;
        display: block;
        padding: 4px 6px 4px 25px;
        background: #123456;
        color: #000000;
}
 
#links-menu li.links-ebene-2-no a:hover, #links-ebene li.links-ebene-2-act a {
        height: auto;
        text-decoration: none;
        display: block;
        padding: 4px 6px 4px 25px;
        background: #123456;
        color: #000000;
}
 
#links-menu li.links-ebene-3-no a {
        height: auto;
        text-decoration: none;
        display: block;
        padding: 4px 6px 4px 40px;
        background: #123456;
        color: #000000;
}
 
#links-menu li.links-ebene-3-no a:hover, #links-ebene li.links-ebene-3-act a {
        height: auto;
        text-decoration: none;
        display: block;
        padding: 4px 6px 4px 40px;
        background: #123456;
        color: #000000;
} 


[parchegroup]

Hi,

warum realisierst Du das beforeImage nicht auch in CSS?

Bei :hover einfach das Hintergrundbild austauschen.

Viele Grüße