您可以在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;
}
答案 0 :(得分:0)
您可以使用固定宽度div将所有内容放入其中,并将包含div的左右边距设置为auto
。这应该将你的固定宽度div保持在浏览器窗口的中间。
或者,您可以使用media queries
创建多种不同的样式表以适应不同的屏幕尺寸
答案 1 :(得分:0)
创建一个“包装器”固定宽度div,margin-right:auto
和margin-left:auto
包装所有元素。
如果您需要流畅的设计,则必须使用媒体查询:http://www.w3.org/TR/css3-mediaqueries/