A-AA+then

พี่ครับ ผมพึ่งหัดทำเว็บไซต์อ่ะ ช่วยหน่อย ++

1,001
ก่อนอื่นผมใช้โปรแกรม Adobe dw cs5 ครับ

เรื่องการจัดหน้าเว็บอ่ะครับ ตอนผมรันหน้าเว็บ เสร็จแล้วผมลอง zoom เข้า-ออก ปรากฏว่าหน้าเว็บของผมมันไม่อยูกึ่งกลางอ่ะครับต้องทำไงหรอ

นี้โค๊คทั้งหมดน๊ครับ

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Index</title>
<style type="text/css">
#apDiv1 {
    position:absolute;
    left:956px;
    top:129px;
    width:176px;
    height:37px;
    z-index:1;
}
#apDiv2 {
    position:absolute;
    left:382px;
    top:697px;
    width:584px;
    height:382px;
    z-index:1;
}
#apDiv3 {
    position:absolute;
    left:386px;
    top:341px;
    width:392px;
    height:329px;
    z-index:1;
    overflow: auto;
    clip: rect(341,auto,auto,386);
}
body,td,th {
    color: #000;
}
#apDiv4 {
    position:absolute;
    left:auto;
    top:auto;
    width:229px;
    height:208px;
    z-index:1;
}
#apDiv5 {
    position:absolute;
    left:379px;
    top:341px;
    width:402px;
    height:331px;
    z-index:1;
}
#apDiv6 {
    position:absolute;
    left:527px;
    top:372px;
    width:378px;
    height:304px;
    z-index:1;
    background-color: #FF00FF;
}
#apDiv7 {
    position:absolute;
    left:300px;
    top:0px;
    width:800px;
    height:1200px;
    z-index:1;
}
#apDiv8 {
    position:absolute;
    left:300px;
    top:0px;
    width:800px;
    height:200px;
    z-index:2;
}
#apDiv9 {
    position:absolute;
    left:300px;
    top:278px;
    width:800px;
    height:45px;
    z-index:3;
}
#apDiv10 {
    position:absolute;
    left:300px;
    top:324px;
    width:190px;
    height:479px;
    z-index:4;
}
#apDiv11 {
    position:absolute;
    left:490px;
    top:324px;
    width:424px;
    height:354px;
    z-index:5;
}
#apDiv12 {
    position:absolute;
    left:914px;
    top:323px;
    width:186px;
    height:354px;
    z-index:6;
}
#apDiv13 {
    position:absolute;
    left:491px;
    top:677px;
    width:609px;
    height:386px;
    z-index:7;
}
#apDiv14 {
    position:absolute;
    left:300px;
    top:802px;
    width:190px;
    height:284px;
    z-index:8;
}
#apDiv15 {
    position:absolute;
    left:300px;
    top:1086px;
    width:800px;
    height:114px;
    z-index:9;
}
#apDiv16 {
    position:absolute;
    left:490px;
    top:677px;
    width:610px;
    height:409px;
    z-index:10;
}
#apDiv17 {
    position:absolute;
    left:300px;
    top:323px;
    width:190px;
    height:479px;
    z-index:11;
}
#apDiv18 {
    position:absolute;
    left:300px;
    top:1px;
    width:800px;
    height:278px;
    z-index:12;
}
#apDiv19 {
    position:absolute;
    left:514px;
    top:348px;
    width:373px;
    height:297px;
    z-index:13;
    background-color: #FF00FF;
}
#apDiv20 {
    position:absolute;
    left:390px;
    top:359px;
    width:80px;
    height:30px;
    z-index:13;
    text-align: center;
}
#apDiv21 {
    position:absolute;
    left:390px;
    top:406px;
    width:80px;
    height:30px;
    z-index:14;
    text-align: left;
}
#apDiv22 {
    position:absolute;
    left:390px;
    top:451px;
    width:80px;
    height:30px;
    z-index:15;
    text-align: left;
}
#apDiv23 {
    position:absolute;
    left:390px;
    top:499px;
    width:80px;
    height:30px;
    z-index:16;
    text-align: left;
}
#apDiv24 {
    position:absolute;
    left:390px;
    top:554px;
    width:80px;
    height:30px;
    z-index:17;
    text-align: left;
}
#apDiv25 {
    position:absolute;
    left:390px;
    top:606px;
    width:80px;
    height:30px;
    z-index:18;
    text-align: left;
}
#apDiv26 {
    position:absolute;
    left:390px;
    top:657px;
    width:80px;
    height:30px;
    z-index:19;
    text-align: left;
}
#apDiv27 {
    position:absolute;
    left:390px;
    top:708px;
    width:80px;
    height:30px;
    z-index:20;
    text-align: left;
}
#apDiv28 {
    position:absolute;
    left:389px;
    top:756px;
    width:92px;
    height:30px;
    z-index:21;
    text-align: left;
}
#apDiv20 {
    text-align: left;
    color: #FFF;
}
#apDiv20 {
    color: #000;
}
#apDiv29 {
    position:absolute;
    left:315px;
    top:291px;
    width:775px;
    height:22px;
    z-index:27;
    color: #F0F;
}
#apDiv29 marquee {
    font-weight: bold;
}
#apDiv29 marquee {
    font-style: italic;
}
#apDiv29 marquee {
    color: #FF0066;
}
#apDiv30 {
    position:absolute;
    left:934px;
    top:349px;
    width:144px;
    height:67px;
    z-index:23;
}
#apDiv31 {
    position:absolute;
    left:929px;
    top:442px;
    width:154px;
    height:214px;
    z-index:24;
}
#apDiv32 {
    position:absolute;
    left:504px;
    top:1160px;
    width:415px;
    height:23px;
    z-index:25;
}
body {
    background-image: url(Pictures/jb01zz/030_300dpi_4400x3938.jpg);
    background-repeat: no-repeat;
}
#apDiv33 {
    position:absolute;
    left:300px;
    top:279px;
    width:800px;
    height:45px;
    z-index:26;
}
#apDiv34 {
    position:absolute;
    left:914px;
    top:324px;
    width:186px;
    height:354px;
    z-index:28;
}
#apDiv35 {
    position:absolute;
    left:490px;
    top:678px;
    width:610px;
    height:409px;
    z-index:29;
}
#apDiv36 {
    position:absolute;
    left:945px;
    top:341px;
    width:122px;
    height:131px;
    z-index:30;
}
#apDiv37 {
    position:absolute;
    left:929px;
    top:476px;
    width:157px;
    height:191px;
    z-index:31;
}
body {
    background-image: url(Pictures/jb01zz/030_300dpi_4400x3938.jpg);
    background-repeat: no-repeat;

<style type='text/css'>
}
a:link {color: #FFFF00; text-decoration: none}
a:visited {color: #33FF99; text-decoration: none}
a:hover {color: #FF99FF; text-decoration: none}
#apDiv38 {
    position:absolute;
    left:311px;
    top:11px;
    width:18px;
    height:18px;
    z-index:32;
}
</style>

<script src="Web/Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body topmargin="0">
<div id="apDiv7"></div>
<div id="apDiv11"><img src="Pic/images/web_04.gif" width="424" height="354" /></div>
<div id="apDiv14"><img src="Pic/images/web_07.jpg" alt="" width="190" height="284" /></div>
<div id="apDiv15"><img src="Pic/images/web_08.gif" alt="" width="800" height="114" /></div>
<div id="apDiv17"><img src="Pic/images/web_03.gif" width="190" height="479" /></div>
<div id="apDiv18"><img src="Pic/images/web_01.gif" width="800" height="278" /></div>
<div id="apDiv20">
<a href="Web/Login.html"><strong>ล็อคอิน </strong></a></div>
<div id="apDiv21"><a href="Web/Index.html"><strong>หน้าแรก</strong></a></div>
<div id="apDiv22"><a href="Web/History.html"><strong>ประวัติ</strong></a></div>
<div id="apDiv23"><a href="Web/Data.html"><strong>ข้อมูล</strong></a></div>
<div id="apDiv24"><a href="Web/Workings.html"><strong>ผลงาน</strong></a></div>
<div id="apDiv25"><a href="Web/Album.html"><strong>อัลบั้มรูป</strong></a></div>
<div id="apDiv26"><a href="Web/Contact.html"><strong>ติดต่อ</strong></a></div>
<div id="apDiv27"><a href="Web/Email.html"><strong>อีเมล</strong></a></div>
<div id="apDiv28"><a href="Web/Learning.html"><strong>ความรู้ทั่วไป</strong></a></div>
<div id="apDiv29">
  <marquee>
  Welcome to At Graphic House @ Muang Ranong Thailand 
  </marquee>
</div>
<div id="apDiv32">All contents © copyright 2007 At Graphic House. All right reserved.</div>
<div id="apDiv33"><img src="Pic/images/web_02.gif" width="800" height="45" /></div>
<div id="apDiv34"><img src="Pic/images/web_05.gif" width="186" height="354" /></div>
<div id="apDiv35"><img src="Pic/images/web_06.gif" width="610" height="409" /></div>
<div id="apDiv36"><embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-13.swf width=120 height=131 wmode=transparent type=application/x-shockwave-flash></embed></div>
<div id="apDiv37">
  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="156" height="189">
    <param name="movie" value="Pic/11.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="Web/Scripts/expressInstall.swf" />
    <object type="application/x-shockwave-flash" data="Pic/11.swf" width="156" height="189">
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="Web/Scripts/expressInstall.swf" />
      <div>
      </div>
    </object>
  </object>
</div>
<div id="apDiv38"><img src="Pic/Icon/facebook.gif" width="18" height="18" /></div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>

</body>
</html>

รบกวนช่วยด้วยครับ แต๊งกิ้ว ^^

6 ความคิดเห็น

1

อ้างจากคำตอบที่ #1คำตอบอยู่ที่นี่เลย

http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/


โทดน๊ครับ รบกวนพี่ช่วยแก้ไห้หน่อยสิ ผมไม่เก่งอังกฤษ 

ขอบพระคุณอย่างสูง
2

555++ จะอ่านอังกฤษไปทำไมครับ ลองมองหาตัวอย่างที่ต้องการในนั้น แล้ว เอาโค้ดเขามาใช้เลย หรือลองทำตามตัวอย่างเขาก่อน พอเข้าใจค่อยเอามาปรับใช้กับของเรา

หรือ http://www.goragod.com/knowledge/%E0%B9%80%E0%B8%97%E0%B8%84%E0%B8%99%E0%B8%B4%E0%B8%84%E0%B8%81%E0%B8%B2%E0%B8%A3%20%E0%B8%A7%E0%B8%B2%E0%B8%87%E0%B8%81%E0%B8%A3%E0%B8%AD%E0%B8%9A%E0%B8%81%E0%B8%A5%E0%B8%B2%E0%B8%87%E0%B8%A7%E0%B8%B4%E0%B8%99%E0%B9%82%E0%B8%94%E0%B8%A7%E0%B8%AA%E0%B9%8C%E0%B9%80%E0%B8%AA%E0%B8%A1%E0%B8%AD.html?q=div+%E0%B8%81%E0%B8%A5%E0%B8%B2%E0%B8%87%E0%B8%88%E0%B8%AD

หมายเหตุ ผมก้ไม่รู้หรอกนะว่าที่คุณต้องการ ต้องการแบบไหน แต่ในเว็บตัวอย่างที่ให้ไปน่าจะกรอบคลุมทุกความต้องการแล้ว

 
3

อ้างจากคำตอบที่ #3555++ จะอ่านอังกฤษไปทำไมครับ ลองมองหาตัวอย่างที่ต้องการในนั้น แล้ว เอาโค้ดเขามาใช้เลย หรือลองทำตามตัวอย่างเขาก่อน พอเข้าใจค่อยเอามาปรับใช้กับของเรา

หรือ http://www.goragod.com/knowledge/%E0%B9%80%E0%B8%97%E0%B8%84%E0%B8%99%E0%B8%B4%E0%B8%84%E0%B8%81%E0%B8%B2%E0%B8%A3%20%E0%B8%A7%E0%B8%B2%E0%B8%87%E0%B8%81%E0%B8%A3%E0%B8%AD%E0%B8%9A%E0%B8%81%E0%B8%A5%E0%B8%B2%E0%B8%87%E0%B8%A7%E0%B8%B4%E0%B8%99%E0%B9%82%E0%B8%94%E0%B8%A7%E0%B8%AA%E0%B9%8C%E0%B9%80%E0%B8%AA%E0%B8%A1%E0%B8%AD.html?q=div+%E0%B8%81%E0%B8%A5%E0%B8%B2%E0%B8%87%E0%B8%88%E0%B8%AD

หมายเหตุ ผมก้ไม่รู้หรอกนะว่าที่คุณต้องการ ต้องการแบบไหน แต่ในเว็บตัวอย่างที่ให้ไปน่าจะกรอบคลุมทุกความต้องการแล้ว

 

ปัญหาของผมคือ กำหนดงานอยู่กึ่งกลางได้แล้วแต่พอ ไปเปิดกับเครื่องอื่นๆแล้วอ่ะ เว็บมันดันไปอยู่ด้านซ้านอ่ะ ไม่อยู่กึ่งกลาง ผมเลยนั่ง งง อยู่เนี้ย

ขอบคุณครับ
4

ลืมไป โดยเฉพาะตอนที่เรา ย่อ-ขยาย หน้าเว็บเราอ่ะ มันจะไม่ย่อ-ขยาย ตามกึ่งกลาง แต่มันจะย่อขยายไปทางด้านซ้าน รึ ขวาแทนครับ
5

ตอบเอาจริงๆนะ....คำตอบไม่ค่อยน่าฟังเท่าไร

Layout ผิดทั้งหมดเลยครับ เป็นการออกแบบที่ไม่ถูกต้องอย่างมาก ไม่แนะนำให้ใช้วิธีนี้เลยครับ เพราะมันจะมั่วเอามากๆ

คำแนะนำ

ผมแนะนำให้ลบทิ้งและเริ่มต้นใหม่ จะง่ายกว่าแก้ และถึงแก้ ก็มีความเป็นไปได้น้อยมากที่จะสำเร็จ การออกแบบลองเริ่มออกแบบจากโครงก่อน แล้วค่อยเข้าหาชั้นในเป็นส่วนๆ สิ่งที่ต้องศึกษาเพิ่มเติมเป็นอย่างมากคือกระบวนการออกแบบ Layout ครับ โดยทีเราต้องเริ่มจาก Layout ก่อนแล้วค่อยเข้าไปยังเนื้อหา

ลองดูเว็บนี้นะครับ ถ้าสละเวลาศึกษาสักหน่อยอาจช่วยให้งานง่ายขึ้น http://gcss.goragod.com

 
6
^