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
Code:
/* 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:
HTML-Code:
<!-- 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