[darkdesire]

Hallo allerseits,

Ich werde demnächst verrückt
Habe ein Menu von CSSPlay ausprobiert und an mein Layout angepasst und es funktioniert hervorragend (ohne Typoscript). Die Besonderheit: man braucht kein JavaScript mehr da alles mit css funktioniert. Doch wie es so ist muss für den IE speziell noch conditions gesetzt werden damit er weiss wie er sich zu verhalten hat.
Aber ich weiß absolut nicht, wie ich im Typoscript setup des Menu den Punkt klarmache, daß es für IE eine besondere Regel gibt...

Hier mal das css

/* common styling */
.menu1{
	font-family: arial, sans-serif;
	width:150px;
	height:250px;
	position:relative;
	font-size:11px;
	margin:30px 0;
	background:#fff;
	padding:5px 5px;
	border:1px dashed #ccc;
	top: 0;
	left: 20;
}
.menu1 ul {
padding:0; margin:0; list-style-type: none;
}
/* hier wird die position von links des submenus definiert */
.menu1 ul li ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:-1px; left:145px;
}
.menu1 ul li {
float:left; position:relative;
}
/* hier wird definiert wieviele pixel von links das background image des submenus beginnt nur fuer firefox bei width*/
.menu1 ul li a, .menu1 ul li a:visited {
display:block; float:left; text-decoration:none; color:#000; width:110px; height:30px; line-height:29px; font-size:11px; background:transparent; padding-left:35px;
}
/* hier wird definiert wieviele pixel von links das background image des submenus beginnt nur fuer ie bei width*/
* html .menu1 ul li a, .menu1 ul li a:visited {width:110px; w\idth:110px;}

.menu1 ul li.home {background:url(home2.gif);}
.menu1 ul li.leistungen {background:url(leistungen2.gif);}
.menu1 ul li.unternehmen {background:url(unternehmen2.gif);}
.menu1 ul li.contact {background:url(kontakt2.gif);}
.menu1 ul li.anspruch {background:url(anspruch2.gif);}
.menu1 ul li.news {background:url(news2.gif);}
.menu1 ul li.projekt {background:url(projektablauf2.gif);}
.menu1 ul li.betreuung {background:url(betreuung2-2.gif);}
.menu1 ul li.specials {background:url(specials2.gif);}

.menu1 ul li ul li.subprod1 {background:url(subprod1.gif) no-repeat;}
.menu1 ul li ul li.subprod2 {background:url(subprod2.gif) no-repeat;}
.menu1 ul li ul li.subprod3 {background:url(subprod3.gif) no-repeat;}
.menu1 ul li ul li.subnews1 {background:url(subnews1.gif) no-repeat;}
.menu1 ul li ul li.subnews2 {background:url(subnews2.gif) no-repeat;}
.menu1 ul li ul li.subnews3 {background:url(subnews3.gif) no-repeat;}
.menu1 ul li ul li.subserv1 {background:url(subserv1.gif) no-repeat;}
.menu1 ul li ul li.subserv2 {background:url(subserv2.gif) no-repeat;}
.menu1 ul li ul li.subserv3 {background:url(subserv3.gif) no-repeat;}
.menu1 ul li ul li.subserv4 {background:url(subserv4.gif) no-repeat;}
.menu1 ul li ul li.subserv5 {background:url(subserv5.gif) no-repeat;}

.menu1 table {
border-collapse:collapse; border:0; margin:-1px; padding:0; font-size:1em;
}

.menu1 ul li:hover a,
.menu1 ul li a:hover{
text-decoration:underline; border:0;
}
.menu1 ul li:hover ul,
.menu1 ul li a:hover ul {
visibility:visible; position:absolute; width:180px; height:auto; border:1px solid #606; z-index:10; background:#f8f8f8; overflow:visible;
}
.menu1 ul li:hover ul li a,
.menu1 ul li a:hover ul li a{
display:block; background:transparent; color:#000; width:150px; line-height:15px; padding:5px 0 5px 35px; height:auto; text-decoration:none;
}
* html .menu1 ul li a:hover ul li a {width:180px; w\idth:180px;}

.menu1 ul li:hover ul li a:hover,
.menu1 ul li a:hover ul li a:hover {
text-decoration:underline; border:0;
}
.menu1 ul li:hover ul li ul,
.menu1 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; height:0; overflow:hidden; top:0; left:151px;
}
.menu1 ul li:hover ul li:hover ul,
.menu1 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; width:150px; height:auto; color:#000; padding:0; border:1px solid #888; list-style-type:none; background:#eee;
}
.menu1 ul li:hover ul li:hover ul li a,
.menu1 ul li a:hover ul li a:hover ul li a {
display:block; width:115px; background:transparent; color:#000;
}
* html .menu1 ul li a:hover ul li a:hover ul li a {width:150px; w\idth:150px;}

