GMenu Bessere Darstellung

Hallo Zusammen,

Ich versuche gerade mein horizontales GMenu so darzustellen, dass die Texte schön untereinander stehen.
Ich versuchte bereits das ganze in eine Tabelle zu füllen, aber leider ohne Erfolg.

Hat jemand eine Lösung für dieses Problem zur Hand?

Bild meiner Navigation siehe Anhang.

GMenu TypoScrypt:

mainNavigation = COA
mainNavigation {
  10 = HMENU
  10 {
    
    1=GMENU
    1 {
      expAll = 1
      noBlur = 1
      
      NO = 1    
      NO {
        backColor = #666666
        transparentBackground = 1
        ATagTitle.field = title
        XY=[10.w]+20,24
       
        #XY=160,24
        5 = IMAGE
        5.file = fileadmin/template/images/Navigation/transparent.gif
        
        10=TEXT
        10 {
         
          text.field=title
          offset=1,20
          fontColor=#FFFFFF
          fontFile=fileadmin/template/ARIALBD.ttf
          fontSize=18  
          shadow {
            color = #666666
            offset = 1,2
            intensity = 10
            opacity = 10
          }
        }
      }
      #ACT <.NO
      #ACT.10.fontColor = #BF2236
      
      RO <.NO
      RO.10.fontColor = #FEDA00
      
      ACTRO <.RO
    }
  }
}
#Hauptnavigation generieren
mainNavigationReihe = COA
mainNavigationReihe {
  
  #Menü einbinden
  10 < mainNavigation
}

Hallo,

kannst du mir mal erklären, wieso das nicht in CSS machst?

LG Jan

Hallo,

Nun, zu letzt habe ich dies auch mit CSS realisiert.

Hier meine Lösung

mainNavigation = COA
mainNavigation {
  10 = HMENU
  10 {
    wrap = <ul>|</ul>
    
    1=GMENU
    1 {
      expAll = 1
      noBlur = 1
      IFSUB = 0
      NO = 1
      NO.wrap = |*|<div class="ersteNavi">|</div>||<div class="zweiteNavi">|</div>||<div class="dritteNavi">|</div>||<div class="vierteNavi">|</div>||<div class="fuenftesNavi">|</div>||<div class="sechstesNavi">|</div>|*||*|
      NO {
        backColor = #666666
        transparentBackground = 1
        ATagTitle.field = title
        XY=[10.w]+20,24
        5 = IMAGE
        5.file = fileadmin/template/images/Navigation/transparent.gif
        
        10=TEXT
        10 {
          text.field=title
          offset=1,20
          fontColor=#FFFFFF
          fontFile=fileadmin/template/fonts/ARIALBD.ttf
          fontSize=18  
          shadow {
            color = #666666
            offset = 1,2
            intensity = 10
            opacity = 10
          }
        }
      }
      ACT <.NO
      ACT.10.fontColor = #FEDA00
      
      RO <.NO
      RO.10.fontColor = #FEDA00
      
      ACTRO <.RO
    }
  }
}
#Hauptnavigation generieren
mainNavigationReihe = COA
mainNavigationReihe {
  #Menü einbinden
  10 < mainNavigation
}

CSS:

div.ersteNavi{
width:120px;
height:24px;
float: left;
padding:0;
}
div.zweiteNavi{
width:220px;
height:24px;
float: left;
padding:0;
}
div.dritteNavi{
width:200px;
height:24px;
float: left;
padding:0;
}
div.vierteNavi{
width:100px;
height:24px;
float: left;
padding:0;
}
div.fuenftesNavi{
width:130px;
height:24px;
float: left;
padding:0;
}
div.sechstesNavi{
width:190px;
height:24px;
float: left;
padding:0;

Hat jemand eine bessere Lösung, wäre ich doch sehr froh, wenn diese gepostet würde