[TYPO3-german] Die Menüzustände werden aus der CSS Datei nicht ausgelesen

Thu Dec 24 22:56:22 CET 2009

Hallo Liste,

ich hatte gestern ein Problem mit meinem footer. Das Problem hat sich  
dank euch lösen können. Ich definiere jedoch per CSS die  
Menüzustände, diese werden aber aus der CSS Datei nicht ausgelesen.  
Das a Tag und auch die hover Zustände funktionieren im oberen Menü,  
der aktive Zustand funktioniert jedoch nicht. Was mache ich falsch?

Im footer funktioniert weder das gesetzte a Tag noch hover. Was läuft  
dort falsch?

hier die Homepage:

http://www.muesliarchitektur.de/typo3/index.php?id=61

HTML CODE

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// 
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>
   <title>Deutsche TYPO3 Dokumentation</title>
   <link rel="stylesheet" type="text/css" href="greentech_test/ 
style.css" />
</head>
<body>
   <div id="container">

     <div id="head">
       <ul>
         <li id="menu_1">
           <div id="menu1-level1-no">
           </div>

           <div id="menu1-level1-act">
           </div>
         </li>
       </ul>
     </div>

     <div id="right_top">
     </div>

     <div id="top">
     </div>

     <div id="right_info">
       <h2> hier kommt eine info rein</h2>
     </div>

     <div id="center">
       <ul>
         <li id="content">
         </li>
       </ul>
     </div>

     <div id="right">
       <ul>
         <li id="menu_2">
         </li>
       </ul>
     </div>

     <div id="footer">
     </div>
   </div>
</body>
</html>

CSS CODE

* {
   margin: 0;
   padding: 0;
}

/**
* Schriftgröße kontrollieren
*/
body, td, th { font: normal 75%/167% Georgia, Palatino, "Times New  
Roman", serif; }

td, th { font-size: 100%; }

/* Farben und Hintergruende setzen */
/* Sobald dieser Wert gesetzt ist, funktioniert der horizontale graue  
Balken nicht */

html, body {
/*	color: #5B6162; */
/*	background-color: #5b6162; */
}

a:link, a:visited, a:hover {text-decoration:none;}

body{
	text-align:center;
	font: normal 12px Arial;
	width:auto;
	height:auto;
	color:white;
	background: #5b6162;
	background-position: 0 0px;
	background-image: url(images/bg_body.gif);
	background-repeat: repeat-x;
}

div#container{
	width:760px;
	height:100%;
	text-align:left;
	margin:0px auto;
	background:transparent;
}

div#head{
	color: red;
	height:130px;
	border-right: 1px solid #414748;
	width:599px;
	float:left;
	text-align:right;
	background-color#5b6162}

#head ul li {
   width: 599;
   float: right;
   list-style: none;
   margin: 0 0px 0 0;
}

#head ul a,
#head ul strong {
   width: 70px;
   border-left: 1px solid #414748;
   float: right;
   margin: 0 0 0 0;
   color: red;
   background-color:transparent;
   display: block;
   padding: 110px 8px 8px 8px ;
   text-align: center;
   text-transform: uppercase;
   text-decoration: none;
   font-weight: bold;
}

#head ul a:hover {
background-color: grey;
color:white;
}

#head ul a:active
#head ul a:strong {
   width: 70px;
   border-left: 1px solid #414748;
   float: right;
   margin: 0 0 0 0;
   background-color: white;
   display: block;
   padding: 110px 8px 8px 8px ;
   text-align: center;
   text-transform: uppercase;
   text-decoration: none;
   font-weight: bold;
   color: white;
   background: white;
}

div#top   {
	height:150px;
	width:600px;
	float:left;
	font: bold 10px   Verdana,Arial;
	background-color:red;
	text-align:left;
	color:white;
}

div#center{
	width:600px;
	height:300px;
	float:left;
	background-color:white;
}

#content {
	color: red;
	width:580px;
	height:280px;
	padding: 10px 10px 10px 10px;
	float:left;
	list-style: none;
	background-color:white;
}

div#right_top{
	float: right;
	text-align:left;
	width:160px;
	height:130px;
	background-color: transparent;
}

div#right_info{
	float: right;
	text-align:left;
	width:160px;
	height:150px;
	background-color:white;
}

