小さな画面サイズで自分の Web ページを中央に配置するのに助けが必要です。私のサイトは、通常の幅 989 ピクセルでは問題ないように見えますが、縮小すると左に押し込まれ、右側に多くの空白ができます。これを修正するために多くの方法を試してきましたが、何もうまくいきません。
あとはあなた次第です。お役に立てれば幸いです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style media="screen" type="text/css">
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
min-width:989px;
margin:0;
padding:0;
}
#header{background:url(/images/header.png) no-repeat;
border:;
padding:50px 0px 50px 0px;
text-indent:-9999px;
width:100%;
background-size:cover;
}
#menu{background:url(/images/nav-slice.png) repeat-x;
border:;
width:100%;
background-size:100%;
padding-bottom:20px;
padding-top:15px;
-moz-box-shadow: 0px 2px 2px 0px #888;
-webkit-box-shadow: 0px 2px 2px 0px #888;
box-shadow: 0px 2px 2px 0px #888;
}
ul{padding:0;
margin:0;
overflow:hidden;
list-style-type:none;
}
li{
float:left;
display:inline-block;
padding-left:17%;/*70 divided by 800*/
padding-right:8%;
font-size:1em;
}
a.ali{text-decoration:none;
color: white;
padding-top:10px;
padding-bottom:0px;
text-align:center;
font-family:helvetica;
font-weight:bold;
font-size:1em;
}
a.ali:hover{color:blue;
}
#content{
padding:180px 0px 0px 0px;
float:left;
width:100%;
margin-top:20px;
margin-left:4.044%;/*40px*/
margin-right:2.022%;/*20px*/
margin-bottom:0px;
}
#footer{background:url(/images/footer-slice.png) repeat-x;
padding:15px 0px 15px 0px;
border:;
float:left;
width:100%;
margin-top:-40px;
}
a.tou{
font-family:arial;
text-size:10px;
color:white;
text-decoration:none;
}
a.tou:hover{
color:blue;
}
p{
font-family:arial;
text-size:10px;
color:white;
}
#wrapper{
margin-left:auto;
margin-right:auto;
width:80%;/*989px*/
max-width:80%;
min-width:989px;
-moz-box-shadow: 0px 0px 5px 5px #888;
-webkit-box-shadow: 0px 0px 5px 5px #888;
box-shadow: 0px 0px 5px 5px #888;
}
.clear {
clear:both;
}
.title{
font-family:myriad pro;
color:#2e4d9b;
position:relative;
bottom:180px;
right:350px;
}
.sales-page{
background:url(/images/sales-page.png) no-repeat;
float:left;
position:relative;
bottom:140px;
left:6%;
padding-top:426px;
width:100%;
max-width:100%;
margin-bottom:-100px;
clear:both;
}
.get-website-now{
background:url(/images/get-website-now.png) no-repeat;
padding-top:40px;
padding-bottom:40px;
padding-left:18.20%;/*180px*/
padding-right:18.20%;
float:left;
position:relative;
bottom:230px;
left:31%;
margin-top:0px;
clear:both;
}
.get-website-now:hover{
opacity:0.9;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Your Name And Logo</h1>
</div><!--end header-->
<div id="menu">
<ul>
<li><a class="ali" href="index.html">Home</a></li>
<li><a class="ali" href="products.php">Products</a></li>
<li><a class="ali" href="contact.php">Contact</a></li>
</ul>
</div><!--end menu-->
<div id="content">
<h1 class="title">Home</h1>
<div class="sales-page"></div>
<a href="products.php" class="get-website-now" style=""></a>
</div><!--end content-->
<div id="footer">
<p><a class="tou" target="_blank" href="/terms-and-conditions.html">Terms and Conditions</a> Five80Nine Web Design All Rights Reserved 2013</p>
</div><!--end footer-->
<div class="clear"></div>
</div><!--end wrapper-->
</body>
</html>
ここに私のサイトへのリンクがあります: http://webdesign.five80nine.com