TYPO3-Testaccount
Testen Sie die aktuellste TYPO3-Version kostenlos und unverbindlich für einen Monat!

Jetzt testen!

Schulungen

jetzt buchen
Forum » TYPO3 CMS: TypoScript » Menüs

HMENU-TMENU mit CSS horizontal setzen


Autor Nachricht
Verfasst am: 28. 06. 2012 [16:53]
angsch-li
Themenersteller
Dabei seit: 21.04.2006
Beiträge: 39
 Hallo Leute

Ich bin wiedermal am basteln und finde und finde den Fehler einfach nicht.

Ich möchte für eine Webseite ein Menü mit 4 Punkten als Vierecke quasi in einem Block anrichten, d.h. 2 oben, 2 unten.

Leider kriege ich das Menü nicht einmal in die Horizontale.

Sie Menüpunkte werden nur untereinander dargestellt, trotz float etc.

und das ganze ist auch völlig verschoben und nicht im daher vorgesehenen Container, wo der Marker drin ist.

Was ist falsch an meinem Code, kann mir jemand helfen?

Und ist es überhaupt möglich, 2 nebeneinander, dann einen Umbruch und nochmals 2 nebeneinander zu setzen? Ein Beispiel wie ich mir das Layout vorstelle im Anhang.


Danke für eure Hilfe.

Liebe Grüsse
angsch-li


Hier der Link zur Seite und meine Codes:

www.individualdesign.ch/3trip/

TYPOSCRIPT
# Das Menu erstellen
 
MENU = HMENU
MENU {
  special = directory
  special.value = 3
  #wrap = <div id="menu">|</div>
  where = colPos = 0
  1 = TMENU
  1 {
    noBlur = 1
       wrap = <ul class="menu">|</ul>
    expAll = 1
      #NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
    NO = 1
  NO.linkWrap =  | | |*|  | | |*|  
 
 
      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
 
  }
 
 
}
 
 
 
########### Das MENU2 erstellen ###########
 