.menu1 ul li:hover ul li:hover ul li a:hover,
.menu1 ul li a:hover ul li a:hover ul li a:hover {
background:#ddd; text-decoration:underline;
}

und hier der html code so wie es normal funktioniert:

 <!-- beginn css menu --> <div class="menu1"> <ul> <li class="home"><a href="index.php">Home</a></li> <li class="leistungen"><a href="leistungen.php">Leistungen
<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td> <ul> <li class="subprod1"><a href="leistungen.php">Leistungen</a></li> <li class="subprod1"><a href="inhalte.php">Inhalte</a></li> <li class="subprod2"><a href="gestaltung.php">Gestaltung</a></li> <li class="subprod2"><a href="programmierung.php">Programmierung</a></li> <li class="subprod2"><a href="#suchmaschinenoptimierung.php">Suchmaschinenoptimierung</a></li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> <li class="anspruch"><a href="anspruch.php">Anspruch</a></li> <li class="unternehmen"><a href="unternehmen.php">Unternehmen</a></li> <!--begin special block 2--> <li class="betreuung"><a href="betreuung.php">Betreuung
<!--[if IE 7]><!--></a><!--<![endif]--> <table><tr><td> <ul> <li class="subprod1"><a href="optimierung.php">Optimierung</a></li> <li class="subprod1"><a href="auswertung.php">Statistik Auswertung</a></li> </ul> </td></tr></table> <!--[if lte IE 6]></a><![endif]--> <!-- ende special Block 2-->

kann mir da jemand helfen?

vielen Dank für jede Hilfe

[parchegroup]

Hi,

ohne genau auf Dein Problem einzugehen würde ich zu dem Thema mal hier schauen, vieleicht hift das schon weiter.

http://www.typo-3.de/tsref/conditions/

[Armin]

Tolles Menue, habe dies genommen http://www.cssplay.co.uk/menus/final_drop2.html und mal ein TS dazu geschrieben.

Armin

[dotbizz]

Hallo Armin,

könntest Du das TS mal posten ?

Dank vorab

[Armin]

moin,

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48:

temp.css_menu = HMENU temp.css_menu { special = directory special.value = 8 wrap = <div class="menu"> | </div> # Hauptmenue 1 = TMENU 1 { wrap = <ul> | </ul> expAll = 1 NO.ATagTitle.field = subtitle//title NO.wrapItemAndSub = <li> | </li> IFSUB = 1 IFSUB { wrapItemAndSub = <li> | </li> allWrap = | <!--<![endif]--> linkWrap = |<!--[if IE 7]><!--> ATagBeforeWrap = 1 } } 2 = TMENU 2 { wrap = <table><tr><td><ul> | </ul></td></tr></table><!--[if lte IE 6]></a><![endif]--> expAll = 1 NO.ATagTitle.field = subtitle//title NO.wrapItemAndSub = <li> | </li> IFSUB = 1 IFSUB { wrapItemAndSub = <li> | </li> allWrap = | <!--<![endif]--> linkWrap = |<!--[if IE 7]><!--> ATagBeforeWrap = 1 ATagParams = class=drop } } 3 < .2 4 < .2 } seite.10.marks.FUSS.66 < temp.css_menu

Armin

[dotbizz]

Vielen Dank !!!

Läßt Du den </ul> mit absicht laufen?

2 {
    wrap = <table><tr><td><ul> | </ul></

der ist ja im original-schript so nicht vorgesehen und macht bei mir in mozillas richtig ärger.

Gruß

[Armin]

moin,

der ist ja im original-schript so nicht vorgesehen und macht bei mir in mozillas richtig ärger.

Also im Menue http://www.cssplay.co.uk/menus/final_drop2.html ist das so vorgesehen. Da Menue läuft so im Opera, IE, FF und Moz. Netscape macht Probleme.

Zum testen habe ich das Menue hier mal eingefügt....bitte ganz nach unten scrollen...http://www.cfs-info.de

Das Menue http://www.cssplay.co.uk/menus/final_drop.html läuft glaube ich unter allen Browsern...

Armin

[Armin]

Nachtrag:
Die beiden Menues haben das gleiche TS, nur das CSS ist unterschiedlich....

Armin

[Tiggr]

Ist echt ein nettes Menü, nur leider hat der IE mal wieder Probleme... - Sobald das Menü unten an einem DIV liegt zieht der IE dieses DIV automatisch so weit runter wie das Menü reicht. Daruch entstehen mal wieder unschöne Lücken... Firefox und Co packen das ohne Probleme...

Hat jemand eine Idee wie man dass fixen könnte?

LG

[Armin]

...ich seh nix....poste mal einen Screen

Armin