Druckbare Version
Hi,
habe folgendes Problem:
Ich habe ein Drop-Down-Menü im header positioniert.
Die Dropdown Menüpunkte werden über den header, in den main aufgeklappt.
Im Firefox und IE8 funktioniert das ohne Problem.
Im IE7 jedoch, verschwindet es, sobald der header endet.
Kann jemand helfen?
Viele Grüße,
Alex
Stichwort: z-index
z-index habe ich auch dran gedacht. Das Problem ist, das ich nicht weiß was ich noch ändern soll.
Habe dem ul einen hohen z-index gegeben und dem main und dem container einen sehr niedrigen.
setz mal:
#mainmenu .level_1 ul
{
z-index:2000 !important;
}
Funktioniert leider nicht. Hier mal das css der Navi.
HTML-Code:#mainmenu
{
padding-top:78px;
padding-left:22px;
no-repeat;
font-size:12px;
z-index: 20000;
}
#mainmenu .level_1 ul
{
z-index:2000 !important;
}
#mainmenu ul.level_1 li
{
float:left;
padding-top:3px;
padding-right:25px;
font-size:12px;
line-height:1;
list-style:none;
}
#mainmenu ul.level_1 li a
{
display:block;
padding:3px 9px;
font-family:Arial;
text-decoration:none;
font-size:12px;
color:#000;
}
#mainmenu ul.level_1 li a:hover,
#mainmenu .active span,
#mainmenu ul.level_1 li a.trail
{
display:block;
padding:3px 9px;
font-family:Arial;
text-decoration:none;
font-size:12px;
color:#B4E614;
}
#mainmenu ul.level_2
{
width:175px;
left:-999em;
position:absolute;
display:block;
margin:0;
padding:3px 3px 5px 3px;
}
#mainmenu ul.level_2 a
{
width:100px;
height:14px;
padding-right:3px;
padding-bottom:3px;
font-size:12px;
color:#000;
background-color: transparent;
}
#mainmenu ul.level_2 a:hover
{
width:140px;
height:14px;
font-size:12px;
color:#B4E614;
}
#mainmenu li:hover ul.level_2
{
left:auto;
}
#mainmenu li .active span
{
width:133px;
font-size:12px;
color:#B4E614;
background-color: transparent;
}
#mainmenu a.submenu.trail.first
{
font-family:Arial;
text-decoration:none;
font-size:12px;
color:#B4E614;
}
Tach auch,
da muss ich mich mal kurz einmischen.
So irre hohe z-index Werte bringen nicht mehr als niedrigere ;-)
Aber was eher das Problem sein wird:
Man muss dem Umliegenden <div> den passenden z-index geben, damit der IE kleiner 8 das auch richtig versteht...
Also eher #header oder was auch immer an deiner Stelle da ist.
Viele Grüße
@macKP: das mit dem umliegenden div wäre mir neu, lasse mich aber gerne eines besseren belehren. IMHO braucht man lediglich dem 1. Level ein z-index zu geben.
Ergänzend kannst Du Dir auch den IE-Hack hier runterladen und im Seitenlayout einbinden.
Hallo stefan-at-work,
hier wäre sogar ein Beispiel wo das in TL gemacht wurde und funktionierte -> https://contao.org/board/topic/6673.html
(letzer Beitrag)
Da recht weit unten hab ich etwas mehr geschrieben gehabt dazu (wichtig ist also auch noch der z-index von dem Bereich der Überlappt werden muss... das hatte ich vergessen zu erwähnen sorry)-> https://community.contao.org/de/show...hlight=z-index
Mit der Eigenschaft position (z.B. position: relative;) bekommt man es auch hin, das die z-index reihenfolge anders aussieht.. also könnte man das auch damit machen. Das kommt aber auch wieder auf das restliche Setting und den Geschmack an ;-)
Viele Grüße
Bekannter IE-Bug. Im IE generiert jedes positionierte Element einen neuen Stapel-Kontext. Dieser startet jeweils mit einem z-index=0. Deshalb arbeitet z-index nicht korrekt.
Lösung: die gestapelten Elemente in einem gemeinsamen Stapel-Kontext halten. Oder einen neuen Stapel aufmachen und darauf achten, dass dieser über den anderen Stapeln liegt. Also z.B. mit position:relative.
Roland
So,
erstmal danke für eure Hilfe.
Bin jetzt so weit, dass das Menü aufklappt. Ich kann auch ohne Problem über die ersten beiden Menüpunkte fahren. Sobald ich jedoch den 3. anfahre, klappt das Menü ein.
Hat jemand eine Idee woran das liegen könnte?
Hallo cortona,
liegt sicher an deinem CSS.
Naja, Scherz beiseite.. aber so eine Navi kann man so gut wie nicht nur einfach so aufm trockenen zusammenbasteln. Wir brauchen da schon nen Link um genaues sehen zu können.
Ich schätze mal das wird nen Abstand sein der da irgendwo ist, so das hover nicht mehr aktiv ist.
Viele Grüße
Hi,
also hier mal das CSS des Menüs. Im Firefox funktioniert es ohne Problem.
Hoffe jemand erkennt des Fehler...
Grüße,
Alex
HTML-Code:#mainmenu
{
padding-top:78px;
padding-left:22px;
font-family:Verdana;
font-size:11px;
color:#000000;
z-index:600;
}
#mainmenu ul.level_2
{
width:116px;
left:-999em;
position:absolute;
display:block;
margin:0;
padding:3px 3px 5px 3px;
}
#mainmenu ul
{
padding-left:50px;
z-index: 600;
}
#mainmenu li ul
{
z-index: 700;
}
#mainmenu ul li
{
height:21px;
float:left;
display:block;
padding-right:42px;
line-height:1;
list-style:none;
}
#mainmenu li a
{
height:15px;
display:block;
padding-top:6px;
text-decoration:none;
color:#000000;
}
#mainmenu li a:hover
{
color:#b4e614;
}
#mainmenu .trail a
{
height:15px;
color:#000000;
}
#mainmenu li.active span.active
{
height:15px;
display:block;
padding-top:5px;
text-decoration:none;
color:#b4e614;
}
#mainmenu ul.level_2 a:hover
{
color:#b4e614;
}
#mainmenu li.submenu
{
color:#000000;
}
#mainmenu ul.level_2 a
{
width:114px;
background-image:url("tl_files/unternavigation_halbtransparent.png");
background-repeat:repeat;
color:#000000;
}
#mainmenu ul.level_2 li:hover a
{
color:#b4e614;
}
#mainmenu li:hover ul.level_2
{
left:auto;
}
#mainmenu .level_2 li.active span
{
width:116px;
text-align:left;
color:#b4e614;
}
Hallo cortona,
ohne Link immer noch so gut wie unmöglich bei so einer Navi zu sagen...
Aber versuch mal obs geht wenn du expliziet das margin auf 0 setzt. Ich weiß nicht ob du ein reset.css nutzt oder nicht...
Teilweise muss man bei solchen Navigationen auch extra für den IE ein CSS anlegen um Probleme mit Abständen in den Griff zu bekommen...
Viele Grüße
Hey,
habe es endlich rausgefunden.
Der Fehler lag daran, dass der header, container und main relativ positioniert sein mussten. Dann greift der z-index auch.
Trotzdem vielen Dank für eure Mühe!
Grüße,
Alex
Hast du trotzdem mal einen Link dazu? Bin neugierig ;-)
Hey Phil,
leider noch nicht, da ich erstmal alles Lokal aufsetze.
Kann mich aber melden, sobald die Seite online geht.
Grüße,
Alex