ブラウザの中央にページを作りたいというページに取り組んでいました。ズームインすると期待どおりに機能しますが、ズームアウトするとページが右にずれます。誰かが私が間違ったことを教えてもらえますか? ありがとう。
ズームアウトすると、次のようになります。
<html>
<head>
<title>Test page</title>
</head>
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
<body onload="init()";>
<!-- container panel-->
<div id="container">
<!-- header panel-->
<div class="header">sssss</div>
<div id="main">
<!-- left panel-->
<div class="leftpanel">sssss</div>
<div class="rightpanel">
<div class="toppanel">sssss</div>
<div class="content">sssss</div>
</div>
</div>
<!-- footer-->
<div class="footer">sssss</div>
</div>
</body>
</html>
また、これはcss部分です：
#bg1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #8888ff;
z-index: 1;
box-shadow: inset 0px 280px 60px 0px rgba(0,0,0,0.3);
}
#container {
position: relative;
z-index: 3;
width: 1000px;
margin: 0 auto 0 auto;
background: #ffffff;
box-shadow: 0px 15px 15px 5px #444444;
}
#main
{
position: relative;
padding: 60px 28px 0px 28px;
width: 1124px;
}
body
{
float: center;
text-align: center;
width: 1500px;
margin:0 auto;
background-color: 7777ff;
}
.leftpanel
{
width: 18%;
float: left;
padding: 10;
padding-top: 20;
margin-bottom: 40;
background: orange;
text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
box-shadow: 5px 5px 5px #888;
}
.rightpanel
{
position: relative;
width: 70%;
margin: 0 0 0 160px;
}
.toppanel
{
margin-left: 70px;
background-color: #fbbbb9;
padding: 20px;
text-shadow: 2px 2px 2px rgba(0,0,0,0.1);
box-shadow: 5px 5px 5px #888;
}
.content
{
margin-left: 70px;
padding-bottom: 50px;
background-color: white;
}
.box {
margin: 0 0 30px 0;
background-color: orange;
overflow: hidden;
}
.footer
{
padding: 40px 0 40px 0;
text-align: center;
color: white;
}