Hilfe beim eigenen Menü in Typo3

rockbase · 26. Mai 2011

Hallo Leute,
ich habe vor ein paar Tagen mit Typo3 angefangen und haben jetzt folgendes Problem:
Ich habe ein Template für Typo gemacht und versucht ein passendes Menü über ein TypoScript zu erstellen. Das alles Funktioniert soweit, nur wenn ich den Bezug zur css herstelle wird das Menü nicht mehr angezeigt. Ich vermutte das es ein Fehler in der CSS ist, den wenn ich das position:absolute und Display:none rausnehme, bekomme ich das Menü angezeigt aber halt nicht als Dropdown. Ich poste mal alle drei Sachen. Hoffe mir kann jemand helfen.

Der HTML Teil

HTML:

<head>
<title>Seitentitel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!-- ###DOCUMENT_BODY### START-->
<div id="Page">
  <div id="RootlineLayer">
  <div id="ObenMenu">
        ###OBEN_MENU###
  </div></div>
  <div id="LogoLayer">###LOGO###</div>
  <div id="TopLayer">###ROOTLINE###</div>
  <div id="Middle">
  <div id="Mainmenu">
      ###MAIN_MENU###
      </div>
      <div id="Content">
      <!-- ###CONTENT### START-->

      <!-- ###CONTENT### END-->
      </div>
  </div>
  <div id="FooterLayer"></div>
</div>
<!-- ###DOCUMENT_BODY### END-->
</body>

Der CSS Teil

Code:

body {
    color: black; 
    background:#CCCCCC url(images/Asphalt.jpg); background-repeat:repeat;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: auto;
    text-align: center;  
  }

  div#Middle {
    text-align: left;    
    margin: 0 auto;     
    min-height: 500px;
    
  }

  div#Page {
    text-align: left; 
    margin: 0 auto;      
    width: 1000px;
    background-color: rgb(200, 200, 200);
  }

  html>body div#Page {
	border-color: gray; 
  }
  
   div#Mainmenu {
    font-size: 9pt;
    float: left; 
    width: 200px;
    min-height: 500px;
    margin: 0; padding: 0;
    background-color: rgb(102, 165, 82);
  }
    div#Obenmenu {
    font-size: 9pt;
    float: right; 
    width: 200px;
    min-height: 20px;
    margin: 0; padding: 0;
    background-color: rgb(190,190,190);
  }
 /
ul#Mainmenu,
ul#Mainmenu ul {
	margin: 0;
	padding: 0;
	width: 200px; /* Width of Menu Items */
	border-bottom: 1px solid #ccc;
	color: white;
	font-size: 100%;
	}
 
ul#Mainmenu li {
	position: relative;
	list-style: none;
	}
 
ul#Mainmenu li a {
	display: block;
	text-decoration: none;
	color: white;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	}
	
 
/* Fix IE. Hide from IE Mac \*/
* html ul#Mainmenu li { float: left; height: 1%; }
* html ul#Mainmenu li a { height: 1%; }
/* End */

ul#Mainmenu ul {
	position: absolute;
	display: none;
	left: 199px; /* Set 1px less than menu width */
	background-color: rgb(102, 165, 82);
	top: 0;
	}

ul#Mainmenu li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
 
ul#Mainmenu li:hover ul ul,
ul#Mainmenu li:hover ul ul ul,
ul#Mainmenu li.over ul ul,
ul#Mainmenu li.over ul ul ul { display: none;} /* Hide sub-menus initially */
 
ul#Mainmenu li:hover ul,
ul#Mainmenu li li:hover ul,
ul#Mainmenu li li li:hover ul,
ul#Mainmenu li.over ul,
ul#Mainmenu li li.over ul,
ul#Mainmenu li li li.over ul { display: block; } /* The magic */
 
ul#Mainmenu li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }
 
ul#Mainmenu li.menuparent:hover,
ul#Mainmenu li.over { 
	background-color: #f9f9f9; 
}
 
 
ul#Mainmenu li a:hover { 
	color: #E2144A; 
	background-color: #f9f9f9; 	
}
 */

  div#Content {
    margin-left: 200px;
    padding: 0 1em;
    border: 1px dashed silver;
  }
  div#Content h1 {
    font-size: 1.5em;
    margin: 0 0 1em;
  }
  div#Content h2 {
    font-size: 1.2em;
    margin: 0 0 1em;
  }
  div#Content p {
    font-size:1em;
    margin: 1em 0;
  }

  div#TopLayer {
    width: 100%;
    background-color: rgb(102, 165, 82);
    height: 20px;
  }

  div#LogoLayer {
    width: 100%;
    background-color: rgb(255,255,255);
    height: 220px;
  }

  div#RootlineLayer {
    width: 100%;
    background-color: rgb(102, 165, 82);
    height: 20px;
  }

und das Typo script

Code:

# Das Textmenü oben erstellen
OBEN_MENU = HMENU
OBEN_MENU {  
  special = directory
  special.value = 42
  1 = TMENU
  1.NO = 1
  1.NO.linkWrap = &nbsp;|&nbsp;|
}

# Das Mainmenü oben erstellen
MAIN_MENU = HMENU
MAIN_MENU.special = directory
MAIN_MENU.special.value = 40
MAIN_MENU {  
  1 = TMENU
  1 {
    expAll = 1
          wrap = <ul id="Mainmenu">|</ul>
          noBlur = 1  
          NO = 1
          NO.wrapItemAndSub = <ul>|</ul>
  }
   2 < .1  
   2.wrap = <ul>|</ul>
   3 < .2  
   3.wrap = <ul>|</ul>    
   }

Hilfe beim eigenen Menü in Typo3

rockbase

Grünschnabel

Neue Beiträge