0

公開される映画のウェブサイトをデザインしている最中ですが、すべてのブラウザ ウィンドウ サイズと画面サイズに収まるようにするのに問題があります。基本的に、たとえばスプラッシュ ページのマークアップには、ページの上部に映画のロゴがあり、その下にビデオ (映画の予告編) があり、ユーザーをホームページに移動させる入力ボタンがあります。これらはすべて、すべてのブラウザ ウィンドウ サイズの中央に配置する必要があります。ただし、さまざまなサイズなどを試すと、コンテンツが中央に配置されず、ビデオが背景画像から外れます。CSSでそれをどのように修正しますか？

他にもいくつかのページがあります。つまり、概要、ビデオ、そしてプロジェクトに寄付するためのページです。すべてのサイズでコンテンツが正しく機能するように、これらが同じように機能することを望みます。ありがとう！

これを見て私の言いたいことを理解したい場合は、リンクはhttp://rescuedthemovie.com/new/homeです。これは開発ページで、基本的に最終的なデザインがないため、多少乱雑ですが、私が話していることがわかります。

ジウィントン

4

3 に答える 3

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%;。これはどのようにそれを中心にしますか？

  • これは、元の位置から左から 26%、上から 3em 押し出され、以前の位置に「ギャップ」が残っていることを意味しますdiv id="slider"。position: relative; left: 26%; top: 3em;

  • あなたh1は を持っていmargin: left; 300px;ます。正確にはどこになりたいですか？

  • 下にh1要素aを含むdiv要素がありますか? これは、インライン要素内のブロック レベル要素のようなものです。完全に間違っています。これらのすべてのa要素は 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 を使用します。

これについてどうやって行くかについてスケルトンを与えます。

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;
}

このオフコースは固定幅レイアウトです。ただし、簡単に流体またはエスタリックに変更できます。見た目はこんな感じ

レイアウト

于 2011-06-29T18:22:10.563 に答える
0

中央に配置したい div にこれを追加するだけです。これはすべてのブラウザーで機能し、解像度に関係なくすべてが中央に表示されます。

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

これをメイン コンテンツ div に使用することをお勧めします。これにより、すべてが中央に配置され、ビデオ、リンクなどに個別の div が作成されます。そうすれば、中央の div 内の必要な場所にそれらを配置できます。

于 2011-06-29T17:14:48.513 に答える