Menü Zeilenumbruch nicht korrekt

  • via via
    Sternenflotten-Admiral
    0 x
    193 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 14:32

    Hallo,

    jetzt habe ich meine Navigation nochmal neu aufgebaut in der Hoffnung weniger Fehler gemacht zu haben als vorher.
    Nur leider schaffe ich es nicht, dass die Menüpunkte immer in einer separten Zeile stehen.

    Kann mir hier jemand konkret weiterhelfen?
    Unter Firefox fällt's besonders auf, dass da etwas nicht stimmt.
    http://www.personaltraining-offenburg.de/nordicwalking.0.html

    Viele Grüße,
    Oliver

    #config.admPanel = 1

    [b]Typoscript Template[/b]
    [TS]page = PAGE
    page.typeNum = 0
    page.stylesheet = fileadmin/templates/pt/templ/pt.css

    page.10 = TEMPLATE
    page.10 {
    template = FILE
    template.file = fileadmin/templates/pt/templ/pt.html

    workOnSubpart = DOCUMENT_BODY

    # Page Title displayed
    subparts.HEADER = TEXT
    subparts.HEADER {
    field = title
    }

    # Content
    subparts.CONTENT < styles.content.get
    subparts.CONTENT_RIGHT < styles.content.getRight

    # horizontales Menü
    subparts.MENU=HMENU
    subparts.MENU.special = directory
    subparts.MENU.special.value = 796
    subparts.entrylevel = 0
    subparts.MENU.1=TMENU
    subparts.MENU.1.NO.allWrap=  | » |*|  | » |*|  |

    # vertikales Menü
    subparts.MENU_L = HMENU
    subparts.MENU_L {
    special = directory
    special.value = 797
    entryLevel = 1

    # erstes level
    1 = TMENU
    1.wrap = |
    1.NO.allWrap = <br />|<br />
    1.NO.ATagParams = class="level1-no"

    1.ACT < 1.NO
    1.ACT = 1
    1.ACT.ATagParams = class="level1-act"

    2 = TMENU
    2.wrap = |
    2.NO.allWrap = <br />|<br />
    2.NO.ATagParams = class="level2-no"

    2.ACT < 1.NO
    2.ACT = 1
    2.ACT.ATagParams = class="level2-act"

    }

    # Protection Spam EMail

    config {
    spamProtectEmailAddresses = 2
    spamProtectEmailAddresses_atSubst = (at)
    }

    }[/TS]

    [b]CSS-Style Sheets[/b]
    [HTML]/* General styles */
    BODY {
    font-family: Arial, Helvetica;
    font-size: 12px;
    color: #333333;
    margin-left:0px;
    margin-top:0px;
    }

    .HEAD{
    top: 0px;
    left: 0px;
    }

    .MENUBOX{
    top: 200px;
    left: 20px;
    width: 960px;
    height: 40px;
    background-color: #FFBF23;
    }

    .MENU{
    font-family:Arial, Helvetica;
    font-size: 14px;
    color: #FFFFFF;
    top: 10px;
    left: 20px;
    width: 940px;
    height: 20px;
    background-color: #FFBF23;
    }

    .LEFTBOX{
    top: 290px;
    left: 10px;
    width: 250px;
    background-color: #CCCCCC;
    }

    .LEFT{
    top: 300px;
    left: 20px;
    }

    .TITLE{
    position:absolute;
    top: 275px;
    left: 300px;
    font-family:Arial, Helvetica;
    font-size: 16px;
    font-weight: bold;
    color: #006699;
    width: 350px;
    border-bottom: 1px solid #006699;
    }

    .CONTENT{
    position:absolute;
    top: 300px;
    left: 300px;
    font-family:Arial, Helvetica;
    font-size: 12px;
    color: #FFFFFF;
    width: 350px;
    }

    a.level1-no {
    font:bold 12px verdana, sans-serif;
    margin-left:0px;
    width:200px;
    text-decoration: none;
    color: #FFFFFF;
    }

    a.level1-act {
    font:bold 12px verdana, sans-serif;
    color:orange;
    margin-left:0px;
    width:200px;
    text-decoration: none;
    }

    a.level2-no {
    font:bold 12px verdana, sans-serif;
    margin-left:10px;
    color: #FFFFFF;
    }

    a.level2-act {
    font:bold 12px verdana, sans-serif;
    color:orange;
    margin-left:10px;
    text-decoration: none;
    }

    a:hover{ color: #FF6600; text-decoration: underline;}[/HTML][/TS]


  • 1
  • via via
    Sternenflotten-Admiral
    0 x
    193 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 16:15

    so, jetzt hab ich das ganze mal als Listenmenü erstellt. Genau so würde ich es gerne habe nur ohne die Listensymbole. Erste Ebene steht ganz links und 2. Ebene steht etwas eingerückt darunter.

    Nur weiß ich nicht, wie ich das hinbekomme. Ich habe dutzende von Foreneinträgen durchsucht, aber finde immer nur Beispiele für Listenmenüs.

    Irgend eine Idee?

    Viele Grüße,
    Oliver

    [TS]#config.admPanel = 1

    page = PAGE
    page.typeNum = 0
    page.stylesheet = fileadmin/templates/pt/templ/pt.css

    page.10 = TEMPLATE
    page.10 {
    template = FILE
    template.file = fileadmin/templates/pt/templ/pt.html

    workOnSubpart = DOCUMENT_BODY

    # Page Title displayed
    subparts.HEADER = TEXT
    subparts.HEADER {
    field = title
    }

    # Content
    subparts.CONTENT < styles.content.get
    subparts.CONTENT_RIGHT < styles.content.getRight

    # horizontales Menü
    subparts.MENU=HMENU
    subparts.MENU.special = directory
    subparts.MENU.special.value = 796
    subparts.entrylevel = 0
    subparts.MENU.1=TMENU
    subparts.MENU.1.NO.allWrap= &nbsp;|&nbsp;&#0187; |*| &nbsp;|&nbsp;&#0187; |*| &nbsp;|

    # vertikales Menü
    subparts.MENU_L = HMENU
    subparts.MENU_L {
    special = directory
    special.value = 797
    entryLevel = 1
    # erstes level
    1 = TMENU
    1.wrap = <ul class="menu-level1">|</ul>
    1{
    # no state: normale Formatierung
    NO{
    wrapItemAndSub = <li>|</li>
    }
    # act state: gültig von der rootseite bis zur aktuellen Seite
    ACT=1
    ACT{
    wrapItemAndSub = <li class="menu-level1-active">|</li>
    }
    # cur state: gültig für die aktuelle Seite
    CUR=1
    CUR{
    wrapItemAndSub = <li class="menu-level1-current-active">|</li>
    }
    # ifsub state: gültig für seiten die unterseiten haben
    IFSUB=1
    IFSUB{
    wrapItemAndSub = <li class="menu-level1-with-subpage">|</li>
    }
    }
    # zweites level
    2 = TMENU
    2.wrap = <ul class="menu-level2">|</ul>
    2{
    NO{
    wrapItemAndSub = <li>|</li>
    }
    ACT=1
    ACT{
    wrapItemAndSub = <li class="menu-level2-active">|</li>
    }
    CUR=1
    CUR{
    wrapItemAndSub = <li class="menu-level2-current-active">|</li>
    }
    IFSUB=1
    IFSUB{
    wrapItemAndSub = <li class="menu-level2-with-subpage">|</li>
    }
    }
    # drittes level
    3 = TMENU
    3.wrap = <ul class="menu-level3">|</ul>
    3{
    NO{
    wrapItemAndSub = <li>|</li>
    }
    ACT=1
    ACT{
    wrapItemAndSub = <li class="menu-level3-active">|</li>
    }
    CUR=1
    CUR{
    wrapItemAndSub = <li class="menu-level3-current-active">|</li>
    }
    IFSUB=1
    IFSUB{
    wrapItemAndSub = <li class="menu-level3-with-subpage">|</li>
    }
    }
    }

    # Protection Spam EMail

    config {
    spamProtectEmailAddresses = 2
    spamProtectEmailAddresses_atSubst = (at)
    }

    }[/TS]

  • cope cope
    Jedi-Ratsmitglied
    0 x
    582 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 16:59

    Hallo Oliver,

    die Listensymbole kannst Du doch mit CSS ändern?
    [HTML]list-style:none;[/HTML]

    Gruß
    Cope

  • via via
    Sternenflotten-Admiral
    0 x
    193 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 18:10

    Hallo Cope,

    kannst du mir noch sagen wie ich das einbinden muss? Ich taste mich gerade ran an css - meine ersten Gehversuche.

    Viele Grüße,
    Oliver

  • cope cope
    Jedi-Ratsmitglied
    0 x
    582 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 18:54

    Hallo Oliver,

    Du hast da ja Dein pt.css.
    Pack da doch mal

    [HTML]div.LEFT li{
    list-style:none;
    }[/HTML]

    dazu. Dann wird bei allen <li> Tags in den DIVs der Klasse LEFT das Listensymbol nicht angezeigt.

    LG
    Peter

  • via via
    Sternenflotten-Admiral
    0 x
    193 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 19:30

    Hallo Peter,
    super, das hat schon mal geklappt :-)
    jetzt steht die Navigation nur relativ weit weg vom linken Rand.
    Gibt es da auch noch eine Möglichkeit das zu beinflussen?

    Viele Grüße,
    Oliver

  • mgiesen mgiesen
    T3PO
    0 x
    16 Beiträge
    0 Hilfreiche Beiträge
    20. 05. 2007, 21:49

    li { margin:0; padding:0; }

    oder aber

    li { margin:0; padding:0; display:inline; }

    das spart nachher evtl. probleme im IE6

  • 1