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

ก่อนอื่นผมใช้โปรแกรม 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>



รบกวนช่วยด้วยครับ แต๊งกิ้ว ^^
16 ส.ค. 2556 6 1,038

#1

อ้างอิงจาก ความคิดเห็น #1คำตอบอยู่ที่นี่เลย



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




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



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

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



หรือ http://www.goragod.com/knowledge/....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/....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
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^