メニューバー

HOME HELP 新着記事 ツリー表示 スレッド表示 トピック表示 発言ランク ファイル一覧 検索 過去ログ

■356 / 親階層)  cssのお勉強
□投稿者/ mitt クラウンプライズ(116回)-(2010/10/20(Wed) 11:35:05) [ID:GS7TGz0n]

    css(カスケーディングスタイルシート)は、近年のWEBサイトつくりにはかかせない知識ですが、
    目からうろこの事件に遭遇しました。

    たまにファイヤーフォックスで、自分のサイトを見ることがあるんですが、
    なんと、プルダウンメニューがFLASHコンテンツの後にかくれて、選択できないんです。
    該当ページは、リザルトページと、フォトギャラリー、あと、動画ページまではいいんだけど、動画を見だすと、突然後にいってしまう・・・(ToT)

    どうやら、ファイヤーフォックスは、レイヤーの重ね順が独特らしくて、
    インターネットエクスプローラやサファリでは良くても、見えないことがあるらしいのだ。

    なんとか、対処しなきゃならないので、ググってみた。
    cssでz-indexというプロパティがあるんだけど、z-indexで要素の重ね合わせの順序を指定しておかないといけないらしい。


    対処法


    --------------------------------------------------------

    HTMLの記述

    ※FLASHムービーの挿入部分に、'wmode','transparent'を追加する。3カ所ありました。


    〜省略


    <td id="flash" align="center">

    <script type="text/javascript">

    AC_FL_RunContent(

     'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0',

     'width','538',

     'height','180',

     'title','フラッシュコンテンツ',

     'src','topbanner',

     'wmode','transparent',

     'quality','high',

     'pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','topbanner' ); //end AC code

    </script>

    <noscript></noscript>

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="538" height="180" title="フラッシュコンテンツ">

    <param name="movie" value="topbanner.swf" />

    <param name="wmode" value="transparent" />

    <param name="quality" value="high" />

    <embed src="topbanner.swf" wmode="transparent" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="538" height="180"></embed>

    </object>

    </noscript>

    </td>

    省略〜

    ---------------------------------------------------

    cssの記述

    ※z-indexプロパティは数字が大きいほど手前になる。




    #container #hed #menu #MenuBar1 {

     position: relative;

     z-index: 1000;

     margin-right: 2px;

     margin-left: 2px;

     padding: 0px 0px;

    }

    #container #body table.td #flash {

     position: absolute;

     z-index: 0;

     width: 100%;

     height: 180px;

     vertical-align:top;

     text-align:center;

    }



    ふ〜う。。。これでなんとか解決。

    実は、この「cssのお勉強」は、高鷲スノーパークスキースクールのnewホームページにも生かされました。
    ネットサーフィンした甲斐がありました。


削除キー/

前の記事(元になった記事) 次の記事(この記事の返信)
親記事 返信無し
 
上記関連ツリー

Nomal cssのお勉強 / mitt (10/10/20(Wed) 11:35) [ID:GS7TGz0n] #356 ←Now

All 上記ツリーを一括表示 / 上記ツリーをトピック表示
 
上記の記事へ返信

Mode/  Pass/

HOME HELP 新着記事 ツリー表示 スレッド表示 トピック表示 発言ランク ファイル一覧 検索 過去ログ

- Child Tree -