0

以下のコードは、3つの要素を持つミニWebページです。左側：サッカーゴール+ボールの画像中央：右側のビデオ：携帯電話の画像

私の1440x900のような解像度で全体を見ると、問題はありません。すべて問題ありません。ただし、解像度を低くすると（またはナビゲーターウィンドウのサイズを小さくすると）、携帯電話の画像がビデオの後ろ（またはその上のビデオ）に表示されます。

これを修正するために、私がやろうとしているのは、幅が1280ピクセル、高さが830ピクセルに達したとき、これが限界解像度です（これ未満の場合、問題が発生します）すべての要素を修正しようとしています（何も浮かない）もう）、スクロールバーが表示されるので、訪問者はそれらを使用でき、要素は何もありません。

どうすればこれを達成できますか？それを手に入れてください、それは何時間も経ちました、そして私は気が狂います。

私の最後の試み：bodyタグにmin-width：1280pxを追加します。

しかし、結果はありません:(これが正しく使用されているかどうか、そしてそれが解決策になる可能性があるかどうか疑問に思っています..あなたはどう思いますか？

PD：ここから画像をダウンロードしてください：http： //aracelid.110mb.com/myfolder.zip

どうもありがとう

<head> 

<style type="text/css"> 
#navigation {
}

#navigation ul, #navigation ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}


#navigation ul {
    padding: 5px 15px; 
    text-align: left;
}

#navigation ul li {
    display: inline;

    margin-right: 0px;
    padding-top:10px;
}

#navigation ul li a div {
    background: url("myfolder/boton_ROLLOUT_08.png") no-repeat;

    padding: 10px 0.5em;

    color: #FFFFFF;
    text-decoration: none;
    font-size:12px;
}

#navigation ul li a div:hover {
    background: url("myfolder/boton_ROLLOVER_08.png") no-repeat;

    padding: 10px 0.5em;

    color:#FFFFFF;
    text-decoration: none;
    font-size:12px;
}     
</style>

</head> 

<body style="background-color:#E7E7E7;font-family: Arial, Helvetica, sans-serif;"> 

<div style="z-index:-1;position:absolute;left:0;top:30%;height:50%;width:100%;float:none">

    <div style="position:absolute;top:100px;left:0px;"><img src="myfolder/goal.jpg"></div>
        <div style="position:absolute;top:-90px;right:0px"><img src="myfolder/sonyx10_06.jpg"></div>

</div>


<div style="position:absolute;top:15%;left:20%">
 <div id="navigation" style="z-index:1;position:relative;top:-18px;left:0px"> 
    <ul> 
        <li><a href="#" id="t1" style="color:#FFFFFF;text-decoration:none;" ><div id="t1" style="float:left;width:140px;text-align:center;">tab1&nbsp;&nbsp;</div></a></li> 
        <li><a href="#" id="t2" style="color:#FFFFFF;text-decoration:none;"><div id="t2" style="float:left;width:140px;text-align:center">tab2&nbsp;</div></a></li> 
        <li><a href="#" id="t3" style="color:#FFFFFF;text-decoration:none;"><div id="t3" style="float:left;width:140px;text-align:center">tab3&nbsp;&nbsp;&nbsp;</div></a></li> 
    </ul> 

</div>

 <div id="video" style="z-index:50;text-align:left;float:left;width:726px;height:491px;padding:0px;margin-top:-20px">


            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="710" height="480" id="index" align="middle"> 
                <param name="movie" value="http://elandroidelibre.movilgol.mobi/video.swf" /> 
                <param name="quality" value="high" /> 
                <param name="bgcolor" value="#ffffff" /> 
                <param name="play" value="true" /> 
                <param name="loop" value="true" /> 
                <param name="wmode" value="window" /> 
                <param name="scale" value="showall" /> 
                <param name="menu" value="true" /> 
                <param name="devicefont" value="false" /> 
                <param name="salign" value="" /> 
                <param name="allowScriptAccess" value="sameDomain" /> 
                <!--[if !IE]>--> 
                <object type="application/x-shockwave-flash" data="http://elandroidelibre.movilgol.mobi/video.swf" width="710" height="480"> 
                    <param name="movie" value="http://elandroidelibre.movilgol.mobi/video.swf" /> 
                    <param name="quality" value="high" /> 
                    <param name="bgcolor" value="#ffffff" /> 
                    <param name="play" value="true" /> 
                    <param name="loop" value="true" /> 
                    <param name="wmode" value="window" /> 
                    <param name="scale" value="showall" /> 
                    <param name="menu" value="true" /> 
                    <param name="devicefont" value="false" /> 
                    <param name="salign" value="" /> 
                    <param name="allowScriptAccess" value="sameDomain" /> 
                <!--<![endif]--> 
                    <a href="http://www.adobe.com/go/getflash"> 
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Adobe Flash Player" /> 
                    </a> 
                <!--[if !IE]>--> 
                </object> 
                <!--<![endif]--> 
            </object> 


</div>

</div>



</body>
4

1 に答える 1

1

含む要素amin-widthとを与えmin-heightます。次回は、コードを最小限に抑えてください。

いくつかのヒント

  • スタイル属性は使用しないでください。コンテンツをプレゼンテーションから分離したい。そのため、CSSを使用します。そこにスタイルを混ぜないでください。

  • 注意：絶対配置されたコンテンツは、とは異なる配置で最も近い親要素に対して配置されstaticます。z-indexは、位置が。とは異なる要素にのみ設定できますstatic。

混乱が大きすぎたので、書き直しました:(気が散りすぎたのでビデオを赤いペインに変更しました:)）

   <head> 

    <style type="text/css"> 

        body{
            background-color:#E7E7E7;
            font-family: Arial, Helvetica, sans-serif;
            position:relative; 
            min-width:1280px;
            min-height:830px;
        }

        #navigation { 
            list-style: none;
            margin: 70px 0px 0px 0px;
            padding: 0;
            text-align:center;
        }

        #navigation li {
            display: inline-block;
        }

        #navigation a {
            display: block;
            width: 140px;
            height: 15px;
            background: url("myfolder/boton_ROLLOUT_08.png") no-repeat;
            padding: 10px 0.5em;
            color: #FFFFFF;
            text-decoration: none;
            font-size:12px;
            text-align: center;
        }

        #navigation a:hover {
            background: url("myfolder/boton_ROLLOVER_08.png") no-repeat;
        }

        #container{
            position: relative;
        }

        #goal, #gsm {
            top: 100px;
            position:absolute;
        }

        #goal {
            left:0px;
        }

        #gsm {
            right:0px;
        }

        #video {
            position:relative; z-index: 1;
            width:726px;height:491px;
            background: #F00;
            margin: 0px auto;
        }
    </style>

</head> 

<body> 

    <ul id="navigation"> 
        <li><a href="#" id="t1">tab1&nbsp;&nbsp;</a></li> 
        <li><a href="#" id="t2">tab2&nbsp;</a></li> 
        <li><a href="#" id="t3">tab3&nbsp;&nbsp;&nbsp;</a></li> 
    </ul>

    <div id="container">
        <img id="goal" src="myfolder/goal.jpg">
        <img id="gsm" src="myfolder/sonyx10_06.jpg">
        <div id="video"></div>
    </div>

</body>

完璧ではないことは承知していますが、これは私が集まることができる最も早い例であり、すでにそこから学ぶことがたくさんあると思います。

于 2010-11-30T22:29:18.600 に答える