我想弄清楚如何擺脫屏幕最大化時出現在網站左側和底部周圍的紅色背景。我認爲這是因爲我試圖在名爲「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>
你可以發佈相關的CSS? –
@AlexW我的歉意。我只是包含了相關的代碼。 – Jon
你有沒有試過這個:'html,body {margin:0px; padding:0px; ''?我可以看到的一個「常規」問題是您使用'px'值而不是可伸縮值,例如'%'s。你也可以嘗試使用一些'overflow:hidden' CSS來查看是否有幫助。 –