0

私はCSSとDivの配置にかなり慣れていないので、問題にぶつかりました

作成中のアプリの下部にステータス バーがあります -

ステータス バーの幅は 1600 ピクセルですが、ブラウザーに幅 1000 ピクセルを超える水平スクロール バーを表示させたくないため、またステータス バーの実際のテキストは中央の 1000 ピクセルにしか収まらないため、3 つの画像を作成しました。 -

画像 1 は LEFT 200 ピクセルです

画像 2 は中央の 1000 ピクセルです (これは絶対位置に設定され、ブラウザー ウィンドウの下部に貼り付けられ、正常に動作します)

画像 3 は右の 200 ピクセルです

私がしたことは、ステータス バーの 1600 ピクセル バージョンを作成し、それを 1000 ピクセル バーの下のレイヤーに配置し、WIDTH:100% を使用して DIV の背景画像として設定しようとしたことです。

フッターbr

{

background-image:url(images/footerol.jpg);
background-repeat:no-repeat;
text-align: center;
padding: 0px;
width: 100%;
height:40px;
position: absolute;
bottom:0px;
z-index: 3; 
vertical-align:bottom;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

}

ここで何か間違ったことをしていると確信しています...このアプローチを使用して、DIVで背景画像を使用しているため、幅1100ピクセルのブラウザで水平スクロールバーを表示できないようにすることはできますか...そうは言っても、 width:100% の場合、中央に配置できないようです

最良のアプローチは、左右の要素を中央の 1000 ピクセル バーよりも下のレイヤーに配置し、ブラウザー ウィンドウの幅が縮小された場合 (または最初から小さい場合) に下にスライドさせることです。 '水平スクロール バーがなく、ステータス バーの左右の部分が中央のステータス バーの下に移動してもかまいません (ブラウザー ウィンドウの幅が 1600 未満の場合) -

どうもありがとう - みんなの助けに感謝します

4

2 に答える 2

0

フッターをページの中央に配置しながら、ページの下部にフッターを配置しようとしています。http://www.cssstickyfooter.com/using-sticky-footer-code.htmlを ご覧ください。例に従って、フッター内に幅を指定し、margin:0 を中央に指定してコンテナーを配置できます。

<div id="wrap">
  <div id="header"> </div>
  <div id="main"> </div>
</div>

<div id="footer">
  <div id="nav2"></div>
</div>
于 2012-04-26T02:54:22.290 に答える
0

私は非常に単純な解決策を見つけました。また、私の単純な解決策が最初はうまくいかなかった理由もわかりました

まず、持っていないことに気づきました。

次に、1000 ピクセルを超える左右の部分の背景画像を中央に作成しました ...

3番目に、divの画像を使用して、中央の1000ピクセルを表しました-

これは、下部に中央揃えのフッターを取得するために必要なすべてです。

  1. 1000 ピクセルのセンター ピース
  2. 左に 200 ピクセル、右に 200 ピクセルの「塗りつぶし」部分
  3. ページの一番下に移動

フッター

{

    background-image:url(images/footerol.jpg);
    background-repeat:no-repeat;
    background-position:center;
    text-align: center;
    padding: 0px;
    width: 100%;
    height:40px;
    position: absolute;
    bottom:0px;
    z-index: 2; 
    vertical-align:bottom;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
于 2012-04-26T15:28:58.840 に答える