ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Free Site => ข้อความที่เริ่มโดย: MyHarlotBrOker ที่ 05 ธันวาคม 2011, 00:14:41


หัวข้อ: จะเปลี่ยน table แบบนี้ไปเป็น div ต้องเขียนยังไงครับ
เริ่มหัวข้อโดย: MyHarlotBrOker ที่ 05 ธันวาคม 2011, 00:14:41
ตามนี้ครับ ผมติดอยู่ขั้นตอนนี้ ยังไปไม่ถึงไหนเลย อยากรู้แค่หลักการ วิธีคิดน่ะครับ พวกรายละเอียดอื่นๆ เช่นสี ไม่ต้องก็ได้ครับ จะสร้าง div ที่มี background image ด้านซ้ายและขวา ส่วนตรงกลางจะใส่เนื้อหาครับ

โค๊ด:
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10" background="images/shade_l.gif">&nbsp;</td>
    <td width="940" align="center" bgcolor="#FFFFFF"><img src="images/header.jpg" width="930" height="255" /></td>
    <td width="10" background="images/shade_r.gif">&nbsp;</td>
  </tr>
</table>

หัวข้อ: Re: จะเปลี่ยน table แบบนี้ไปเป็น div ต้องเขียนยังไงครับ
เริ่มหัวข้อโดย: kuznetsova ที่ 05 ธันวาคม 2011, 00:20:12
อ้างจาก: MyHarlotBrOker ที่ 05 ธันวาคม 2011, 00:14:41
ตามนี้ครับ ผมติดอยู่ขั้นตอนนี้ ยังไปไม่ถึงไหนเลย อยากรู้แค่หลักการ วิธีคิดน่ะครับ พวกรายละเอียดอื่นๆ เช่นสี ไม่ต้องก็ได้ครับ จะสร้าง div ที่มี background image ด้านซ้ายและขวา ส่วนตรงกลางจะใส่เนื้อหาครับ

โค๊ด:
<table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="10" background="images/shade_l.gif">&nbsp;</td>
    <td width="940" align="center" bgcolor="#FFFFFF"><img src="images/header.jpg" width="930" height="255" /></td>
    <td width="10" background="images/shade_r.gif">&nbsp;</td>
  </tr>
</table>

<div style="width: 960">
     <div style="width: 300 px; float:left; background-color:#ff00ff; ">
    </div>
     <div style="width: 300 px; float:left;  background-color:#ff00ff;>
    </div>
     <div style="width: 300 px; float:left;  background-color:#ff00ff;>
    </div>
</div>

กำหนด ขนาด แล้วใส่ float:left ใ้ห้มันชิดซ้ายกันอะ ถ้า clear:left แปลว่า มันจะไม่ชิดกับ element อื่น จะเด่น บรรดทัดใหม่

ประมาณนี้

หัวข้อ: Re: จะเปลี่ยน table แบบนี้ไปเป็น div ต้องเขียนยังไงครับ
เริ่มหัวข้อโดย: conner ที่ 05 ธันวาคม 2011, 00:29:00
<div style="width: 960px;">
     <div style="width: 10px; float:left; background-color:#ff00ff; ">
    </div>
     <div style="width: 940px; float:left;  background-color:#ff00ff;>
    </div>
     <div style="width: 10px; float:left;  background-color:#ff00ff;>
    </div>
    <div style="clear:both;"></div>
</div>

หรือ

<div style="width: 960px; background-color:#666;">
     <div style="width: 940px; margin:0 10px; height:255px; background-color:#ff00ff;>
    </div>
</div>

หัวข้อ: Re: จะเปลี่ยน table แบบนี้ไปเป็น div ต้องเขียนยังไงครับ
เริ่มหัวข้อโดย: guzzilar ที่ 05 ธันวาคม 2011, 00:36:08
มาเพิ่มเติมให้ เห็นจขกท บอกว่าอยากได้หลักการ+วิธีคิด

ลองคิดว่า Div มันเป็นกล่อง กล่องนึงครับ ที่มีลักษณะความกว้าง ยาว สีของกล่อง อะไรเรากำหนดได้ (propeties , width , height , background)

ทีนี้ คุณต้องการพื้นที่สำหรับเก็บเนื้อหาสามส่วน คุณก็ต้องสร้างขึ้นมา 3 กล่อง (3div) แล้วกำหนด propeties ขนาด ความสูง สี อะไรให้มัน เท่านั้นเองครับ

 :wanwan003:

หัวข้อ: Re: จะเปลี่ยน table แบบนี้ไปเป็น div ต้องเขียนยังไงครับ
เริ่มหัวข้อโดย: MyHarlotBrOker ที่ 05 ธันวาคม 2011, 00:54:43
เข้าบอร์ดได้ละ ขอบคุณทุกท่านมากๆ ครับ กระจ่างแล้ว ก่อนนี้ผมเขียนเป็นแต่ table น่ะครับ เลยต้องมาเรียนรู้อะไรใหม่ๆ เยอะเหมือนกัน

หัวข้อ: Re: จะเปลี่ยน table แบบนี้ไปเป็น div ต้องเขียนยังไงครับ
เริ่มหัวข้อโดย: Jig_Load ที่ 06 ธันวาคม 2011, 12:32:37
อ้างจาก: MyHarlotBrOker ที่ 05 ธันวาคม 2011, 00:54:43
เข้าบอร์ดได้ละ ขอบคุณทุกท่านมากๆ ครับ กระจ่างแล้ว ก่อนนี้ผมเขียนเป็นแต่ table น่ะครับ เลยต้องมาเรียนรู้อะไรใหม่ๆ เยอะเหมือนกัน

เราชอบ div มากๆ สะดวกดี ยัดตรงไหนก็ได้


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com