พี่ครับ ผมพึ่งหัดทำเว็บไซต์อ่ะ ช่วยหน่อย ++
ก่อนอื่นผมใช้โปรแกรม 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>
รบกวนช่วยด้วยครับ แต๊งกิ้ว ^^
เรื่องการจัดหน้าเว็บอ่ะครับ ตอนผมรันหน้าเว็บ เสร็จแล้วผมลอง 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>
รบกวนช่วยด้วยครับ แต๊งกิ้ว ^^
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
โทดน๊ครับ รบกวนพี่ช่วยแก้ไห้หน่อยสิ ผมไม่เก่งอังกฤษ
ขอบพระคุณอย่างสูง
หรือ 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
หมายเหตุ ผมก้ไม่รู้หรอกนะว่าที่คุณต้องการ ต้องการแบบไหน แต่ในเว็บตัวอย่างที่ให้ไปน่าจะกรอบคลุมทุกความต้องการแล้ว
ปัญหาของผมคือ กำหนดงานอยู่กึ่งกลางได้แล้วแต่พอ ไปเปิดกับเครื่องอื่นๆแล้วอ่ะ เว็บมันดันไปอยู่ด้านซ้านอ่ะ ไม่อยู่กึ่งกลาง ผมเลยนั่ง งง อยู่เนี้ย
ขอบคุณครับ
Layout ผิดทั้งหมดเลยครับ เป็นการออกแบบที่ไม่ถูกต้องอย่างมาก ไม่แนะนำให้ใช้วิธีนี้เลยครับ เพราะมันจะมั่วเอามากๆ
คำแนะนำ
ผมแนะนำให้ลบทิ้งและเริ่มต้นใหม่ จะง่ายกว่าแก้ และถึงแก้ ก็มีความเป็นไปได้น้อยมากที่จะสำเร็จ การออกแบบลองเริ่มออกแบบจากโครงก่อน แล้วค่อยเข้าหาชั้นในเป็นส่วนๆ สิ่งที่ต้องศึกษาเพิ่มเติมเป็นอย่างมากคือกระบวนการออกแบบ Layout ครับ โดยทีเราต้องเริ่มจาก Layout ก่อนแล้วค่อยเข้าไปยังเนื้อหา
ลองดูเว็บนี้นะครับ ถ้าสละเวลาศึกษาสักหน่อยอาจช่วยให้งานง่ายขึ้น http://gcss.goragod.com