我正在爲正在發佈的電影設計一個網站的過程中，但我有一些問題，以適應所有瀏覽器窗口大小和屏幕大小。本質上，標記（例如啓動頁面）的頂部有電影標誌，下面有一個視頻（電影預告片），然後是一個輸入按鈕，可讓用戶訪問主頁。所有這些應該以所有瀏覽器窗口大小爲中心。但是，當我嘗試不同尺寸的內容時，內容不會保持居中，並且視頻從背景圖像移開。我將如何解決與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