ติดกลางใจ Div ไม่กลางจอ

February 25, 2011

สวัสดีครับผู้อ่านที่รัก… ทุกท่าน

ตอนที่แล้ว ผมเริ่มได้แบ่งปันเกี่ยวกับเรื่อง CSS และจริง ๆ ก็อยากเขียนเก็บไว้ทบทวนความลืม (เพราะจำไม่ได้ทุกที ที่ต้องใช้งาน) คราวที่แล้วพูดเรื่อง จัด div ให้ได้ดั่งใจนึก ไปแล้ว ซึ่งก็เป็นเรื่องพื้นฐานแรก ๆ ที่ต้องรู้เลย เกี่ยวกับการเขียนเว็บด้วย CSS นะ

วันนี้เอาเรื่องปวดตับ ต่อมาสำหรับมือใหม่ ที่เริ่มฝึก CSS จะต้องเจอแน่ ๆ เลยก็คือ เรื่องการ การจัดกลางของ div ซึ่งปกติคนที่ใช้ Table ทำเว็บมาก่อน มันก็หมูหล่ะนะ แค่สั่ง table ให้มัน align=”center” ก็กลางหน้าจอหล่ะง่ายโคตร

แต่กับ div ไม่อย่างนั้นดิ แม้เราจะใส่ค่า align เป็น center ให้มัน แต่มันก็ยังดื้อไม่กลางจอให้อยู่ดี

มือใหม่เลยได้พาล ปวดตับกันไปทุกรายแหละ งั้นมาดูวิธี จัด div กลางจอแบบง่าย ๆ จากประสบการณ์ลองผิด ลองผิด และลองผิด มาหลาย ๆ แบบของผมกันดีกว่า

จัด div กลางจอ

จากภาพด้านบนนี้ เราต้องการสร้าง div ขึ้นมาอันหนึ่ง ซึ่งมีขนาด 960px ซึ่งขนาดนี้เป็นมาตรฐานสำหรับจอความละเอียด 1024 จะออกมาดูดีทีเดียว เอาเป็นว่าขนาดนิยมหละกัน และแน่นอนเราต้องการให้อยู่กลางจอเป๊ะ ๆ ด้วย

ไม่ยาก เริ่มจาก เขียนคลาสไว้ใน style ขึ้นมาอันแรกก่อน

<style>
.wraper{
 margin-left: auto;
 margin-right: auto;
 width: 960px;
 background-color:#CCC;
 overflow:hidden;
}
</style>

ผมตั้งชื่อคลาสว่า .wraper นะครับ คลาสนี้ใช้สำหรับ div นอกสุดที่คลุม div อื่น ๆ ภายในทั้งหมดอีกที ส่วนใหญ่ div นี้ก็จะเอาไว้ใส่พวกพื้นหลังของเว็บไซต์ครับ

สังเกต การกำหนดค่าในคลาสนี้ หัวใจสำคัญเลยคือ
กำหนดขนาดให้เว็บคุณซะ จะเอาเท่าไหร่ ตัวอย่างนี้ก็ width:960px;
และต้องไม่ลืมกำหนด  margin-left และ margin-right ให้เป็น auto ซึ่งสองตัวนี้แหละที่ทำให้ div มันจัดกลางครับ
สุดท้ายเหมือนที่บอกตอนที่แล้ว ถ้าต้องการให้มันคลุมตลอดทั้งแนวตั้งก็ต้องไม่ลืมค่า overflow:hidden;
ส่วนพื้นหลังจะใส่เป็นสีหรือรูปภาพก็ว่ากันไป ในตัวอย่างนี้ใส่สีเทาให้มันครับ background-color:#CCC;

ต่อมาก็ลองเอาคลาสไปใส่ดูดังโค๊ดนี้ครับ

<div class="wraper"></div>

เท่านี้ครับรับรองมันเด้งไปอยู่กลางจอให้ทันที

ต่อมาประยุกต์ต่อหน่อย ถ้าต้องการเพิ่มส่วนของ header , content, footer ดังรูปด้านล่างนี้หล่ะ

จัด div กลางจอ

ก็ไม่ยากฮะ เราก็สร้าง class ขึ้นมาอีก 3 คลาส และ div อีก 3 div เอาไปใส่ไว้ข้างใน div สีเทานี้ครับ

สร้างคลาสใน style เพิ่มอีก 3 คลาสครับตั้งชื่อว่า .header, .content, .footer ครับ

<style>
.wraper{
 margin-left: auto;
 margin-right: auto;
 width: 960px;
 background-color:#CCC;
 overflow:hidden;
}

.header{
 position:relative;
 background-color:#F90;
 margin:5px;
}

.content{
 position:relative;
 background-color:#09F;
 margin:5px;
}

.footer{
 position:relative;
 background-color:#960;
 margin:5px;
}
</style>

ทั้งสามคลาสที่ผมสร้างขึ้นใหม่ ผมกำหนดสี background-color ให้ต่างกัน เพื่อให้สังเกตได้ง่าย ๆ เฉย ๆ ครับ เวลาเอาไปใช้งานจริง ก็กำหนดเองได้ตามสะดวก จะใส่พื้นหลังหรือไม่ก็ได้ และก็ใส่ค่า margin:5px;  ไว้ด้วยเื่พื่อให้สังเกตเห็นหลังสีเทาครับ ไม่งั้นขนาดมันจะซ้อนกันพอดี

ส่วนค่า position:relative นี่ก็ใส่ไว้ให้มันแจ่มกับทุก browser ซึ่งปกติไม่ใส่มันก็แสดงผลได้ดีเกือบทุกบราวเซอร์แล้ว ยกเว้น IE น่านแหละ เรียบร้อยแล้วมาสร้าง div เพิ่มเิติมให้เสร็จครับ

<div class="wraper">

<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>

</div>

สังเกต div ใหม่ทั้งสาม จะอยู่ภายใน div ที่ใช้คลาส wraper นะครับ

เท่านี้เองก็เป็นอันเรียบร้อย ที่เหลือเราก็จัดการใส่เนื้อหาใน div แต่ละส่วนได้ตามสะดวกครับ
วันนี้เอาเท่านี้ก่อนครับ คราวหน้าจะมาต่อถึงเทคนิคการใส่พื้นหลัง background แบบเทพ ๆ อย่างที่เว็บใหญ่ เว็บดัง เขาทำกันให้ดูครับ

สนุกกับการเริ่มต้น CSS ครับผม

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

1 Comment. Leave new

ว้าว พี่ป่านสอนดริ๊ฟ ^o^

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>