denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht: 
|
Verfasst Mo 08.12.2008 13:05
Titel [erledigt] Dropdown Menü, Probleme mit z-index im ie... :( |
  |
|
Hey!
Also auf einer Seite befindet sich ein Dropdown-Menü. Auf manchen Seiten ist allerdings das Menü länger als der Seiteninhalt, somit läuft das Menü über den Footer hinaus. Ich hatte das Problem, dass aber der Text im Footer über dem Menü lag. Also habe ich dem Footer z-index -2 gegeben und es ging, außer, dass man natürlich die Links im Footer nicht mehr anklicken konnte ^^ Also hab ich dem Footer z-index 2 gegeben und dem Menü, mit Listen formatiert ein position: relative und z-index 3. Im Firefox kein Problem es klappt! Allerdings im ie nicht... Da liegt das Menü jetzt nicht nur unter dem Text, sondern unter dem gesamten Footer  . Meine Idee war, das der IE ein Problem mit ul und z-index hat, also hab ich einen div mit position relative und z-index 3 formatiert und ihn um das Problem-DropdownMenü gelegt. Im Firefox geht es, bringt keine Probleme, im ie6 und 7 gibt es allerdings keine Veränderung... Naja nun hab ich keine Idee mehr... vielleicht könnt ihr mir ja helfen?
der css-teil:
| Code: |
.menu { height: 25px; font-size: 10pt; z-index: 999; }
/* hack to correct IE5.5 faulty box model */
* html .menu {width:450px; w\idth:450px; }
.pos { position: relative; z-index: 3; }
/* remove all the bullets, borders and padding from the default list styling */
.menu ul { padding: 0; margin: 0; list-style-type:none; }
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li { position: relative; display: block; float: left; }
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited { overflow:hidden; text-decoration: none; }
.clr { float: none;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul { visibility: hidden; position: absolute; height: 0; top: 27px; left: 5px; }
.menu ul ul ul { visibility: hidden; position: absolute; height: 0; top: 0; left: 157px; }
/* another hack for IE5.5 */
* html .menu ul ul { top:27px; t\op:28px; }
* html .menu ul ul ul { top:0; t\op:0px; }
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited { width:150px; w\idth: 128px; }
* html .menu ul ul ul a, * html .menu ul ul ul a:visited { width:150px; w\idth: 128px; }
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover { background: none; }
.menu :hover > a, .menu ul ul :hover > a { background: url(images/button.jpg); }
... [Menüstyle] ...
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul{ visibility: visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{ visibility:hidden; }
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible; }
#footer {
width: 810px;
height: 49px;
background: url(images/footer.png) no-repeat;
padding: 10px 0 0 35px;
position: relative;
z-index: 2;
}
|
und html:
| Code: |
<div class="menu">
<ul>
<li><a href="index.php">Start</a></li>
<li><a href="firma.php">Firma</a></li>
<li><a href="#">Produkte<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="pos">
<ul>
<li><a class="navi" href="#">Ein Link<!--[if IE 7]><!--></a><li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="kontakt.php">Kontakt</a></li>
<li><a href="impressum.php">Impressum</a></li>
</ul>
</div>
|
Ja, also ich habe nun mal meinem Navi-Div noch einen z-index gegegeben und nun geht es!
Zuletzt bearbeitet von denise2302 am Mo 08.12.2008 14:49, insgesamt 2-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
