Suche
Teilen
startseite » forum

Menü mit sliding doors technique [Gelöst]

  • mike_sebaro mike_seba...
    Jedi-Ritter
    0 x
    128 Beiträge
    0 Hilfreiche Beiträge
    29. 08. 2007, 12:00

    Hallo

    möchte gerne mein Design etwas aufpeppen und dazu css und sliding doors technique verwenden.

    Der Link der generiert werden soll, sollte so aussehen:

    [HTML]<a class="button" href="#"><span>Bring world peace</span></a>[/HTML]

    Hier noch das CSS dazu:

    [HTML].clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
    }

    a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
    }

    a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
    }[/HTML]

    Allerdings generiert mir Typo3 den Link nicht so, dass es funktioniert, wie bringe ich Typo3 Dazu den Link so zu generieren wie ich ihn brauche?

    Hier das TS das ich bis jetzt habe:

    [TS]subparts.mainmenue = HMENU
    subparts.mainmenue.special = directory
    subparts.mainmenue.special.value = 1
    subparts.mainmenue.1 = TMENU
    subparts.mainmenue.1.NO {
    ATagParams = class="button"
    [/TS]

    kann mir da jemand helfen wie ich das am besten lösen kann?

    Gruß Mike

  • 1
  • maik maik
    Jedi-General
    0 x
    1194 Beiträge
    1 Hilfreiche Beiträge
    29. 08. 2007, 12:18

    Soweit ich das sehe fehlt dir ja nur noch der innere SPAN.
    Die Klasse sollte mit
    [TS]ATagParams = class="button"[/TS]
    zugewiesen werden.

    Den Link Text könntest du mit stdWrap in den SPAN packen.

    Alternativ gibt es noch die Option
    [TS]ATagBeforeWrap = 1[/TS]

    Schau doch mal in die TSRef 10.8, da findest du die ganzen Optionen für ein TMENUITEM.

    http://typo3.org/documentation/document-library/references/doc_core_tsref/4.1.0/view/10/8/

    http://www.caroonline.de

  • mike_sebaro mike_seba...
    Jedi-Ritter
    0 x
    128 Beiträge
    0 Hilfreiche Beiträge
    29. 08. 2007, 13:27

    hab gerade noch etwas rumprobiert.
    ich komm irgendwie nicht drauf, sollte doch mal wieder ne pause machen.

    mein ts sieht jetzt so aus:

    [TS]// TMENU (TOPMENÜ)
    subparts.mainmenue = HMENU
    subparts.mainmenue.special = directory
    subparts.mainmenue.special.value = 1
    subparts.mainmenue.1 = TMENU
    subparts.mainmenue.1.NO {
    ATagParams = class="button"
    stdWrap = <span> | </span>[/TS]

    aber nix von span zu finden :-(

  • d.walter d.walter
    Jedi-General
    0 x
    1270 Beiträge
    1 Hilfreiche Beiträge
    29. 08. 2007, 13:27

    Ich habe das so gemacht:

    TS
    [TS]temp.MAINMENU = HMENU
    temp.MAINMENU {
    special = directory
    special.value = 55
    1 = TMENU
    1 {
    noBlur = 1
    wrap = <ul>|</ul>
    NO = 1
    NO {
    ATagTitle.field = abstract // description // title
    wrapItemAndSub = <li>|</li>
    }
    CUR < .NO
    CUR.wrapItemAndSub = <li id=current>|</li>
    #CUR.doNotLinkIt = 1

    ACT <.CUR
    }
    }
    }[/TS]

    und das CSS dazu

    [HTML]#nav_main {
    width:100%;
    font-size: 1.2em;
    float:left;
    color: #fff;
    background-color:#98CEFA;
    background:#98CEFA url("../../images/bg.png") repeat-x bottom;
    }

    #nav_main ul {
    white-space: nowrap;
    line-height: 1em;
    margin:0;
    padding:0 0 0 50px;
    list-style:none;
    }

    #nav_main li {
    float:left;
    background: #98CEFA url("../../images/left.png") no-repeat top left;
    /* margin-right: 2px; nur einfügen bei ECKIGEN Ecken */
    padding: 0 0 0 3px;
    margin: 0;
    border-bottom:1px solid #000;
    }

    #nav_main a {
    float:left;
    display:block;
    color:#334;

    background: transparent;
    background: url("../../images/right.png") no-repeat top right;
    padding:5px 11px 3px 8px;
    text-transform: none;
    text-decoration:none;
    font-weight:bold;

    width: auto; /* nur IE 5.x */
    width/**/:/**/ .1em; /* für IE 6.0 */
    }

    #nav_main > ul a {width:auto;} /* für alle anderen Browser */

    /* Commented Backslash Hack
    hides rule from IE5-Mac \*/
    #nav_main a {float:none;}
    /* End IE5-Mac hack */

    */ #nav_main li:hover, #nav_main li:hover a { background-position:0% -80px; }
    */ #nav_main li:hover a { background-position:100% -80px; }

    */ #nav_main #current { background-position:top left }
    */ #nav_main #current a { background-position:top right }

    #nav_main a:hover {
    color:#fff;
    background-color: transparent;
    background: url("../../images/right.png") no-repeat top right;
    }

    #nav_main #current {
    background-image: url("../../images/left.png");
    border-width:0
    }

    [/HTML]

  • mike_sebaro mike_seba...
    Jedi-Ritter
    0 x
    128 Beiträge
    0 Hilfreiche Beiträge
    29. 08. 2007, 13:38

    dein artikel d.walter bringt mich jetzt nicht weiter.
    ich brauch ja nur das span tag im link mehr nicht

  • d.walter d.walter
    Jedi-General
    0 x
    1270 Beiträge
    1 Hilfreiche Beiträge
    29. 08. 2007, 14:17

    Hallo mike probier mal

    [TS]stdWrap.wrap = <span> | </span>[/TS]

    und nicht vergessen, alle Klammern wieder zu schliessen.

    Daniel

  • mike_sebaro mike_seba...
    Jedi-Ritter
    0 x
    128 Beiträge
    0 Hilfreiche Beiträge
    30. 08. 2007, 10:35

    super danke klappt jetzt

  • 0 x
    19 Beiträge
    0 Hilfreiche Beiträge
    25. 09. 2007, 12:55

    Und hier nochmal für die Nachwelt:

    [TS]### Menu oben ###################################
    subparts.menu = HMENU
    subparts.menu.1 = TMENU
    subparts.menu.1 {
    # Normaler Status
    expAll = 1
    noBlur = 1
    NO.allWrap = <li> | </li>
    NO.stdWrap.wrap = <span> | </span>
    NO.stdWrap.htmlSpecialChars = 1
    NO.ATagTitle.field = subtitle/title

    # Aktiver Status
    ACT > NO
    ACT = 1
    ACT.stdWrap.htmlSpecialChars = 1
    ACT.allWrap = <li class="aktiv"> | </li>
    ACT.stdWrap.wrap = <span> | </span>
    }
    }
    [/TS]

    Und hier der Auszug aus dem CSS:

    [TS]ul#menu a {
    float:left;
    background: url(../images/tableft.gif) no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    border-bottom: 1px solid #fff;
    }

    ul#menu a span {
    float:left;
    display:block;
    background: url(../images/tabright.gif) no-repeat right top;
    padding:6px 15px 3px 8px;
    color: #fff;
    }

    #menu li.aktiv a {
    background-position:0% -42px;
    color: #99ccff;
    border-bottom: 1px solid #709B16;
    }

    #menu li.aktiv a span {
    background-position:100% -42px;
    color: #fff;
    }

    [/TS]

  • 1
Präsentiert von