CSS：從液體到固定的較小分辨率

下面的代碼是一個迷你網頁，包含3個元素：左邊的：足球球門+球形圖像中心：右邊的視頻：移動圖像手機CSS：從液體到固定的較小分辨率

像我這樣的1440 X 900的分辨率看整個事情，沒有任何問題，都說明OK。但是，當您使用不太寬的分辨率（或者您將導航窗口的大小重新調整爲較小的寬度）時，手機圖像會落在視頻（或其上的視頻）之後。

要解決這個問題，我想要做的是：當達到1280像素的寬度和830像素的高度，這是極限分辨率（小於這個，事情出錯）我試圖讓所有的固定的元素（不再是浮動的），所以滾動條顯示，訪問者可以使用它們，沒有任何元素沒有任何東西。

如何才能做到這一點？請幫我一把，這已經很多小時了，我正在瘋狂。

我最後一次嘗試：將body標籤最小寬度：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索引可以僅在具有定位從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：從液體到固定的較小分辨率

回答

相關問題