크기와 해상도가 다른 화면에서 내 사이트가 표시되는 방식을 수정하려면 어떻게해야합니까?

내 사이트는 http://www.taramenconi.byethost11.com/입니다. 1024 x 768 크기로 디자인했습니다. 일부 화면에서는 넓게 펼쳐 보이는 것처럼 보입니다 ... 나는 더 큰 브라우저를 채울 배경을 의도적으로 만들었지 만 콘텐츠 영역을 같은 크기로 유지하고 싶습니다. 어떻게 해결할 수 있습니까?크기와 해상도가 다른 화면에서 내 사이트가 표시되는 방식을 수정하려면 어떻게해야합니까?

이

@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