MENU2 = HMENU
MENU2 {
  special = directory
  special.value = 16
 #entrylevel = 1
 
  wrap = <div id="menu2">|</div>
 
  1 = TMENU
  1 {
    noBlur = 1
    wrap = <ul class="menu2">|</ul>
    expAll = 1
    NO.wrapItemAndSub = <li class="menu2">|</li>
    NO = 1
    #NO.allWrap = <li>|</li>
  NO.linkWrap = |
 
      ACT < .NO
      ACT = 1
      ACT.ATagParams = class="active"
 
  }


CSS
a:link   { font-size: 12px; color: #FFAB4D; font-family: Arial, Helvetica, sans-serif;  font-weight: bold; text-decoration: none; }
a:visited   { font-size: 12px; color: #3AD42D;  font-family: Arial, Helvetica, sans-serif;font-weight: bold; text-decoration: none}
a:hover     { font-size: 12px; color: #FF3EB0; font-family: Arial, Helvetica, sans-serif;font-weight: bold; text-decoration: none}
a:active  { font-size: 12px; color: #FF3EB0; font-family: Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none}
 
body  { behavior:url("fileadmin/template/csshover.htc&quot<img src="typo3conf/ext/mm_forum//res/smilies/icon_wink.gif" alt="icon_wink.gif" />;color: #555555; font-family: Arial, Helvetica, sans-serif; text-decoration: none  }
input{ font-size: 12px; font-family: Arial, Helvetica, sans-serif; vertical-align:top; }
p, td {color: #555555;font-size: 12px; font-family:Arial, Helvetica, sans-serif; }
p {color: #555555; font-size: 12px; font-family:Arial, Helvetica, sans-serif; }
 
 
h1 {color: #FF3EB0; font-size: 17px; font-family: Arial, Helvetica, sans-serif; font-weight: bold;}
 
h2 {color: #3AD42D; font-size: 12px; font-family: Arial, Helvetica, sans-serif;font-weight: bold;}
 
h3 { color: #FFAB4D; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; }
 
h5 { color: #5C3516; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight:bold;background-color:#0C2C80; }
 
h6 {color: #ffffff; font-size: 13px; font-family: Arial, Helvetica, sans-serif; }
 
 
li { display: inline;list-style-type: none; }
 
 
/* CSS-MENU */
 
ul.menu2 li a:link   {text-align: center;  background-image: url(http://www.individualdesign.ch/3trip/fileadmin/templates/pix/button-no.png);font-size: 17px; color: #FF3EB0; font-family: Arial, Helvetica, sans-serif;  text-decoration: none;}
ul.menu2 li a:visited   {text-align: center;  background-image: url(http://www.individualdesign.ch/3trip/fileadmin/templates/pix/button-no.png);font-size: 17px; color: #FF3EB0; font-family: Arial, Helvetica, sans-serif;  text-decoration: none;}
ul.menu2 li a:hover   {text-align: center;  background-image: url(http://www.individualdesign.ch/3trip/fileadmin/templates/pix/button-a-green.png);font-size: 17px; color: #ffffff; font-family: Arial, Helvetica, sans-serif;  text-decoration: none;}
ul.menu2 li a:active   {text-align: center;  background-image: url(http://www.individualdesign.ch/3trip/fileadmin/templates/pix/button-a-orange.png);font-size: 17px; color: #ffffff; font-family: Arial, Helvetica, sans-serif;  text-decoration: none;}
 
 
 
 
ul.menu2, ul.menu2 ul {display: inline;list-style-type: none;}
 
 
/* 1. Stufe Textplatzierung  */
 
 
ul.menu2 a {
    display: block;
 
margin: 0px 0px 0px 0px;
 
 padding: 80px 0px 40px 0px;
 
    font-weight:normal;
 
}
 
 
 
/* 1. Stufe */
 
ul.menu2 li {
 
 
    margin:0px;
 
    padding: 0px;
 
    background-color: none;
 
    float:left;
 
    border:0 px solid #fff;
 
    width: 225px;
      height: 143px;
 
display: inline;
  list-style-type: none;
 
}
 
/* IE-Hack für die Breite */
 
*html ul.menu2 li {
    width:225px;
    height:143px;
 
}
 
 
 
 
 
/* IE-Hack für die Breite */
 
*html ul.menu2 ul {
 
    width:225px;
    height:143px;
 
}
 
 
 
/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
 
/* über der Liste  befindet (.hover siehe JavaScript oben) */
 
ul.menu2 ul.hover, ul.menu2 li.hover ul, ul.menu2 li:hover ul  {
 
    display:block;
 
}


HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#back {
  position:absolute;
  width:100%;
  height:100%;
  z-index:1;
  left: 0px;
  top: -1px;
}
#titel {
  position:absolute;
  width:100%;
  height:100%;
  z-index:2;
  background-image: url(fileadmin/templates/pix/Titel.png);
  background-repeat: no-repeat;
  background-position:center top;
  top: 0px;
  left: 0;
}
#Balken {
  position:absolute;
  width:100%;
  height:100%;
  z-index:3;
  left: 0;
  top: 374px;
  background-image: url(fileadmin/templates/pix/balken.png);
  background-repeat:repeat-y;
  background-position:center;
}
#menu {
  position:absolute;
  width:436px;
  height:269px;
  z-index:4;
  left: 609px;
  top: 8px;
}
#text {
  position:absolute;
  width:100%;
  height:100%;
  z-index:8;
  left: 0;
  top: 293px;
  text-align: right;
}
-->
</style>
</head>
 
<body>
<div id="root">
  <div id="back">
 
  <div id="titel">
 
      <div id="Balken"></div>
 
<div id="menu">###MENU2###</div>
 
      <div id="text">
        <table width="675" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="25" height="30" align="right" valign="top"> </td>
            <td width="650" align="right" valign="top">###MENU###</td>
          </tr>
          <tr>
            <td width="25" height="40"> </td>
            <td width="650"> </td>
          </tr>
          <tr>
            <td width="25" valign="top"> </td>
            <td width="650" valign="top">###INHALT### </td>
          </tr>
          <tr>
            <td width="25" height="50"> </td>
            <td width="650"> </td>
          </tr>
          <tr>
            <td width="25" height="40" align="center" valign="top"> </td>
            <td width="650" align="center" valign="top">###UMENU###</td>
          </tr>
        </table>
</div>
          </div>
  </div>
          </div>
</div>
        </div>
 
</body>
</html>
Profil
Verfasst am: 28. 06. 2012 [22:57]
Chrissli
Dabei seit: 19.04.2010
Beiträge: 503
 Hallo angsch-li,

dein Hauptproblem ist das CSS.
Versuch' doch mal dein UL nicht als inline zu deklarieren sondern als block,
gib ihm eine feste breite und setze overflow hidden.
Evtl. musst du auch das padding entfernen.

Es sollten dann so viele Links in einer reihe stehen, wie in die Breite deines UL reinpassen
und anschließend wird eine neue Zeile begonnen:

CSS
/* etwa zeile 36 */
ul.menu2, ul.menu 2 UL {
	display: block
	width: 500px;
	overflow: hidden;
}



God's in his Heaven -
All's right with the world!
ProfilICQ
Verfasst am: 29. 06. 2012 [09:09]
angsch-li
Themenersteller
Dabei seit: 21.04.2006
Beiträge: 39
 Hallo Chrissli

Wow, super, vielen Dank! Es hat nun geklappt.

Und das verschieben habe ich nun auch noch gelöst in dem ich eine Tabelle gesetzt habe im Template.

Um nun noch etwas zu verschönern noch die Frage:

Gibt es eine Möglichkeit dieses Menü farblich zu wechseln? Also 1. Punkt pink, 2. Punkt grün, 3. Punkt orange, etc.?

Eine Idee, wie ich das lösen könnte?
Profil