tutorials.de Buch-Aktion 02/2012
ERLEDIGT
JA
ANTWORTEN
9
ZUGRIFFE
6213
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. #1
    GFENONO GFENONO ist offline Mitglied Bronze
    Registriert seit
    Oct 2007
    Beiträge
    29
    Ich habe mir aus Codeschnipseln ein Hover Menü und ein Hover Bild gemacht. Funktioniert alles soweit, Nur das Problem ist das das Hoverbild unter dem Menü erscheint sowie unter dem Flashplayer. Ich gebe hier mal die beiden Scripte des CSS. Ich wäre euch sehr dankbar wenn ihr mal einen Blick drauf werft.

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    
            /*Menü*/
            
            .menu ul{list-style-type:none;padding:0;margin:0;}
            /* make the top level links horizontal and position relative so that we can position the sub level */
            .menu li{float:left;position:relative;z-index:100;}
            /* use the table to position the dropdown list */
            .menu table{position:absolute;border-collapse:collapse;z-index:80;left:-1px;top:23px;}
     
            /* style all the links */
            .menu a, .menu :visited {display:block;font-size:12px;   padding:5px 0;font-family:tahoma;color:#000;font-weight:bold;
            text-decoration:none;background-color: #AFCEFC;text-align:center;}
            /* style the links hover */
            .menu :hover{background:#3399FF; color:#c00;}
            /* hide the sub level links */
            .menu ul ul {visibility:hidden;background-color: #CCCCCC;position:absolute;height:0;}
            /* make the sub level visible on hover list or link */
            .menu ul li:hover ul,
            .menu ul a:hover ul{visibility:visible;}
    /*Hover-Bild*/
            #bild1 {float:right;padding-top:10px;padding-right:5px; z-index:100;}
            #bild1 a.p1, #menu a.p1:visited {width:45px; height:45px; text-decoration:none; top:0; left:0; border:0;}
            #bild1 a img {border:0;}
            #bild1 a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
            #bild1 a .large {display:block; position:absolute; width:0; height:0; border:0; top:0; left:0;}
            #bild1 a.p1:hover .large {display:block; position:absolute; top:130px; left:37%; width:300px; height:300px; 
            border:10px solid #ccc;}
     

  2. #2
    Maik Tutorials.de Gastzugang
    Hi,

    kann man sich das mal "live" anschauen, denn mit dem CSS-Schnipsel alleine lässt sich derzeit nicht viel dazu sagen.
     

  3. #3
    GFENONO GFENONO ist offline Mitglied Bronze
    Registriert seit
    Oct 2007
    Beiträge
    29
    Unter http://www.gfe-crew.de sind oben links und oben rechts 2 kleine bilder. wenn man dann über diese mit der maus fährt dann "versteckt" sich halt das bild hinter dem menü.
     

  4. #4
    Maik Tutorials.de Gastzugang
    Hi,

    versuch mal, den großen Bilder mit der z-index-Eigenschaft eine höhere Schichtposition zu geben.
     

  5. #5
    GFENONO GFENONO ist offline Mitglied Bronze
    Registriert seit
    Oct 2007
    Beiträge
    29
    echt super das hat schonmal geklappt...nur jetzt habe ich noch ein weiteres problem gefunden.
    wenn ich diese bilder bei dem flv player von http://www.jeroenwijering.com/?item=JW_FLV_Player
    anzeigen lasse dann verschwinden diese wieder....kann man da noch was machen
     

  6. #6
    Maik Tutorials.de Gastzugang
    Wenn die Bilder hinter dem Flash-Player verschwinden, hilft möglicherweise diese Ergänzung im Script-Code des SWF-Objects weiter:

    Code :
    1
    
    so.addParam("wmode", "transparent");
    bzw.

    Code :
    1
    
    so.addVariable("wmode", "transparent");
     

  7. #7
    GFENONO GFENONO ist offline Mitglied Bronze
    Registriert seit
    Oct 2007
    Beiträge
    29
    leider hat das keine veränderung gebracht

    wenn ich den code an den anfang packe dann erscheint der player garnicht mehr, aber das ist wohl normal
    Geändert von GFENONO (05.12.07 um 14:21 Uhr)
     

  8. #8
    Maik Tutorials.de Gastzugang
    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <script type="text/javascript">
            var s1 = new SWFObject("http://www.gfe-crew.de/_admin/flvplayer/flvplayer.swf","single","320","240","7");
            s1.addParam("allowfullscreen","true");
            [b]s1.addParam("wmode", "transparent");[/b]
            s1.addVariable("file","http://www.gfe-crew.de/videos/handyschwimmen.flv");
            s1.addVariable("image","http://www.gfe-crew.de/images/img_videos/handyschwimmen.jpg");
            s1.addVariable("width","320");
            s1.addVariable("height","240");
            s1.write("player1");
    </script>
    funktioniert bei mir einwandfrei und führt zum gewünschten Ergebnis, dass die Bilder nicht vom Flash-File überdeckt werden.
     

  9. #9
    GFENONO GFENONO ist offline Mitglied Bronze
    Registriert seit
    Oct 2007
    Beiträge
    29
    mhhh...sehr sehr merkwürdig...habe den code vorhin auch genau an der selben stelle eingefügt, aber es klappt nicht. Jetzt geht es...muss man nicht verstehen.

    Danke für deine Bemühung
     

  10. #10
    Maik Tutorials.de Gastzugang
    "so.addParam()" vs. "s1.addParam()"
     

Ähnliche Themen

  1. a hover CSS Menü
    Von lol1983 im Forum CSS
    Antworten: 3
    Letzter Beitrag: 06.09.10, 14:45
  2. horizontales Menü hover
    Von tombo82 im Forum CSS
    Antworten: 1
    Letzter Beitrag: 12.11.09, 12:23
  3. Antworten: 2
    Letzter Beitrag: 28.10.09, 19:13
  4. Menü Doppel-Hover
    Von Magxi im Forum CSS
    Antworten: 6
    Letzter Beitrag: 07.01.08, 16:57
  5. Hover Menü
    Von fireball-le im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 03.09.03, 19:40