流体CSS布局问题

时间：2011-06-29 14:33:14

标签： css fluid-layout

我正在设计一个正在发布的电影的网站，但我遇到了一些问题，让它适合所有浏览器窗口大小和屏幕尺寸。基本上，标记，例如对于启动页面，在页面顶部有一个电影标识，在它下面有一个视频（电影预告片），然后是一个将用户带到主页的输入按钮。所有这些都应该以所有浏览器窗口大小为中心。但是，当我尝试不同的尺寸等时，内容不会保持居中，视频会偏离其背景图像。我如何用CSS解决这个问题？

还有一些其他页面，即概要，视频，然后是捐赠给项目的页面。我希望这些工作方式相同，保持内容在所有尺寸上正常工作。谢谢！

如果你想看看这个，看看我的意思，链接是http://rescuedthemovie.com/new/home。这是开发页面，基本上没有最终设计，所以它有点凌乱，但你可以看到我在说什么。

jwinton

3 个答案:

答案 0 :(得分：0)

您在页面上放置元素的方式听起来很麻烦。看看：

http://www.w3schools.com/css/css_positioning.asp

答案 1 :(得分：0)

只需将此添加到您想要居中的任何div。这应该适用于所有浏览器，并且无论分辨率如何都会保持所有内容。

#div {  
    margin:0 auto;
    text-align:center;
}

我建议将它用于主内容div，所以一切都集中在一起，然后为视频，链接等创建单独的div。这样你就可以将它们放在你想要的位于居中的div中..

答案 2 :(得分：0)

我不明白你的设计。我看到了以下问题。

  • 您有一个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;。你想要它到底在哪里？

  • 是否h1包含a元素的div元素？这就像内联元素中的块级元素。完全错了。这些所有a元素应位于div内，而div应位于{{p}

    • 之内。

  • 你的div#footer在里面 div#container。 div#foooter 风格为position: absolute 而div#container执行不 有一个position: relative。这个 导致2件事。 div#container 崩溃，因为它没有任何 内容和div#fotter是 相对于浏览器定位 窗口。

  • 你有3 div#recent。 ID必须是唯一的。这是不允许的。使用calsses instaed。

我会给出一个关于如何解决这个问题的文章。

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>&copy;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是一个固定宽度的布局。但您可以轻松地将其更改为流体或标记。这就是它的外观

Layout

相关问题
最新问题