0

個人のポートフォリオ サイトの最初のページが完成しました。私はWeb開発に関しては初心者です。サイトの幅を、背景画像と同じ幅の 1600 ピクセルに設定しました。

私が今やりたかったことは、ページをレスポンシブ デザインに変換することです。私の唯一の問題は、ページの幅を 100% に変更すると、バナー div の位置が中央ではなく左に移動することです。

ここに私のコードのスニペットがあります。

<body>

<div id="banner"> 
   <div class="container_12">
        <div class="grid_7 prefix_5" id="navbar">
            <ul>
              <li><a href="index.html" title="Gelo Lopez">Home</a></li>
              <li><a href="Project Management.html" title="Gelo Lopez Work" target="_blank">Portfolio</a></li>
              <li><a href="http://gelolopez.wordpress.com">Blog</a></li>
              <li><a href="/contact" title="Contact Gelo Lopez">Contact</a></li>
            </ul>
        </div>
        <div class="grid_10" id="bannertext">
            <h1>Hello!</h1>
            <div class="clear"></div>
            <p>Hi, I am Gelo Lopez, an emerging digital marketing and PR Professional. I create stories for brands. I am the social media primmadonna</>
            <p id="bannerbutton"><img src="Assets/Images/bannerbutton.png" width="171" height="44" alt="Gelo Lopez Portfolio" /></p>
        </div>     
   </div>
   </div><!--end of banner-->

CSS:

body {
width: 100%;
color: #5a5959;
font-size: 18px;
font-family: "Lao UI"; 
}

/* sections*/
#banner {
background-image: url(../Images/Banner-background.png);
height:660px;
color: #fff;
font-size: 24px;
}

また、12 列に 960 gs のテンプレートを使用しています。コンテンツをページの中央に配置するために、container_12 div を id=banner の下に配置することにしました。

誰かが私を助けてくれることを願っています

4

2 に答える 2

2

バナー div が「右にシフト」されているのではなく、背景画像が右に切り取られているということだと思います。ブロック レベルの要素としては、その<div>親に適合します。この場合は、body幅 100% に設定されています。

CSS3 の使用に満足している場合は、背景画像をコンテンツ領域に合わせてスケーリングする を追加background-size: containしてみてください。#banner

詳細はこちら: http://www.w3schools.com/cssref/css3_pr_background-size.asp

JSFiddle はこちら: http://jsfiddle.net/davidpauljunior/LCFun/

于 2013-11-04T04:45:39.060 に答える
0

background-position CSS タグをいじる必要があります。CSSコードの余分な行を入れてみることができます:

background-position: top left;

また、レスポンシブ サイトについて話しているので、背景が設計していない画面サイズに収まらない場合があることに気付くでしょう。おそらく背景を繰り返すか、修正する必要があります...それは本当にあなたのニーズに応じています. ここで背景の繰り返しについて読んでください：http://www.w3schools.com/cssref/pr_background-repeat.asp

于 2013-11-04T04:48:35.007 に答える