-3

スライスを使用して、PhotoshopデザインからDreamweaverにdivタグをエクスポートし、ヘッドからcssを抽出して、スタイルシートを作成しました。ページ内のすべてのdivタグには、それぞれに絶対位置が設定されています。すべてのコンテンツをページの中央に配置するために考えられるすべてのことを試しましたが、何も機能しませんでした。誰かがコードを見て、私が欠けているものを教えてもらえますか？

<HTML>


<html>

<head>

<title>Packet Access</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link href="css/style_sheet.css" rel="stylesheet" type="text/css" />


</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; 
margin-left: 0px; margin-right: 0px`enter code here`;">
<div id="Table_01">
<div id="topper">
</div>
<div id="Topper-2">
</div>
<div id="search">
    <img src="images/search.png" width="133" height="19" alt="">
</div>
<div id="topper-side2"></div>
<div id="topper-side"></div>
<div id="Logo">
    <img src="images/Logo.png" width="254" height="37" alt="">
</div>
<div id="side-logo-right"></div>
<div id="under-search"></div>
<div id="index-09"></div>
<div id="navigation">
    <img src="images/navigation.png" width="457" height="20" alt="">
</div>
<div id="under-logo"></div>
<div id="under-navigation"></div>
<div id="divider">
    <img src="images/divider.jpg" width="1024" height="3" alt="">
</div>
<div id="bg-left">
    <img src="images/bg_left.jpg" width="131" height="147" alt="">
</div>
<div id="index-15">
    <img src="images/index_15.png" width="764" height="52" alt="">
</div>
<div id="bg-right">
    <img src="images/bg_right.jpg" width="129" height="147" alt="">
</div>
<div id="index-17">
    <img src="images/index_17.jpg" width="764" height="243" alt="">
</div>
<div id="index-18">
    <img src="images/index_18.jpg" width="130" height="519" alt="">
</div>
<div id="index-19">
    <img src="images/index_19.jpg" width="1" height="148" alt="">
</div>
<div id="index-20">
    <img src="images/index_20.jpg" width="1" height="148" alt="">
</div>
<div id="index-21">
    <img src="images/index_21.jpg" width="128" height="519" alt="">
</div>
<div id="index-22">
    <img src="images/index_22.png" width="766" height="43" alt="">
</div>
<div id="index-23">
    <img src="images/index_23.png" width="12" height="1" alt="">
</div>
<div id="OTT-box">
    <img src="images/OTT_box.jpg" width="242" height="99" alt="">
</div>
<div id="index-25">
    <img src="images/index_25.png" width="9" height="1" alt="">
</div>
<div id="XFP">
    <img src="images/XFP.jpg" width="242" height="99" alt="">
</div>
<div id="index-27">
    <img src="images/index_27.png" width="10" height="1" alt="">
</div>
<div id="Cache">
    <img src="images/Cache.jpg" width="242" height="99" alt="">
</div>
<div id="index-29">
    <img src="images/index_29.png" width="9" height="1" alt="">
</div>
<div id="index-30">
    <img src="images/index_30.jpg" width="12" height="327" alt="">
</div>
<div id="index-31">
    <img src="images/index_31.jpg" width="9" height="327" alt="">
</div>
<div id="index-32">
    <img src="images/index_32.jpg" width="10" height="327" alt="">
</div>
<div id="index-33">
    <img src="images/index_33.jpg" width="9" height="327" alt="">
</div>
<div id="index-34">
    <img src="images/index_34.png" width="242" height="81" alt="">
</div>
<div id="index-35">
    <img src="images/index_35.png" width="242" height="81" alt="">
</div>
<div id="index-36">
    <img src="images/index_36.png" width="242" height="81" alt="">
</div>
<div id="index-37">
    <img src="images/index_37.jpg" width="242" height="148" alt="">
</div>
<div id="index-38">
    <img src="images/index_38.jpg" width="242" height="148" alt="">
</div>
<div id="index-39">
    <img src="images/index_39.jpg" width="242" height="148" alt="">
</div>
<div id="footer">Copyright © 2012 Packet Access</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>



<!--The CSS is below-->

<CSS>


@charset "utf-8";


*{  
   margin:0;  
   padding:0;  

}  




.body {
background-color: #000;
text-align:center; /*For IE6 Shenanigans*/

}


#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;

}


#topper {
position:absolute;
left:0px;
top:0px;
width:1024px;
height:10px;
background-color:#000000;

}


#Topper-2 {
position:absolute;
left:0px;
top:10px;
width:763px;
height:6px;
background-color:#000000;

}


