0

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

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

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

杰温顿

4

3 回答 3

0

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

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

我建议将其用于主要内容 div，因此所有内容都居中，然后为视频、链接等创建单独的 div。这样您就可以将它们放置在居中的 div 内您想要的位置。

于 2011-06-29T17:14:48.513 回答
0

听起来您在页面上定位元素的方式存在问题。看一眼：

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

于 2011-06-29T14:56:14.597 回答
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元素都应该在 a 内div，并且div应该定位。

  • 你div#footer在里面 div#container。有 一种div#foooter 风格，position: absolute 而div#container没有一种position: relative。这会导致两件事。折叠因为div#container 它没有任何内容并且div#fotter相对于浏览器窗口定位。

  • 你有 3 div#recent。ID 必须是唯一的。这是不允许的。使用类 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是一个固定宽度的布局。但是您可以轻松地将其更改为流体或 estalic。这是它的样子

布局

于 2011-06-29T18:22:10.563 回答