当浏览器重新调整

内容移到我在CSS相当新的HTML，但努力学习，就像我可以。我正在为一个网站（www.revivalfest.org）设计一个简单的“启动页面”。我有一个使用浏览器调整大小的背景div，但是在调整浏览器大小时，我的内容（视频和社交媒体图标）会四处移动。我希望视频集中在“Savannah，Ga”下面，并且无论浏览器大小和屏幕分辨率如何都要留在那里。当浏览器重新调整

我试图把它放在一个容器以及各种格宽度和包装摆弄，但有没有运气。希望你们都可以帮助解决这个问题。

预先感谢您！

这里是我的代码：

<html> 
<head> 
<title>Revival Fest Coming Soon</title> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> 
    <style type="text/css"> 
    html, body {height:100%; margin:0; padding:0;} 

     #background {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 0;} 

      .stretch { min-width:100%; min-height:100%; width:auto; height:auto; } 

     #video {position:absolute; z-index:0; top:310; left:482;} 

     #fb {position:absolute; z-index:0; top:755; left:175;} 

     #twitter {position:absolute; z-index:0; top:758; left:255;} 

    </style> 
    </head> 
    <body> 
    <div id="background"> 
     <a href="http://www.facebook.org/revivalfestsav"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/revivalsplashmoreinfo67.jpg" class="stretch" alt="" /></a> 
    </div> 
    <div id="video"> 
     <iframe width="725" height="432" src="http://www.youtube.com/embed/kKqHnc91tzk?feature=player_detailpage" frameborder="0" allowfullscreen></iframe> 
    </div> 
    <div id="fb"> 
     <object><a href="http://www.facebook.org/revivalfestsav"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/fb.png"></a></object> 
    </div> 
    <div id="twitter"> 
     <object> <a href="https://twitter.com/savrevivalfest"><img src="http://www.revivalfest.org/wp-content/uploads/2013/06/twit.png"></a></object> 
    </div> 
    </body> 
    </html>

来源

2013-06-25 catchawave

使用了这样的布局绝对定位是一个灾难。 – cimmanon

就像我说的，我对此很新颖。你能详细说明一下吗？你会使用不同的方法吗？ – catchawave

我建议通过html在您的网站上创建您的实际文本，而不是仅仅将它嵌入到背景中。这不是一个好方法，因为它不允许其他元素（如视频）相对于文本进行定位。 –

你可以做的是百分比与利润率的工作和使用媒体查询定义破发点。如果你真的需要背景是这样的图像，否则最好的办法是使用物理文本，因此所有东西都可以相对定位。

来源

2013-06-25 17:01:48

当浏览器重新调整

回答

相关问题