CSS：液体から小さな解像度の固定

以下のコードは、左のの3つの要素を持つミニウェブページです。サッカーゴール+ボール画像センター：動画右：モバイルの画像電話CSS：液体から小さな解像度の固定

1440 x 900のような解像度で全体を見ると、問題はありません。すべてがokです。しかし、幅の狭い解像度を使用したり、ナビゲータウィンドウの幅を狭めたりすると、携帯電話の画像がビデオ（またはその上のビデオ）の後ろに表示されます。

これを修正するには、幅が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>

出典

2010-11-30 user523129

が含む要素min-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-30 22:29:18 Jan

CSS：液体から小さな解像度の固定

答えて

関連する問題