0

ウェブサイト mrandmrsmagic.com をアップロードしましたが、最大化すると問題なく表示されますが、最小化すると半分しか表示されません (最大化するとスクロール バーが表示されるため、スクロール バーを取り除きました。 ）。サイト自体は、Photoshop でスライスしてから 5 つの異なる背景画像を使用しました (ゼロからサイトを構築してからしばらく経っているので、コーディングはおそらくかなり面倒です)。体。

#body {
width: 1024px;
height: 583px;
marin: 0;
padding: 0;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body_02.jpg) no-repeat left top;
}

#body2 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body2_02.jpg) no-repeat left top;
}

#body3 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body3_02.jpg) no-repeat left top;
}

#body4 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body4_02.jpg) no-repeat left top;
}

#body5 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body5_02.jpg)  no-repeat left top;
}

#body6 {
width: 1024px;
height: 583px;
position: relative;
left: 448px;
top: -128px;
background: url(../images/body6_02.jpg)
}

高さを取り除いて幅を100％にしてみましたが、改善されず、ほとんど最悪になりました。5つのdivを保持できるCSSを切り替える方法はありますか? 最初の div タグを 1 つだけ作成してから、body 用に 5 つの class タグを作成する必要があるかもしれません。それは可能でしょうか？ありとあらゆる助けをありがとう、ありがとう。

4

2 に答える 2

0

これらの画像をsの背景にすることによるメリットはまったくなく<div>、ポジショニングを使用することでその問題を悪化させている可能性があります。すべてを再コーディングせずに、「より良い」アプローチを次に示します。

CSS

<style>
    /* Make your main components all the same width, and center them within <body>. Their heights will expand as needed */
    #header, #cssmenu, #content { width:1024px; margin:0 auto }
    #cssmenu { ... } /* Looks like what you have will work fine */
    /* #body1/2/3/4....not needed */
</style>

HTML

<body>
    <div id="header">...</div>
    <div id="cssmenu">...</div>
    <!-- img elements exist for a reason :-) don't be scared -->
    <div id="content"><img src="body2.jpg"></div>
</body>
于 2012-09-20T16:43:38.190 に答える
0

うーん、ウェブサイトの構築について学ぶことはたくさんあります。最初に、それは良い努力です。あなたの問題は、すべてをピクセルの絶対値で配置しているため、画面のサイズに関係なく、常に左側に余白があることです。あなたがより良くできることすべてをあなたに話すのではなく、私はあなたにこれを差し上げます。

jsフィドル

そのレイアウトはあなたのものと同じですが、シンプルでミッドに配置されています。小さいので、例で見ることができます。さまざまなプロパティがレイアウトにどのように影響するかを学ぶために、プレイして壊して修正することをお勧めします。HTML と CSS のチュートリアルも探してください。

于 2012-09-20T16:34:08.607 に答える