2

画面を最大化したときに、ウェブサイトの左側と下部に赤い背景が表示されないようにする方法を見つけようとしています。「Find Us」という名前の4番目/最後のページに画像を重ねようとしているのが原因だと思います.これらの画像の合計幅は、ページに設定した最小幅である1400pxを超えています.

最小幅を増やすことが解決策になる可能性がありますが、多くのコンピューターがそれほど高い解像度で実行されていない場合、これは良い設計選択ではないと思います。理想的には、最小幅を 1100px まで下げたいと考えています。そうしようとすると、ページの下部にある赤い背景がさらに増え始めます。これは、より狭い領域に画像を詰め込もうとするためです。

最小幅を 1100px に減らしながら、ウェブサイトの左と下の境界線に沿って覗いている赤い背景を取り除く方法を考えています。

ウェブサイトへのリンク: http://www.sfu.ca/~jca41/stuph/it/website03/template.html

CSS:

.page {
    color: black; 
    width: 100%;
    height: 1100px;
    position: relative; }

#findUs .pageContent {
    width: 1400px;
    margin: 0 auto 0 auto; }

#findUs #man #contactInfo {
    margin: 195px 0 0 345px;
    width: 200px; }

#findUs #frame {
    width: 464px;
    height: 541px;
    float: left;
    position: relative;
    top: 130px;
    left: 190px;
    z-index: 90; }

#findUs #tassel {
    background: url(../img/findUs/tassel.png) no-repeat;
    width: 165px;
    height: 411px;
    float: left;
    position: relative;
    top: -330px;
    left: 20px;
    z-index: 110; }

#findUs #feedbackForm {
    position: relative;
    top: -1100px;
    left: -470px;
    width: 300px;
    float: left;
    z-index: 120; }

#findUs #cover {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 1100px;
    float: left;
    z-index: 105;
    background: url(../img/findUs/body.png) repeat; }

HTML:

<section id="findUs" class="page"> <!-- Last page -->
    <nav></nav>     
    <div class="pageContent">       
        <div id="man"><div id="contactInfo"><p class="infoHeading">Business Hours</p></div></div>       
        <div id="frame"><div id="googleMapCanvas"></div></div>
        <div id="tassel"></div>    
        <div id="feedbackForm"></div>           
    </div>      
    <div id="cover" class="hidden"></div>       
</section>
4

1 に答える 1

0

ボディ背景の赤は必要ですか？そうでない場合:

体 {
バックグラウンド:透明;
最小幅: 1400px;
}
于 2012-06-30T17:55:39.877 に答える