2012-06-30 39 views
2

我想弄清楚如何擺脫屏幕最大化時出現在網站左側和底部周圍的紅色背景。我認爲這是因爲我試圖在名爲「Find Us」的第四頁/最後一頁上疊加圖像,並且這些圖像的組合寬度超過了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> 
+0

你可以發佈相關的CSS? –

+0

@AlexW我的歉意。我只是包含了相關的代碼。 – Jon

+0

你有沒有試過這個:'html,body {margin:0px; padding:0px; ''?我可以看到的一個「常規」問題是您使用'px'值而不是可伸縮值,例如'%'s。你也可以嘗試使用一些'overflow:hidden' CSS來查看是否有幫助。 –

回答

0

你需要身體背景紅色?如果不是:

 
body { 
background: transparent; 
min-width: 1400px; 
} 
+1

不,我不需要背景是紅色的,因爲最初的背景是黑色的,這就是爲什麼我一開始沒有注意到我的問題。我的問題是,我不想讓背景中的任何一點都看不見,同時將'min-width:1400px'縮小到'min-width:1100px'。 – Jon