div#right{
	float: right;
	text-align:left;
	width:160px;
	height:auto;
	background-color: transparent;
}

#right ul li {
   padding-top: 10px;
   padding-left: 10px;
   width: 160;
   float: left;
   list-style: none;

}

#right ul a {
   width: auto;
   margin: 0 0 0 0;
   color: #352545;
   text-transform: uppercase;
   text-decoration: none;
   font-weight: bold;
}

#right ul a:hover,
#right ul a:focus {
   color: white;
}

div#footer {
	width:600px;
	height: auto;
	float:left;
}

#footer ul li {
   width: 600;
   float: right;
   list-style: none;
   margin: 0 0px 0 0;
}

/* nachfolgendes keine Auswirkung

#footer ul a
#footer ul a strong {
	width: auto;
	display: block;
	color: white;
	text-decoration: none;
	padding: 10px 5px 5px 5px;
	text-align_ center;
}

TYPO SCRIPT

#DOCTYPE auf XHTML 1.0 Strict setzen, für den IE wird die XML-Angabe  
umgedreht
config.doctype = xhtml_strict

# Configuring the Auto-Parser:
plugin.tx_automaketemplate_pi1 {
  # Read the template file:
  content = FILE
  content.file = fileadmin/greentech_test/index.html
  # Here we define which elements in the HTML that
  # should be wrapped in subpart-comments:
  elements {
   BODY.all = 1
   BODY.all.subpartMarker = DOCUMENT_BODY
   HEAD.all = 1
   HEAD.all.subpartMarker = DOCUMENT_HEADER
   HEAD.rmTagSections = title
   DIV.all = 1
   UL.all = 1
   LI.all = 1
  }
  # Prefix all relative paths with this value:
  relPathPrefix = fileadmin/
}

# Menu 1 cObject
temp.head = HMENU
# First level menu-object, textual
temp.head.1 = TMENU
temp.head.1.expAll = 0
temp.head.1 {
  # Normal state properties
   wrap = <ul>|</ul>
   NO = 1
   NO.linkWrap = <li>|</li>
   ACT = 1
   ACT.linkWrap = <li>|</li>
}

# Menu 2 cObject
temp.menu_2 = HMENU
temp.menu_2.entryLevel = 1
# First level menu-object, textual
temp.menu_2.1 = TMENU
temp.menu_2.1.expAll = 1
temp.menu_2.1 {
  NO.allWrap = <div class="menu1-level1-no"> | </div>
  ACT = 1
  ACT.allWrap = <div class="menu1-level1-act"> | </div>
}

# Second level menu-object, textual
temp.menu_2.2 = TMENU
temp.menu_2.2.expAll = 1
temp.menu_2.2 {
  # Normal state properties
  NO.allWrap = <div class="menu1-level2-no"> | </div>
  # Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <div class="menu1-level2-act"> | </div>
}

temp.footer = HMENU
temp.footer.special = directory
temp.footer.special.value = 67
temp.footer {
   1 = TMENU
   1.expAll = 0
   1.wrap = <ul>|</ul>
   1.NO = 1
   1.NO.linkWrap = <li>|</li>
   1.ACT = 1
   1.ACT.linkWrap = <li>|</li>
}

# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
  # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
  # Select only the content between the <body>-tags
  workOnSubpart = DOCUMENT_BODY
  # Substitute the ###menu_1### subpart with dynamic menu:
  subparts.head < temp.head
  # Substitute the ###menu_2### subpart with dynamic menu:
  subparts.menu_2 < temp.menu_2
  # Substitute the ###content### subpart with some example content:
  subparts.content < styles.content.get
  subparts.footer < temp.footer
}

# Main TEMPLATE cObject for the HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
  # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
  # Select only the content between the <head>-tags
  workOnSubpart = DOCUMENT_HEADER
}

# Default PAGE object:
page = PAGE
page.typeNum = 0
# Copying the content from TEMPLATE for <body>-section:
page.10 < temp.mainTemplate
# Copying the content from TEMPLATE for <head>-section:
page.headerData.10  < temp.headTemplate

Ich danke euch im Voraus und wünsche noch frohe Weihnachten

Schöne Grüße
Kerem