Мой сайт можно посмотреть по адресу 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;
}