จัดดิฟ (div) ดั่งใจนึก

February 23, 2011

เขียน CSS ปวดหัวฮะ

แบบว่าอะไร ๆ ก็เคย Table (ตาราง) ๆ มาจนติดอยู่ในกรอบของตารางไปแล้ว แต่ไม่ได้หล่ะยุคนี้ใคร ๆ เขาก็ table less กันทั้งนั้น เขาว่าเว็บ 2.0 มันต้องสะอาด เรียบง่าย รวดเร็ว และดูดี ซึ่งการจะให้ได้มาซึ่งสี่อย่างนี้ ว่าไปแล้วไม่ง่ายเลยครับ

แต่เอานา ! มัวแ่ต่บ่น มันก็ไม่พัฒนาไปไหนอยู่ดี ก็ปรับเปลี่ยนมันซะ ไม่มีใครมาเปลี่ยนเราหรอก ถ้าไม่เริ่มด้วยตัวเอง ว่ามะ

วันนี้ได้เริ่มฝึกตั้งแต่พื้น ๆ CSS เลยก็ว่าได้

เอาที่เรื่องแรกที่ได้เรียนรู้วันนี้ละกัน

DIV อ่านว่า ดิฟ ดี๊ป หรืออะไรก็แล้วแ่ต่ แ่ต่มันคือหัวใจของการเริ่มต้นเขียน CSS เลย
div เขียนอยู่ในรูป <div>…</div> คล้าย tag ทั่วไป ทำงานเหมือนกล่อง (box) กล่องหนึ่ง

การทำงานจริง จะต้องมี div หลัก div รอง ซ้อน ๆ ทับ ๆ กันฮับ ไม่สามารถสร้างอันเดียวแล้วจบได้
จะจัด div อย่างไรให้ได้ดั่งใจนึก มาเริ่มกันครับ

จัด div

จากรูปนี้ ต้องการสร้าง 3 div มี div ใหญ่สีเขียน ครอบ div รูปด้านซ้าย และ div สีม่วงที่เป็นข้อความด้านขวา

ทำอย่างไร ?

เริ่มจากสร้าง CSS Class ขึ้นมา 3 คลาสนะครับ คือ item , pic และ info

ดังโค๊ดด้านล่างนี้

<style>
.item{width:310px; padding:10px; overflow:hidden; background-color:#9F0}
.item .pic{float:left; width:100px; background-color:#F93}
.item .info{float:right; width:200px; background-color:#C9F}
</style>

.item สำหรับกล่องใหญ่ (สีเขียว) ให้ขนาด width 310px และเว้นระย (padding) เป็น 10px ที่สำคัญอย่าลืมใส่  overflow:hidden ไม่งั้นกล่องเขียวจะไม่คลุมตามลงมาตามแนวตั้งนะครับ มันจะสูงแค่บรรทัดเดียว (นี่เป็นปัญหาปวดตับแรกที่เจอ ดังนั้นใ่ส่มันไว้ซะ overflow:hidden หน่ะ)

.pic อยู่ใน .item อีกที และกำหนดให้มัน float (ลอย) left นั่นคือลอยอยู่ด้านซ้ายภายใน class item ครับ และให้มีขนาด 100px

.info ก็เช่นกันอยู่ใน .item ให้มันลอยอยู่ด้านขวาเลยใส่ float:right ไป ขนาดก็ 200px

เรียบร้อยสำหรับ 3 คลาสเิริ่มต้น

ต่อมา ก็จับคลาสทั้งสามอันนี้เข้าไปใน div ดังโค๊ดด้านล่างนี้

<div class="item clearfix">
<div class="pic">รูปภาพ</div>
<div class="info">ข้อความ</div>
</div>

สังเกตุ div หลักใส่ clearfix ไปด้วยเพื่อให้แจ่มกับทุก browser ครับ
เท่านี้ก็เรียบร้อยหล่ะ สวยงาม เริ่มจากก้าวแรก ๆ แล้วค่อยต่อยอดออกไปครับ

จำนวนผู้อ่าน :17895

4 Comments. Leave new

ชอบบทความแนวนี้มากมายเลยฮับพี่ป่าน ปล่อยออกมาอีกเยอะๆนะคับ *0*

Like or Dislike: Thumb up 0 Thumb down 0

Reply

ครับเดี๋ยวหาเวลามาจัดให้เรื่อย ๆ ฮ๊าฟฟ

Like or Dislike: Thumb up 0 Thumb down 0

Reply
ติดกลางใจ Div ไม่กลางจอ | SamitKoyom.com :: Show and share online business
February 25, 2011 2:29 am

[...] คราวที่แล้วพูดเรื่อง จัด div ให้ได้ดั่งใจนึก ไปแล้ว [...]

Like or Dislike: Thumb up 0 Thumb down 0

Reply

ต้องหาเวลามาเรียนกับพี่ป่านซะแล้ว อิอิ
เรื่อง DIV นี่ปวดหัวมากเลยครับ ซ้อนกันไปมาได้ด้วย จัดเลย์เอาท์ลำบากมาก
เปรียบเทียบ ถ้าผมใช้ Div ต้องใช้เวลามากกว่า Table ประมาณ 10 เท่าได้มั้ง แฮะๆ

Like or Dislike: Thumb up 0 Thumb down 0

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>