Menü mit CSS und HTML - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Menü mit CSS und HTML

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Menü mit CSS und HTML

Pages: [1]

geschrieben von pyscho am 11.12.2006 - 14:50

Hallo,
wollte mal fragen wie man ein vertikale Auf- und Zuklappmenü über eine Tabelle die man mit CSS positioniert hat positioniert, damit die Aufgehende Menüs nicht von der positionierten Tabelle gestört werden.

Den Menü habe ich mit dem CSS und HTML erstellt so es kein JavaScript in den Code zu finden ist

Die URL zur der kostenlosen Test subdomain könnt ihr unter dem Link hier finden

Danke
im Voraus

geschrieben von Matneu am 11.12.2006 - 23:20

	Zitat
	Original geschrieben von pyscho am 11.12.2006 - 14:50 wollte mal fragen wie man ein vertikale Auf- und Zuklappmenü über eine Tabelle die man mit CSS positioniert hat positioniert, damit die Aufgehende Menüs nicht von der positionierten Tabelle gestört werden.

Habe zuerst nur "Position" verstanden, aber das Beispiel war gut.
Lösung: z-index:99;

So far...
Matthias

geschrieben von pyscho am 12.12.2006 - 09:47

Hi,

habe erst auch mit z-index versucht

Dafür habe ich z-index:1; geschrieben aber es ging nicht.

die Lösung von dir: z-index:99; funktioniert

habe wohl vergessen den Wert auf 99 umzustellen

Es gibt aber immer noch ein Problem:
Mit z-index:99; funktioniert es nur in FireFox und Mozilla, IE macht probleme.

Damit es funktioniert habe ich für das Menü z-index:99; eingetragen und ein Script geschrieben

Das Script überprüft ob IE oder IE7 benutzt wird.
wenn ja dann setzt das Script den Wert von z-index auf -1 ( in der Klasse .table ), für das Menü bleibt
jedoch der Wert 99

also in etwa so sieht es dann aus:

Für das Menü:

	HTML-Quelltext
1: 2: 3: 4: 5: 6:	#menu ul { list-style:none; margin:0; padding:0; z-index:99; /* habe hier den z-index hinzugefuegt nachtraeglich firefox und mozilla */ }

Für die Tabelle:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14:

<!--[if IE]>
        <style type="text/css" media="screen">
            #menu ul li {float: left; width: 100%;}
            .table { z-index:-1; top:15px;} // hier habe ich wie gesagt die Tabelle auf z-index:-1 gesetzt, damit das Menü im IE über der Tabelle erscheint
        </style>
    <![endif]-->

    <!--[if lt IE 7]>
        <style type="text/css" media="screen">
            body {behavior: url(csshover.htc); font-size: 100%;}
            #menu ul li a {height: 1%;}
            .table { z-index:-1; top:15px;} // hier wird die Tabelle auf z-index:-1 gesetzt, damit das Menü im IE7 über der Tabelle erscheint
        </style>
    <![endif]-->

Das klappt dann prima

die Verbesserung könnt ihr unter dem link hier sehen

byee

Zitat

HTML-Quelltext

HTML-Quelltext