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：从液体到固定的较小分辨率

回答

相关问题