Zum Inhalt springen

Menüpunkte auf gleicher Ebene unterschiedlich einrücken...

Erstellt am 16. Februar 2010 · 2 Antworten · letzte Antwort am 19. Februar 2010

Tags: HTML & CSS, Frage

Lodder ·

Hallo Foren-Gemeinde,
ich habe momentan den Auftrag, die Homepage meines Vaters auf Typo3 umzustellen, da das alte CMS keine weiteren Updates mehr erhalten wird. Ich bin schon ziemlich weit gekommen, allerdings gibt es da ein kleines Problem: Ich muss die Menüpunkte an eine Rundung anpassen (ihr könnt es euch anschauen wie es am Ende sein soll: http://reichmann-web.de/. Anbei auch noch ein Screenshot vom aktuellen Stand: Bild: reichmann-web.de/screenshot.jpg
Im alten CMS ist das Einrücken so gelöst, das jeder Menüpunkt eine eigene CSS Definition bekommt, der Erst margin 58px, der nächste mit 48px usw.
Ist das mit Typo3 auch realisierbar?
Freue mich auf euere Unterstützung.
Grüße
Lothar

Julian.​Hofmann ·

Hallo Lothar.

In Menüs werden die einzelnen Items automatisch mitgezählt. Hierzu hält TYPO3 das Register count_HMENU_MENUOBJ bereit. Du könntest also diese Nummerierung in CSS-Klassen mit einbauen und somit alle Punkte einzeln formatieren.

Viele Grüße
Julian

Lodder ·

Wie würde man dies dann konkret in Typoscript implementieren (habe noch nicht viel Erfahrung mit TS)?
Habe hier mal meine momentane Konfiguration:

page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/template/css/style.css
page.20 = TEMPLATE
page.20 {
  template = FILE
  template.file = fileadmin/template/template.htm
  
  workOnSubpart = document
  
  subparts.inhalt < styles.content.get
  
  subparts.navigation = HMENU
  subparts.navigation {
    1 = TMENU
    1 {
      #expAll =1
      wrap = <ul id="nav1">|</ul>
      noBlur = 1
      NO = 1
      NO {
        wrapItemAndSub = <li>|</li>
        stdWrap.htmlSpecialChars = 1
        ATagTitle.field = title
      }
      ACT <.NO
      ACT {
        wrapItemAndSub = <li id="nav1act">|</li>
      }
    }
    2 < .1
    2 {
      wrap = <ul id="nav2">|</ul>
      ACT.wrapItemAndSub = <li id="nav2act">|</li>
    }
    3 < .2
    3 {
      wrap = <ul id="nav3">|</ul>
      ACT.wrapItemAndSub = <li id="nav3act">|</li>
    }
  }

  subparts.headline = TEXT
  subparts.headline.value = {page:title}
  subparts.headline.insertData = 1
  subparts.headline.wrap = |
  
}

Hier noch meine Template-Datei:

<link rel='stylesheet' type='text/css' href='css/style.css'>


###document###
	<div id="page">
		<div id="header">
			<span style="font-size:25px"> Dr.</span> 
       			<span style="font-size:25px;">Leonhard</span><br />
   			<span style="font-size:38px">  Reichmann</span><br />
   			<span style="font-weight:bold; line-height:40px;">Privatpraxis f&uuml;r ganzheitliche Zahnheilkunde</span>

		</div>
		<div id="menu">
			###navigation###<div id="menu-text"></div>###navigation###
		</div>					
		<div id="headline">
			###headline###<div id="headline-text"></div>###headline###
		</div>		
		<div id="main">
			###inhalt###<div id="main-text"></div>###inhalt###
		</div>
		<div id="nav">
			###nav###<div id="nav-text"></div>###nav###
		</div>
	</div>
###document###

LG
Lothar