Zum Inhalt springen

Can't get the Menu running with CSS

Erstellt am 8. September 2015 · 2 Antworten · letzte Antwort am 14. September 2015

Tags: TYPO3 6.x, Frage, English

Amirnitex ·

Typo3 Version 7.3.1

Hello Community Members,

i started a month ago with Typo3 and stopped cause i cant get any further.
i cant get the Menu running with CSS.
it appears always on top of the site.
I defined in the CSS that the menu should appear between the div "header" and the div "contendFrame".
How can i get the Menu into the div container "obj.menu"?

Thanks in advance for your answer.

Amirnitex

Contend:

TS

Haupttemplate = TEMPLATE
Haupttemplate {
  template = FILE
  template.file = fileadmin/Template/hauptausehen.html
  marks.TITLE < styles.content.getLeft
  marks.INHALT < styles.content.get
  marks.BILDR < styles.content.getRight
}

page.includeCSS {
  file = fileadmin/Template/Stylesheet/visual.css
}

### Menü ###
obj.menu = COA
obj.menu {
  wrap = <ul>|</ul>
  10 = HMENU
  10 {
    special = list
    special.value = 1
    1 = TMENU
    1 {
      NO.wrapItemAndSub = <li>|</li>
      CUR = 1
      CUR.wrapItemAndSub = <li class"current">|</li>
    }
  }
  
  20 = HMENU
  20.1 <.10.1
  20.1.expAll = 1
  20 {
    2 = TMENU
    2 {
      expAll = 1
      wrap = <ul class"level2">|</ul>
      NO.wrapItemAndSub = <li>|</li>
      ACT < .NO
      ACT = 1
    }
    
    3 = TMENU
    3 {
      wrap = <ul class"level3">|</ul>
      NO.wrapItemAndSub = <li>|</li>
      ACT < .NO
      ACT = 1
    }
  }
}

page = PAGE
page.5 < obj.menu
page.10 < Haupttemplate

CSS (only part of it)

#obj.menu {
	float: left;
	font-size: 14px;
	font-family: Arial, sans-serif;

html

<html>
	<head>
		<link href="stylesheet/visual.css rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="rahmen">
			<div id="header">
				<div class="title">
					###TITLE###
				</div>
			</div>
			<div id="menu">
				<div id="obj.menu">
				</div>
			</div>
			<div id="contentFrame">
				<div id="spacer2">
				</div>
				<div class="bildr">
					###BILDR###
				</div>
				<div id="inhalt">
				###INHALT###
				</div>
				<div id="spacer">
				</div>
			</div>
			<div id="footer">
				<a href="****************" style="color:white; background-color:transparent; text-decoration:none">©</a>
			</div>
		</div>
	</body>
	<style>
		a:link    {color:green; background-color:transparent; text-decoration:none}
		a:visited {color:green; background-color:transparent; text-decoration:none}
		a:hover   {color:orange; background-color:transparent; text-decoration:underline}
		a:active  {color:green; background-color:transparent; text-decoration:underline}
	</style>
</html>
ejoo ·

Hi Amirnitex,
you are suffering from a slight misconception: You are not positioning your Menu by naming a div-id alike. As you can see in your html, there are markers like "###INHALT###". These are replaced in the Typoscript by e.g. "marks.INHALT < styles.content.get".
Now you can do the same. First remove "page.5 < obj.menu". This ALWAYS inserts the menu before the rest of your setup! Then add under "marks.BILDR ..." a new entry "marks.MYMENU < obj.menu"; this way you tell Typo3 to replace a marker like "###MYMENU###" with your Menu. Now place this Marker in the HTML-Template inside the div: "<div id="obj.menu">###MYMENU###</div>". This is it. You can build your own Markers, like you want.

Feedback pls,
Dirk