Zum Inhalt springen

Wie kann ein Menü rechts positioniert werden?

Erstellt am 2. September 2005 · 1 Antwort · letzte Antwort am 2. September 2005

Tags: HTML & CSS, Frage

Taggert ·

Hallo,
ich habe ein Problem und komme nicht weiter. Meine Seite ist dreispaltig aufgebaut. Links soll die "In-Site" Naviagation stehen, in der Mitte die eigentliche Seite und rechts sollen Links zu befreundeten Sites unter gebracht werden. Das Menü auf der linken Seite klappt hervorragend, aber das auf der rechten Seite ist eher horizontal als vertikal. Die Links stehen nebeneinander und nicht unter einander.

Hier mein Template:

page = PAGE
page.typeNum = 0

#Allgemeine Seiteneigenschaften setzen
page{
         bodyTag = <body bgcolor="#ffffff" topmargin="0" leftmargin="0">
         meta.AUTHOR = XXXX
         meta.DESCRIBTION = Dies ist Dans-Kingdom, der eine Platz im Netz, der schön ist
         stylesheet= fileadmin/main.css

         #Desingvorlage integrieren
         10 = TEMPLATE
         10{
              template = FILE
              template.file = fileadmin/main.htm
              workOnSubpart = DOKUMENT

              #DATUM setzen
              marks.DATUM = TEXT
              marks.DATUM.data = date : d.m.Y
             
                    marks{
                         LOGOBILD = IMAGE
                         LOGOBILD.file = fileadmin/bilder/Bibliothek.jpg
                         
                         MENU = HMENU
                         MENU{
                                  special = directory
                                  special.value = 28
                                  1 = GMENU
                                  1.NO = 1
                                  1.NO{
                                          XY = 178, 24
                                         backColor = #CCCCCC
                                          
                                          10 = TEXT
                                          10.text.field = title
                                          10.fontColor = #000000
                                          10.fontFile = fileadmin/fonts/verdana.ttf
                                          10.fontSize = 12
                                          10.niceText = 1
                                          10.offset = 0, 15
                                  }
                         }


                       LINKS = HMENU
                       LINKS{
                                special = directory
                                special.value = 39
                                1 = GMENU
                                1.NO = 1
                                1.NO{
                                      XY = 178, 24
                                      backColor = #CCCCCC
                                          10 = TEXT
                                          10.text.field = title
                                          
                                          10.fontColor = #000000
                                          10.fontFile = fileadmin/fonts/verdana.ttf
                                          10.fontSize = 12
                                          10.niceText = 1
                                          10.offset =  0,16
                                       }
                               }
                       }
                  }
       
}

Und hier noch die Adresse um sich die Seite mal anzusehen:
www.typo.dans-kingdom.de

Vielen Dank für Eure Hilfe
Gruß Taggert

laptop24 ·

Na das ist doch logisch...

Du benutzt eine Tabelle für die Platzierung der Elemente. Die Zelle in der der Inhalt steht ist sehr schmal, weil dort NUR das Wort "###INHALT###" drin ist. In der Zelle, die das linke Menü beinhaltet steht sehr viel Inhalt drin; nämlich jede Menge Bilder.

Es ist also klar, daß der "viele Inhalt" Platz vom "wenigen Inhalt" bekommt. Und so rutscht alle nach links, bzw. das Menü steht nebeneinander.

Lösen kannst Du das auf mehrere Arten.

Entweder Du fügst nach jedem Menüpunkt noch ein <br /> ein.
Oder Du formatierst die A-Elemente (Links) per CSS als Blockelemente. Dann brechen sie automatisch um.
Oder Du formatierst die Tabellenzelle mit dem linken Menü mit einer festen Breite. Dann brechen die einzelnen Bilder jeweils um, weil der Platz für nebeneinander nicht ausreicht.

Die erste Methode erfordert ein verändertes TypoScript. Das sieht dann so aus:

LINKS = HMENU
LINKS {
   special = directory
   special.value = 39

   1 = GMENU
   1.NO = 1
   1.NO {
      wrap = |<br />

      XY = 178, 24
      backColor = #CCCCCC
      10 = TEXT
      10.text.field = title
                                          
      10.fontColor = #000000
      10.fontFile = fileadmin/fonts/verdana.ttf
      10.fontSize = 12
      10.niceText = 1
      10.offset =  0,16
   }
}

Die zweite Methode erfordert modifizertes CSS und modifiziertes TypoScript:

LINKS = HMENU
LINKS {
   special = directory
   special.value = 39

   1 = GMENU
   1.NO = 1
   1.NO {
      ATagParams = class="linkerLink"

      XY = 178, 24
      backColor = #CCCCCC
      10 = TEXT
      10.text.field = title
                                          
      10.fontColor = #000000
      10.fontFile = fileadmin/fonts/verdana.ttf
      10.fontSize = 12
      10.niceText = 1
      10.offset =  0,16
   }
}

"linkerLink" muss dann natürlich per CSS formatiert werden.

A.linkerLink { display: block; }

Die dritte Methode erfordert modifiziertes HTML oder CSS. Da muss der Tabellenzelle entweder per HTML oder per CSS eine Breite zugewiesen werden.

MfG, Lars Thalheim

PS: Links heißt im diesem Fall rechts. Ich will nur den Text nicht nochmal durchmangeln.