0
이것은 Stack Overflow에 대한 나의 첫 번째 질문이지만이 위대한 웹 사이트에서 내가 아는 모든 것을 배웠으므로 도움이 될 것으로 기대하고 있습니다. ...페이지 센터가 왜 정렬되지 않습니까?
나는 매우 간단합니다. 단순히 센터 정렬을 거부하는 홈페이지. 기본적으로 배경 이미지와 중간에있는 와우 슬라이더 이미지 슬라이더가있는 텍스트의 홀수 비트입니다 (무료 버전). 컨테이너 div (table_01), 본문, 별도 컨테이너 div (이제는 좌절로 삭제됨) 및 기타 여러 가지 사항에 0 마진을 설정하려고 시도했습니다. Div-align : 센터가 작동하지 않아 손가락이 찢어 질 때까지 약 해졌다.
<!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>
<title>house</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="homestyle.css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body>
<div id="Table_01">
<div id="home-01_">
<img id="home_01" src="images/home_01.png" width="255" height="194" alt="" />
</div>
<div id="home-02_">
<p> Your qualifications and whatnots can go in here, or if you'd prefer I can put a tagline like "All aspects of construction and landscaping tackled"....</p>
</div>
<div id="commentbar">
<p class="comslide">Scrolling comments will go here (they scroll every twenty seconds so that customers can see how great your buildings are....)</p> </div>
<div id="home-04_" class="topbar">
<a href="CHANGE THIS TO HOME LINK">Home</a></div>
<div id="home-05_" class="topbar">
<a href="CHANGE THIS TO SERVCIES LINK">Services</a>
</div>
<div id="home-06_">
<img id="home_06" src="images/home_06.png" width="2" height="70" alt="" />
</div>
<div id="home-07_" class="topbar">
<a href="CHANGE THIS TO GALLERY LINK">Gallery</a>
</div>
<div id="home-08_">
<img id="home_08" src="images/home_08.png" width="1" height="70" alt="" />
</div>
<div id="home-09_" class="topbar">
<a href="CHANGE THIS TO CONTACT LINK">Contact</a>
</div>
<div id="home-10_">
<img id="home_10" src="images/home_10.png" width="2" height="726" alt="" />
</div>
<div id="home-11_">
<img id="home_11" src="images/home_11.png" width="551" height="28" alt="" />
</div>
<div id="home-12_">
<img id="home_12" src="images/home_12.png" width="239" height="28" alt="" />
</div>
<div id="home-13_">
<img id="home_13" src="images/home_13.png" width="225" height="28" alt="" />
</div>
<div id="home-14_">
<img id="home_14" src="images/home_14.png" width="168" height="76" alt="" />
</div>
<div id="home-15_"><!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/raised_bed.jpg" alt="raised bed" title="raised bed" id="wows1_0"/></li>
<li><img src="data1/images/steps.jpg" alt="steps" title="steps" id="wows1_1"/></li>
<li><img src="data1/images/fence.jpg" alt="fence" title="fence" id="wows1_2"/></li>
<li><img src="data1/images/extension.jpg" alt="extension" title="extension" id="wows1_3"/></li>
<li><img src="data1/images/garden_wall.jpg" alt="garden_wall" title="garden_wall" id="wows1_4"/></li>
<li><img src="data1/images/wall.jpg" alt="wall" title="wall" id="wows1_5"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Raised Bed"><img src="data1/tooltips/raised_bed.jpg" alt="Raised Bed"/>1</a>
<a href="#" title="Steps and Paving"><img src="data1/tooltips/steps.jpg" alt="steps"/>2</a>
<a href="#" title="Fencing"><img src="data1/tooltips/fence.jpg" alt="fence"/>3</a>
<a href="#" title="Extensions"><img src="data1/tooltips/extension.jpg" alt="extension"/>4</a>
<a href="#" title="Garden walls"><img src="data1/tooltips/garden_wall.jpg" alt="garden_wall"/>5</a>
<a href="#" title="and all forms of Bricklaying"><img src="data1/tooltips/wall.jpg" alt="wall"/>6</a>
</div></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section --></div>
<div id="home-16_">
<img id="home_16" src="images/home_16.png" width="168" height="76" alt="" />
</div>
<div id="home-17_">
<img id="home_17" src="images/home_17.png" width="57" height="580" alt="" />
</div>
<div id="home-18_">
<img id="home_18" src="images/home_18.png" width="56" height="57" alt="" />
</div>
<div id="home-19_">
<img id="home_19" src="images/home_19.png" width="55" height="184" alt="" />
</div>
<div id="home-20_">
<img id="home_20" src="images/home_20.png" width="54" height="184" alt="" />
</div>
<div id="home-21_">
<img id="home_21" src="images/home_21.png" width="60" height="57" alt="" />
</div>
<div id="home-22_">
<img id="home_22" src="images/home_22.png" width="54" height="580" alt="" />
</div>
<div id="home-23_">
<img id="home_23" src="images/home_23.png" width="56" height="127" alt="" />
</div>
<div id="home-24_">
<img id="home_24" src="images/home_24.png" width="60" height="127" alt="" />
</div>
<div id="home-25_">
<img id="home_25" src="images/home_25.png" width="682" height="47" alt="" />
</div>
<div id="home-26_">
<img id="home_26" src="images/home_26.png" width="28" height="396" alt="" />
</div>
<div id="home-27_"><p>This box will contain an "add a comment" thing. Every time someone adds a comment you will get an email asking you if you want it to appear on the top bit of the page.</p></div>
<div id="home-28_">
<img id="home_28" src="images/home_28.png" width="184" height="220" alt="" />
</div>
<div id="home-29_"><p> And this one is your basic "About me" box. Please write up a basic description of who you are and the services you offer so that I can stick it in here. For the record, the two little trucks link to your facebook and twitter accounts (I'll make you an LRC account for both) and if users click the envelope in the middle then their mail program will pop up with your email adress already in the send to box. There's a white outline on them atm but that'll be gone as soon as my photoshop works properly again.</p> </div>
<div id="home-30_">
<img id="home_30" src="images/home_30.png" width="29" height="296" alt="" />
</div>
<div id="home-31_">
<img id="home_31" src="images/home_31.png" width="298" height="211" alt="" />
</div>
<div id="home-32_">
<img id="home_32" src="images/home_32.png" width="42" height="176" alt="" />
</div>
<div id="home-33_">
<a href="mailto:">
<img id="mail" src="images/Email.png" width="145" height="158" alt="Click to email" /></a>
</div>
<div id="home-34_">
<img id="home_34" src="images/home_34.png" width="365" height="35" alt="" />
</div>
<div id="home-35_">
<img id="home_35" src="images/home_35.png" width="365" height="41" alt="" />
</div>
<div id="home-36_">
<img id="home_36" src="images/home_36.png" width="110" height="100" alt="" />
</div>
<div id="home-37_">
<a href="CHANGE THIS TO FB ADDRESS" target="blank">
<img src="images/truck_37.png" width="109" height="73" alt="" /></a>
</div>
<div id="home-38_">
<img id="home_38" src="images/home_38.png" width="59" height="100" alt="" />
</div>
<div id="home-39_">
<a href="CHANGE THIS TO FB ADDRESS" target="blank">
<img src="images/truck_39.png" alt="" />
</a>
</div>
<div id="home-40_">
<img id="home_40" src="images/home_40.png" width="116" height="29" alt="" />
</div>
<div id="home-41_">
<img id="home_41" src="images/home_41.png" width="109" height="27" alt="" />
</div>
<div id="home-42_">
<img id="home_42" src="images/home_42.png" width="145" height="18" alt="" />
</div>
</div id="Table_01">
<!-- End Save for Web Slices -->
</body>
</html>
및 스타일 시트는 다음과 같습니다 : 전체 페이지의 HTML은 다음과 같습니다
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Roboto Condensed', sans-serif;
}
a:link {
color:#db6748;
text-decoration:none;
font-size:18px
font-family: 'Roboto Condensed', sans-serif;
}
a:visited {
color:#8f3821;
}
#Table_01 {
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:1020px;
height:920px;
z-index:1;
margin:0 auto;
padding:0;
text-align:center;
}
#home-01_ {
position:absolute;
left:0px;
top:0px;
width:255px;
height:194px;
}
#home-02_ {
position:absolute;
left:255px;
top:0px;
width:765px;
height:99px;
background-image:url(images/home_02.png);
}
#commentbar {
position:absolute;
left:255px;
top:99px;
width:765px;
height:95px;
border-top:dotted;
border-color:#666;
background-image:url(images/home_03.png);
}
#home-04_ {
position:absolute;
left:0px;
top:194px;
width:269px;
height:42px;
background-image:url(images/home_04.png);
}
.topbar {
font-size:24px;
border-top:dotted;
border-color:#333;
}
.comslide{
position:absolute;
vertical-align:middle;;
color:#CCC;
}
.topbar a:link {color:#d5d5d5;}
.topbar a:hover { color:#999;}
#home-05_ {
position:absolute;
left:269px;
top:194px;
width:282px;
height:42px;
background-image:url(images/home_05.png);
}
#home-06_ {
position:absolute;
left:551px;
top:194px;
width:2px;
height:70px;
}
#home-07_ {
position:absolute;
left:553px;
top:194px;
width:239px;
height:42px;
background-image:url(images/home_07.png)
}
#home-08_ {
position:absolute;
left:792px;
top:194px;
width:1px;
height:70px;
}
#home-09_ {
position:absolute;
left:793px;
top:194px;
width:225px;
height:42px;
background-image:url(images/home_09.png)
}
#home-10_ {
position:absolute;
left:1018px;
top:194px;
width:2px;
height:726px;
}
#home-11_ {
position:absolute;
left:0px;
top:236px;
width:551px;
height:28px;
}
#home-12_ {
position:absolute;
left:553px;
top:236px;
width:239px;
height:28px;
}
#home-13_ {
position:absolute;
left:793px;
top:236px;
width:225px;
height:28px;
}
#home-14_ {
position:absolute;
left:0px;
top:264px;
width:168px;
height:76px;
}
#home-15_ {
position:absolute;
left:168px;
top:264px;
width:682px;
height:213px;
z-index:1;
background-image:url(images/home_15.png);
}
#home-16_ {
position:absolute;
left:850px;
top:264px;
width:168px;
height:76px;
}
#home-17_ {
position:absolute;
left:0px;
top:340px;
width:57px;
height:580px;
}
#home-18_ {
position:absolute;
left:57px;
top:340px;
width:56px;
height:57px;
}
#home-19_ {
position:absolute;
left:113px;
top:340px;
width:55px;
height:184px;
}
#home-20_ {
position:absolute;
left:850px;
top:340px;
width:54px;
height:184px;
}
#home-21_ {
position:absolute;
left:904px;
top:340px;
width:60px;
height:57px;
}
#home-22_ {
position:absolute;
left:964px;
top:340px;
width:54px;
height:580px;
}
#home-23_ {
position:absolute;
left:57px;
top:397px;
width:56px;
height:127px;
}
#home-24_ {
position:absolute;
left:904px;
top:397px;
width:60px;
height:127px;
}
#home-25_ {
position:absolute;
left:168px;
top:477px;
width:682px;
height:47px;
}
#home-26_ {
position:absolute;
left:57px;
top:524px;
width:28px;
height:396px;
}
#home-27_ {
position:absolute;
left:85px;
top:524px;
width:298px;
height:185px;
background-image:url(images/home_27.png);
}
#home-28_ {
position:absolute;
left:383px;
top:524px;
width:184px;
height:220px;
}
#home-29_ {
position: absolute;
left: 568px;
top: 525px;
width: 368px;
height: 220px;
background-image:url(images/home_29.png);
}
#home-30_ {
position:absolute;
left:935px;
top:524px;
width:29px;
height:296px;
}
#home-31_ {
position:absolute;
left:85px;
top:709px;
width:298px;
height:211px;
}
#home-32_ {
position:absolute;
left:383px;
top:744px;
width:42px;
height:176px;
}
#home-33_ {
position:absolute;
left:425px;
top:744px;
width:145px;
height:158px;
background-image:url(images/home_33.png)
}
#home-34_ {
position:absolute;
left:570px;
top:744px;
width:365px;
height:35px;
}
#home-35_ {
position:absolute;
left:570px;
top:779px;
width:365px;
height:41px;
}
#home-36_ {
position:absolute;
left:570px;
top:820px;
width:110px;
height:100px;
}
#home-37_ {
position:absolute;
left:680px;
top:820px;
width:109px;
height:73px;
background-image:url(images/home_37.png);
}
#home-38_ {
position:absolute;
left:789px;
top:820px;
width:59px;
height:100px;
}
#home-39_ {
position:absolute;
left:848px;
top:820px;
width:116px;
height:71px;
background-image:url(images/home_39.png);
}
#home-40_ {
position:absolute;
left:848px;
top:891px;
width:116px;
height:29px;
}
#home-41_ {
position:absolute;
left:680px;
top:893px;
width:109px;
height:27px;
}
#home-42_ {
position:absolute;
left:425px;
top:902px;
width:145px;
height:18px;
}
#higher {
position:absolute;
top: 0px;
width:682px;
height:213px;
}
#page-01_ {
position:absolute;
left:0px;
top:0px;
width:255px;
height:194px;
}
#page-02_ {
position:absolute;
left:255px;
top:0px;
width:765px;
height:99px;
}
#page-03_ {
position:absolute;
left:255px;
top:99px;
width:765px;
height:95px;
}
#page-04_ {
position:absolute;
left:0px;
top:194px;
width:269px;
height:42px;
}
#page-05_ {
position:absolute;
left:269px;
top:194px;
width:282px;
height:42px;
}
#page-06_ {
position:absolute;
left:551px;
top:194px;
width:2px;
height:75px;
}
#page-07_ {
position:absolute;
left:553px;
top:194px;
width:239px;
height:42px;
}
#page-08_ {
position:absolute;
left:792px;
top:194px;
width:1px;
height:75px;
}
#page-09_ {
position:absolute;
left:793px;
top:194px;
width:225px;
height:42px;
}
#page-10_ {
position:absolute;
left:1018px;
top:194px;
width:2px;
height:726px;
}
#page-11_ {
position:absolute;
left:0px;
top:236px;
width:551px;
height:33px;
}
#page-12_ {
position:absolute;
left:553px;
top:236px;
width:239px;
height:33px;
}
#page-13_ {
position:absolute;
left:793px;
top:236px;
width:225px;
height:33px;
}
#page-14_ {
position:absolute;
left:0px;
top:269px;
width:57px;
height:651px;
}
#page-15_ {
position:absolute;
left:57px;
top:269px;
width:907px;
height:455px;
}
#page-16_ {
position:absolute;
left:964px;
top:269px;
width:54px;
height:651px;
}
#page-17_ {
position:absolute;
left:57px;
top:724px;
width:907px;
height:20px;
}
#page-18_ {
position:absolute;
left:57px;
top:744px;
width:368px;
height:176px;
}
#Email_ {
position:absolute;
left:425px;
top:744px;
width:145px;
height:158px;
background-image:url(images/Emailbg.png);
}
#page-20_ {
position:absolute;
left:570px;
top:744px;
width:394px;
height:76px;
}
#page-21_ {
position:absolute;
left:570px;
top:820px;
width:110px;
height:100px;
}
#page-22_ {
position:absolute;
left:680px;
top:820px;
width:109px;
height:73px;
}
#page-23_ {
position:absolute;
left:789px;
top:820px;
width:59px;
height:100px;
}
#page-24_ {
position:absolute;
left:848px;
top:820px;
width:116px;
height:71px;
}
#page-25_ {
position:absolute;
left:848px;
top:891px;
width:116px;
height:29px;
}
#page-26_ {
position:absolute;
left:680px;
top:893px;
width:109px;
height:27px;
}
#page-27_ {
position:absolute;
left:425px;
top:902px;
width:145px;
height:18px;
}
다른 스타일 그냥 포맷 내가 링크를 해제하려고 한 slider- 페이지를 확인하려면 중심에 맞출 것이지만 기쁨은 없습니다. 어떤 아이디어? 필요한 경우 다른 스타일 시트의 코드를 추가하겠습니다.
감사
나이
이 거대한 코드는 문제를 명확하게 보여주는 페이지 구조의 최소한의 예제로 줄여야합니다. 그것을 바이올린에 넣으십시오. 여기에 시작이 있습니다. http://jsfiddle.net/wgpfT/ – isherwood
또한 절대 위치 요소의 긴 목록을 가지고 있다는 사실은 페이지 레이아웃에 대한 접근 방식이 나쁘다는 것을 나타내는 것처럼 보입니다. 대신 그리드 시스템 사용을 고려하십시오. – isherwood