CSS Menu
luiggi
- css
0 Ingo Turski0 luiggi
Hallo zusammen,
ich bastle gerade an dem Design meiner neuen HP (noch nicht weit gekommen).
Im Moment hänge ich an der Navi.
Diese habe ich von http://cssplay.co.uk/menus/vertical_slide.html kopiert.
Leider will das Skript bei mit im IE 6 nicht laufen,
im Opera un FF geht es.
Im IE kann man von den Oberpunkten nicht auf die Unterpunkte gehen.
Als Grundlage habe ich den Aufbau aus Selfhtml genommen.
Kann es sein, dass die speziellen IE Anweisungen die Navi beeinträchtigen? Kann mir jemand einen Tipp geben, was da falsch ist?
Link zur Test HP: http://luger.cwsurf.de/sl2/
CSS Auszug:
/* Begin Navi */
#navidiv{ position:fixed; top:4em; left:.0em; border: 0px solid #6699CC; padding:.5em; }
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/vertical_slide.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
ul.navi, ul ul {padding:0; margin:0; border:0; list-style-type:none; overflow:hidden;
width:14em; text-align:left; height:40em;
color:#000000; border:1px solid #6699CC; background:#f8f8f8; }
ul.navi table {border-collapse:collapse; padding:0; margin:0; font-size:.8em;}
ul.navi ul {margin-left:1em;}
ul.navi li {text-indent:0.5em;}
ul.navi li.drop {margin-bottom:-2px;}
ul.navi li a,
ul.navi li a:visited {display:block; width:14em; height:1.5em; line-height:1.7em; text-decoration:none; color:#000000;}
ul.navi li a.last,
ul.navi li a.last:visited {display:block; width:14em; height:14em; line-height:2em;}
ul.navi li ul {display:none;}
ul.navi li:hover a,
ul.navi li a:hover {border:0; color:#e50c0c; font-weight:bold;}
ul.navi li:hover ul,
ul.navi li a:hover ul {display:block; height:18em; width:12em; margin-top:-1px; background:#f8f8f8; border:1px solid #000000;}
ul.navi li:hover ul li a,
ul.navi li a:hover ul li a {height:2em; background:#f8f8f8; color:#000000; font-weight:normal;}
ul.navi li:hover ul li:hover a,
ul.navi li a:hover ul li a:hover {background:#6699CC; color:#f8f8f8; font-weight:bold;}
/* Ende Navi */
#header_container
{ position:fixed; top:0; left:0; right:0; text-align:left; margin:0; height:2em; z-index:3; }
#header
{ position:absolute; top:0; left:0; right:0; bottom:0; height:100%; background:#6699CC;
z-index:3; margin:0; padding:0.2em; }
h1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; margin-left:10.5em; }
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .8em; margin-left:30.5em; }
#content
{ margin:0; padding-top:4.85em; padding-left:16em; padding-bottom:3em; z-index:2; }
#footer_container
{ position:fixed; bottom:0; left:0; right:0; margin:0; height:2.5em; z-index:3; }
#footer
{ position:absolute; top:0; left:0; right:0; bottom:0; background:#6699CC; z-index:3; }
/* Nun für den MSIE */
* html, * html body { overflow:hidden; bottom:0; height:100%; }
* html #header_container, * html #footer_container
{ position:absolute; width:100%; padding-right:16px; }
* html #navidiv
{ position:absolute; }
* html #header,* html #footer
{ height:100%; position:static; }
* html #content
{ position:absolute; top:0; bottom:0; left:0; right:0; height:100%; width:100%;
overflow:auto; margin:0; }
* html #navidiv
{ margin:0; width:10.5em;
/* Der IE soll das Element breiter darstellen, da margin und padding hier von
der Breite abgezogen wird! */ }
Vielen Dank,
Stefan
Hi,
Im Moment hänge ich an der Navi.
Diese habe ich von http://cssplay.co.uk/menus/vertical_slide.html kopiert.
ein mMn unschönes Beispiel - auch wenn es im IE6 ohne Javascript funktioniert.
Leider will das Skript bei mit im IE 6 nicht laufen,
Dann hast Du vermutlich den IE7 installiert und testest eine Standalone-Version ohne veränderte Registry, so dass <!--[if lte IE 6]> ncht greift.
Als Grundlage habe ich den Aufbau aus Selfhtml genommen.
Kann es sein, dass die speziellen IE Anweisungen die Navi beeinträchtigen?
Möglich ist es.
Link zur Test HP: http://luger.cwsurf.de/sl2/
Die Seite lädt ewig und das ist meinem IE6 leider zu lang. :-(
freundliche Grüße
Ingo
Hallo,
ich finde die Navi gar nicht so schlecht,
auch wenn leider nicht genug Ebenen für meine Navigation habe. Aber da kämpfe ich noch....
Leider will das Skript bei mit im IE 6 nicht laufen,
Dann hast Du vermutlich den IE7 installiert und testest eine Standalone-Version ohne veränderte Registry, so dass <!--[if lte IE 6]> ncht greift.
Nein, habe nie IE7 installiert,
immer nur den IE6.
Link zur Test HP: http://luger.cwsurf.de/sl2/
Die Seite lädt ewig und das ist meinem IE6 leider zu lang. :-(
Leider ist der Free Hoster im Moment etwas arg lahm.
Sg Stefan
Hi,
Nein, habe nie IE7 installiert,
immer nur den IE6.
in meinem IE6 -leider nur die alte Version mit SP1, da ich den IE7 installiert habe - funktioniert das Originalbeispiel jedenfalls.
freundliche Grüße
Ingo
Hi Ingo,
im Original Beispiel geht es bei mir auch im IE6,
nur eben nicht bei mir auf der HP (die ja auch leider nicht gerade gut geht).
Sg Stefan
So,
jetzt geht es auch bei mir,
keine Ahnung warum.
Habe heute etwas gebastelt, seitdem geht es.....
Vielen Dank für´s lesen & antworten.
Stefan