我正在为正在发布的电影设计一个网站的过程中，但我有一些问题，以适应所有浏览器窗口大小和屏幕大小。本质上，标记（例如启动页面）的顶部有电影标志，下面有一个视频（电影预告片），然后是一个输入按钮，可让用户访问主页。所有这些应该以所有浏览器窗口大小为中心。但是，当我尝试不同尺寸的内容时，内容不会保持居中，并且视频从背景图像移开。我将如何解决与CSS？流体CSS布局问题
还有一些其他页面，如简介，视频，然后页面捐赠给项目。我希望这些以相同的方式工作，保持内容在所有尺寸上正常工作。谢谢！
如果你想看看这个，看看我的意思，链接是http://rescuedthemovie.com/new/home。这是开发页面，基本没有最终设计，所以它有点混乱，但你可以看到我在说什么。
jwinton
听起来像是你在页面上定位元素上的方式有问题。看一看：
只是将它添加到您想要为中心的任何div的。这应该适用于所有浏览器，并且无论解决方案如何，都会保持所有内容。
#div {
margin:0 auto;
text-align:center;
}
我会建议使用此为主要内容的DIV，所以一切的中心，然后将视频，链接等这样你可以定位那些你希望他们的中心DIV中创建单独的div。
我不明白你的设计。我看到以下问题。
你有一个div id="container"但它包含的唯一的事情就是div id="fotter"。所有其他元素都在容器div的“外部”。
您有div id="logo"，款式为margin-top: 1%; margin-left: 25%;。这个中心如何呢？
您的div id="slider"拥有position: relative; left: 26%; top: 3em;这意味着它从左侧推动26％，从原始位置顶端推动3em，并在此之前留下“空白”。
您的h1有margin: left; 300px;。你究竟想要它在哪里？
Underneeth h1您有a元素，其中包含div元素？这就像内联元素中的块级元素。完全错误。这些全部a元素应位于div之内，并且应该定位div。
您的div#footer位于 div#container之内。该div#foooter 有position: absolute 风格而div#container确实不 有position: relative。这 导致2件事。 div#container 崩溃，因为它没有任何 内容，并且div#fotter是 相对于浏览器 窗口定位。
您有3 div#recent。该ID必须是唯一的。这是不允许的。使用calsses instaed。
我会给一个关于如何去做这个的skeloton。
的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rescued: The Movie</title>
<link rel="stylesheet" href="my_styles.css">
</head>
<body>
<div id="container">
<div id="logo">
<a href="http://rescuedthemovie.com"><img src="http://rescuedthemovie.com/new/images/logo.png" alt="Rescued Logo" /> </a>
</div>
<div id="nav">
<ul>
<li><a href="http://rescuedthemovie.com/home.html">home</a></li>
<li><a href="http://rescuedthemovie.com/synopsis.html">synpsis</a></li>
<li><a href="http://rescuedthemovie.com/videos.html">videos</a></li>
<li><a href="http://rescuedthemovie.com/blog.html">blog</a></li>
<li><a href="http://rescuedthemovie.com/partner.html">partner</a></li>
</ul>
</div>
<div id="slider">
<img src="http://rescuedthemovie.com/images/slides/slide1.jpg" alt="Slide 1" />
<img src="http://rescuedthemovie.com/images/slides/slide2.jpg" alt="slide 2" />
<img src="http://rescuedthemovie.com/images/slides/slide3.jpg" alt="slide 3" />
</div>
<div id="blog">
<h1>NEWS</h1>
<div class="recent">
<h2>The Putnam's Adoption Journey</h2>
<a href="http://rescuedthemovie.com/blog">My husband and I thought our family was complete. We had our two children (one boy and one girl) and were completely satisfied with that. Life was comfortable. My youngest had just started Kindergarten so I found myself with more free time than I had had in nine years! I was enjoying the freedom of grocery shopping without toddlers. But then God started stirring something in our hearts...</a>
</div>
<div class="recent">
<h2>God's Divine Leading: Part 3</h2>
<a href="http://rescuedthemovie.com/blog">I remember feeling a little surprised that she had decided on adoption. I guess I just assumed that she would opt to keep her baby. I have to admit that I did wonder for a fleeting moment if perhaps the Lord was trying to lead Jurgen and I to adopt her baby, but then reasoned that a domestic adoption might be too risky. People might also think it strange, since I was the one who encouraged her to consider adoption in the first place, rather than end her baby’s life...</a>
</div>
<div class="recent">
<h2>God's Divine Leading: Part 2</h2>
<a href="http://rescuedthemovie.com/blog">When I awoke, I had an overwhelming desire to have a baby of our own. The dream was extraordinarily real and tangible, and I felt strongly that the Lord had given me this dream as an answer to my questions about pursuing adoption. I am not the type of person who normally bases my decisions on dreams, but this was different. It was as if the Lord Himself had dropped this desire into my heart...</a>
</div>
<a id="more" href="http://rescuedthemovie.com/blog">Read More</a>
</div>
<div id="footer">
<p>©2011 Rescued</p>
</div>
</div>
</body>
</html>
的CSS
{
margin: 0;
padding: 0;
}
img
{
border: 0;
}
a
{
text-decoration: none;
color: #000;
}
body
{
background: url("http://rescuedthemovie.com/new/css/../images/blog_bg.jpg") no-repeat scroll center top #000;
}
div#container
{
width: 960px;
margin: 20px auto;
margin-bottom: 0;
}
div#logo
{
width: 850px;
height: 300px;
margin: 0 auto;
}
div#logo a
{
width: 100%;
height: 100%;
display: block;
}
div#nav
{
background: url("http://rescuedthemovie.com/new/css/../images/nav.png") no-repeat scroll 0 0 transparent;
font-size: 25px;
text-transform: uppercase;
}
div#nav ul
{
width: 900px;
margin: 10px auto;
}
div#nav ul li
{
display: inline-block;
margin: 0 40px;
color: #FFF;
}
div#nav ul li a
{
color: #FFF;
}
div#slider
{
width: 500px;
height: 250px;
margin: 0 auto;
margin-top: 77px;
float: right;
position: relative; /*romove this in the final design*/
}
div#slider img /*romove this in the final design*/
{
position: absolute;
top: 0;
left; 0;
}
div#blog
{
float: left;
width: 450px;
color: #FFF;
margin-bottom: 50px;
}
div#blog h1
{
margin: 20px 0;
}
div#blog a#more
{
float: right;
color: red;
}
div.recent
{
margin: 20px 0;
border: 1px solid #555;
padding: 5px;
}
div.recent h2
{
font-weight: bold;
color: #777;
margin-bottom: 10px;
}
div.recent a
{
color: #FFF;
}
div#footer
{
clear: both;
color: #FFF;
text-align: center;
font: 25px;
margin: 20px auto;
}
div#footer p
{
font-size: 25px;
}
这offcouse是一个固定的宽度的布局。但是你可以很容易地将其改变为流动的或现代的。这是它的外观
我刚刚得到的初始页面启动和运行。 http://rescuedthemovie.com/new。检查那里的内容。 – jwinton