如何修復我的網站在不同尺寸和分辨率的屏幕上顯示的方式？

你可以看到我的網站http://www.taramenconi.byethost11.com/。我將它設計爲1024 x 768.我還注意到，在某些屏幕上，它看起來廣泛延伸...我故意創建背景以填充較大的瀏覽器，但我希望內容區域保持相同的大小。我該如何解決這個問題？如何修復我的網站在不同尺寸和分辨率的屏幕上顯示的方式？

這裏是我的CSS：

@font-face { 
font-family: 'MonaKoRegular'; 
src: url('monako-webfont.eot'); 
src: url('monako-webfont.eot?#iefix') format('embedded-opentype'), 
    url('monako-webfont.woff') format('woff'), 
    url('monako-webfont.ttf') format('truetype'), 
    url('monako-webfont.svg#MonaKoRegular') format('svg'); 
font-weight: normal; 
font-style: normal; 

} 
@font-face { 
    font-family: 'StMarieThin'; 
    src: url('stmarie-thin-webfont.eot'); 
    src: url('stmarie-thin-webfont.eot?#iefix') format('embedded-opentype'), 
     url('stmarie-thin-webfont.woff') format('woff'), 
     url('stmarie-thin-webfont.ttf') format('truetype'), 
     url('stmarie-thin-webfont.svg#StMarieThin') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 
body { 
    position: absolute; 
    width: 10000px; 
    overflow: hidden; 
    font-size: 14px; 
    color: #666; 
    margin: 0px; 
    padding: 0px; 
} 
p { 
    font-family: StMarieThin; 
    font-size: 18px; 
    font-weight: 600; 
    color: #666; 
    margin-top: 20px; 
    margin-right: 20px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
} 
.section { 
    float: left; 
    width: 1920px; 
    top: -10px; 
    height: 1080px; 
    overflow: hidden; 
} 
.content { 
    background-attachment: scroll; 
    background-image: url(contentbox.png); 
    background-repeat: no-repeat; 
    height: 653px; 
    width: 870px; 
    overflow: hidden; 
} 
.header { 
    height: 190px; 
    width: 730px; 
    padding-top: 50px; 
    padding-right: 70px; 
    padding-bottom: 0px; 
    padding-left: 70px; 
    overflow: hidden; 
} 
.logo { 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    height: 200px; 
    width: 400px; 
    clear: none; 
    float: left; 
} 
.logo img a { 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
} 
.body { 
    height: 353px; 
    width: 630px; 
    padding-top: 0px; 
    padding-right: 90px; 
    padding-bottom: 100px; 
    padding-left: 150px; 
    overflow: hidden; 
} 
.body img{ 
    -moz-box-shadow: 3px 3px 5px #888; 
    -webkit-box-shadow: 3px 3px 5px #888; 
    margin: 10px; 
    border: 2px solid #666; 
} 
#tagline_home { 
    color: #F00; 
    font-style: italic; 
    font-size: 20px; 
} 
#home_scrollbox { 
    position: absolute; 
    top: 267px; 
    height: 330px; 
    width: 630px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
#about_scrollbox { 
    position: absolute; 
    top: 267px; 
    height: 330px; 
    width: 630px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
#menu_scrollbox { 
    position: absolute; 
    top: 267px; 
    height: 330px; 
    width: 630px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
#daily_scrollbox { 
    position: absolute; 
    top: 267px; 
    height: 330px; 
    width: 630px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
#catering_scrollbox { 
    position: absolute; 
    top: 267px; 
    height: 330px; 
    width: 630px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 
.navigation { 
    height: 190px; 
    width: 180px; 
    padding-left: 140px; 
    clear: none; 
    float: right; 
    background-image: url(navdivider.png); 
    background-repeat: no-repeat; 
    background-position: 150px; 
    vertical-align: middle; 
    line-height: 140%; 
} 
.navigation ul { 
    font-family: MonaKoRegular; 
    font-size: 20px; 
    list-style-type: none; 
    line-height: 150%; 
} 
.navigation ul li a { 
    color: #666; 
    text-decoration: none; 
} 
.navigation ul li a:hover { 
    text-decoration: underline; 
} 
.navigation ul li a:current { 
    text-decoration:none; 
    color: #f00;  
} 
#about_scrollbox ul { 
    list-style-type: none; 
} 
ul { 
    line-height: normal; 
    margin-top: 0px; 
    margin-right: 20px; 
    margin-bottom: 0px; 
    margin-left: 20px; 
    padding-top: 0px; 
    padding-right: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 
h2 { 
    text-decoration: underline; 
    margin: 20px; 
} 
#home { 
    background-attachment: scroll; 
    background-image: url(home.png); 
    background-repeat: no-repeat; 
    background-position: left top; 
    height: 1080px; 
    width: 1920px; 
    padding: 0px; 
} 
#about { 
    background-attachment: scroll; 
    background-image: url(About.png); 
    background-repeat: no-repeat; 
    background-position: left top; 
    height: 1080px; 
    width: 1920px; 
    padding: 0px; 
} 
#menu { 
    background-attachment: scroll; 
    background-image: url(DailySpecials.jpg); 
    background-repeat: no-repeat; 
    background-position: left top; 
    height: 1080px; 
    width: 1920px; 
    padding: 0px; 
} 
#daily { 
    background-attachment: scroll; 
    background-image: url(Menu.png); 
    background-repeat: no-repeat; 
    background-position: left top; 
    height: 1080px; 
    width: 1920px; 
    padding: 0px; 
} 
#catering { 
    background-attachment: scroll; 
    background-image: url(Catering.jpg); 
    background-repeat: no-repeat; 
    background-position: left top; 
    height: 1080px; 
    width: 1920px; 
    padding: 0px; 
} 
::-webkit-scrollbar{ 
    width:10px; 
    height:10px; 
} 
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment { 
    height:30px; 
    display: block; 
    background-color:transparent; 
} 
::-webkit-scrollbar-track-piece { 
    background-color:#F00; 
    -webkit-border-radius: 6px; 
} 
::-webkit-scrollbar-thumb:vertical{ 
    height:50px; 
    background-color:#999; 
    -webkit-border-radius: 6px; 
} 
.nav { 
    margin-top: 20px; 
}

來源

2011-08-03 taramenconi

您的網站似乎在我的屏幕精細。我的顯示器是1680 x 1050。 – ReX357