#search {
position:absolute;
left:763px;
top:10px;
width:133px;
height:19px;
background-color:#000000;

}


#topper-side2 {
position:absolute;
left:896px;
top:10px;
width:128px;
height:59px;
background-color:#000000;

}


#topper-side {
position:absolute;
left:0px;
top:16px;
width:130px;
height:53px;
background-color:#000000;

}


#Logo {
position:absolute;
left:130px;
top:16px;
width:254px;
height:37px;

}


#side-logo-right {
position:absolute;
left:384px;
top:16px;
width:379px;
height:26px;
background-color:#000000;

}


#under-search {
position:absolute;
left:763px;
top:29px;
width:133px;
height:13px;
background-color:#000000;

}


#index-09 {
position: absolute;
left: 384px;
top: 42px;
width: 55px;
height: 27px;
background-color: #000;

}


#navigation {
position:absolute;
left:439px;
top:42px;
width:457px;
height:20px;
background-color:#000000;

}


#under-logo {
position:absolute;
left:130px;
top:53px;
width:254px;
height:16px;
background-color:#000000;

}


#under-navigation {
position:absolute;
left:439px;
top:62px;
width:457px;
height:7px;
background-color:#000000;

}


#divider {
position:absolute;
left:0px;
top:69px;
width:1024px;
height:3px;
background-color:#000000;

}



#bg-left {
position:absolute;
left:0px;
top:72px;
width:131px;
height:147px;

}


#index-15 {
position:absolute;
left:131px;
top:72px;
width:764px;
height:52px;

}


#bg-right {
position:absolute;
left:895px;
top:72px;
width:129px;
height:147px;

}


#index-17 {
position:absolute;
left:131px;
top:124px;
width:764px;
height:243px;

}


#index-18 {
position:absolute;
left:0px;
top:219px;
width:130px;
height:519px;

}


#index-19 {
position:absolute;
left:130px;
top:219px;
width:1px;
height:148px;

}


#index-20 {
position:absolute;
left:895px;
top:219px;
width:1px;
height:148px;

}


#index-21 {
position:absolute;
left:896px;
top:219px;
width:128px;
height:519px;

}


#index-22 {
position:absolute;
left:130px;
top:367px;
width:766px;
height:43px;

}


#index-23 {
position:absolute;
left:130px;
top:410px;
width:12px;
height:1px;

}


#OTT-box {
position:absolute;
left:142px;
top:410px;
width:242px;
height:99px;

}


#index-25 {
position:absolute;
left:384px;
top:410px;
width:9px;
height:1px;

}


#XFP {
position:absolute;
left:393px;
top:410px;
width:242px;
height:99px;

}


#index-27 {
position:absolute;
left:635px;
top:410px;
width:10px;
height:1px;

}


#Cache {
position:absolute;
left:645px;
top:410px;
width:242px;
height:99px;

}


#index-29 {
position:absolute;
left:887px;
top:410px;
width:9px;
height:1px;

}


#index-30 {
position:absolute;
left:130px;
top:411px;
width:12px;
height:327px;

}


#index-31 {
position:absolute;
left:384px;
top:411px;
width:9px;
height:327px;

}


#index-32 {
position:absolute;
left:635px;
top:411px;
width:10px;
height:327px;

}


#index-33 {
position:absolute;
left:887px;
top:411px;
width:9px;
height:327px;

}


#index-34 {
position:absolute;
left:142px;
top:509px;
width:242px;
height:81px;

}


#index-35 {
position:absolute;
left:393px;
top:509px;
width:242px;
height:81px;

}


#index-36 {
position:absolute;
left:645px;
top:509px;
width:242px;
height:81px;

}


#index-37 {
position:absolute;
left:142px;
top:590px;
width:242px;
height:148px;




#index-38 {
position:absolute;
left:393px;
top:590px;
width:242px;
height:148px;

}


#index-39 {
position:absolute;
left:645px;
top:590px;
width:242px;
height:148px;

}


#footer {
position: absolute;
left: 0px;
top: 738px;
width: 100%;
height: 21px;
background-color: #000000;
font-family: "Helvetica LT Std";
font-size: 14px;
color: #999;
text-decoration: none;
text-align: center;
padding-top: 3px;
padding-bottom: 2px;

}



</style>
4

1 に答える 1

0

すべてをページの中央に配置する方法に関する当面の質問に答えるには、次のように変更#Table_01します。

#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;
}

に：

#Table_01 {
margin: 0 auto;
text-align: center;
width: 1024px;
position: relative;
}
于 2013-03-15T17:17:12.767 に答える