Blog

CSS : เมื่อต้องเจอปัญหากับ IE

เชื่อว่าหลาย ๆ คนที่เขียน CSS กันมา ต้องเจอปัญหาว่า ทำไมเขียน CSS มาแล้ว แต่ละ Browser ถึงแสดงผลมาไม่เหมือนกัน และในบรรดา Browser ทั้งหลาย Browser ที่มีปัญหามากที่สุด ก็คงไม่พ้น Internet Explorer หรือที่เราเรียกกันว่า IE

ผมเองก็ไม่ทราบว่าด้วยเหตุผลอะไร IE ต่าง ๆ ถึงมีปัญหาในการแสดงผลที่แตกต่างกับชาวบ้านเค้า แถมตัว IE เองแต่ละเวอร์ชั่นก็มีการแสดงผลที่แตกต่างกันเองอยู่ด้วย แล้วเราจะมีวิธีแก้ปัญหาอย่างไรกันบ้าง มาลองดูกันครับ

CSS : สร้างเงื่อนไขให้ Tag html

[html]
<!–[if lt IE 7]> <html class="ie6"> <![endif]–>
<!–[if IE 7]> <html class="ie7"> <![endif]–>
<!–[if IE 8]> <html class="ie8"> <![endif]–>
<!–[if !IE]><!–> <html> <!–<![endif]–>
[/html]

กำหนดเงื่อนไขเลยครับ ว่าถ้าเป็น IE ที่เวอร์ชั้นตำกว่า 7 ให้ tag html นั้นมี class เป็น ie6 แล้วก็เขียนไล่ลำดับมาจนถึงว่า ถ้าไม่ใช่ IE ถึงจะแสดงผลมาเป็น tag html ที่ไม่มี class อะไร แล้วหลังจากนั้นเราจึงไปเขียน CSS ให้กับ element ที่มีการแสดงผลที่ไม่เหมือนชาวบ้าน อย่างเช่น

[css]
.box {margin-bottom:20px;}
.ie6 .box {margin-bottom:5px;}
.ie7 .box {margin-bottom:10px;}
.ie8 .box {margin-bottom:15px;}
[/css]

คือ .box ทั่วไปให้มี margin-bottom เท่ากับ 20px แต่ถ้าเป็นใน IE6 ให้มี margin-bottom แค่ 5px ใน IE7 ให้มี margin-bottom แค่ 10px และใน IE8 มี margin-bottom แค่ 15px

CSS : กำหนดเงื่อนไขในการเรียกใช้ CSS

[html]
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!–[if lt IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" /><![endif]–>
<!–[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css" /><![endif]–>
<!–[if IE 8]><link rel="stylesheet" type="text/css" media="screen" href="css/ie8.css" /><![endif]–>
[/html]

วิธีนี้จะคล้าย ๆ กับวิธีแรกแต่ต่างกันที่วิธีแรกจะกำหนด class ให้กับ Tag html แต่วิธีนี้เราจะกำหนดให้แต่ละ Browser เรียกใช้ CSS ที่แตกต่างกันครับ ข้อสำคัญคือ เราจะต้องเรียกใช้งาน CSS หลักของเราก่อนบรรดา CSS ที่เป็นเงื่อนไขนะครับ

CSS : Hack CSS สำหรับ IE

สำหรับกรณีที่เราไปเปลี่ยนแปลง Code HTML ไม่ได้ งั้นมาแก้ไขที่ตัว CSS แล้วกัน ด้วยการ Hack CSS สำหรับ IE โดยเขียนแบบนี้

[css]
.box {margin-bottom:20px;} /* ทุก browsers */
* html .box {margin-bottom:5px;} /* สำหรับ IE6 */
*+html .box {margin-bottom:10px;} /*สำหรับ IE7 */
.box {margin-bottom:20px\0/;} /* สำหรับ IE8 */
[/css]

ทุกคนก็ลองเอาไปประยุกต์ใช้ให้เหมาะสมกับเรามากที่สุดแล้วกันนะครับ

November 6, 2011
วิธีใช้ WordPress ตอนที่ 9 – วิธีติดตั้ง Plugins
หลังจากที่เราใช้งาน WordPress มาซักพัก เราคงรู้สึกอยากให้เว็บเรามีนั่นเพิ่ม มีนี่เพิ่ม ซึ่งสิ่งที่เราอยากได้เพิ่มนั้น ส่วนใหญ่ก็จะมีคนที่อยากได้สิ่งนั้นเพิ่มคล้าย ๆ กับเรา ก็เลยมีการทำออกมาเป็น Plugins

วิธีใช้ WordPress : หัวข้อ Plugins

หน้าตาของหัวข้อ Plugins

ให้เราเลือกที่หัวข้อ Plugins ที่ตำแหน่งที่ 1 นะครับ ในหน้าของ Plugins นั้น มีหัวข้อย่อย ๆ ให้เลือก คือ
- Search : เราสามารถ Search หา Plugins ที่เราต้องการได้ตามชื่อของ Plugins ในบริเวณตำแหน่งหมายเลข 3
- Upload : ในกรณีที่เรา Download File Plugins ตัวนั้นมาลงเครื่องไว้แล้ว จะใช้การ Upload File เพื่อติดตั้ง Plugins ตัวนั้น ๆ
- Featured : เป็น Plugins ที่ทาง WordPress คัด ๆ มาว่าน่าสนใจ
- Popular : เรียงลำดับ Plugins จากจำนวนของผู้ที่ Download Plugins ตัวนั้น ๆ มาใช้งาน
- Newest : เรียงลำดับ Plugins จากการ Upload
- Recently Updated : เรียงลำดับ Plugins จากการ Update ตัว Plugins
วิธีใช้ WordPress : ติดตั้ง Plugin โดยวิธีการ Search

สมมติว่าผมอยากลง Plugin ชื่อ WP-PageNavi ผมก็ Search คำว่า wp pagenavi

Search คำว่า wp pagenavi เพื่อหา Plugin

หน้าผลการค้นหาจะแสดงรายการของ Plugin ที่มีชื่อเกี่ยวข้องกับคำที่เราค้นหา ซึ่งผมเจอละ Plugin ตัวที่ผมต้องการ กด Install Now

เจอแล้ว Plugin WP-PageNavi กด Install Now

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

แต่ก่อนลง Plugin อย่าลืมอ่านรายละเอียดก่อนนะครับ

พอเรากด Install Now แล้ว ก็มากรอกรายละเอียดของ FTP

กรอกรายละเอียดเพื่อติดตั้ง Plugin

พอติดตั้งเสร็จ ก็ Activate Plugin เลยครับ

ติดตั้งเสร็จแล้ว กด Activated Plugin เลยครับ

Plugin ที่เราติดตั้งก็จะมาปรากฎที่หน้า Plugins แล้วครับ

ในหน้า Plugins มี WP-Pagenavi ที่เราติดตั้งแล้ว

ดูที่ตำแหน่ง 1 จะเห็นว่า Plugin ตัวนี้ของเรา เป็นแบบต้อง Settings ก่อนใช้งาน ส่วนตำแหน่งที่ 2 นั้นคือ Plugin ตัวที่เรายังไม่ได้ Activate นะครับ ซึ่งในการที่จะลบ Plugin ตัวไหน เราต้อง Deactivate ก่อนทุกครั้งนะครับ

วิธีใช้ WordPress : ติดตั้ง Plugins โดยวิธีการ Upload

คราวนี้ผมอยากลง Plugin ชื่อ No Right Click Images Plugin กด Download มาลงเครื่องเลยครับ

Download File Plugin มาลงเครื่องไว้

หลังจากนั้นมาที่หัวข้อ Plugins เลือกที่ Upload แล้วเลือก File ที่เรา Download มาเลยครับ

Upload File Plugin ที่เรา Download มา

หลังจากกด Install Now แล้ว ขั้นตอนต่าง ๆ ก็เหมือนกับติดตั้ง Plugin โดยวิธีการ Search และ Plugin ตัวที่เราติดตั้งก็มาปรากฎในหน้า Plugins โดยจะเห็นว่า Plugin ตัวนี้ไม่มีให้ Settings อะไร และจากที่อ่านรายละเอียดของ Plugin ก่อนที่จะโหลดแล้ว Plugin ตัวนี้จะทำงานทันทีที่เราติดตั้ง

ติดตั้ง Plugin เสร็จแล้วด้วยวิธี Upload

จบตอนนี้แล้ว หวังว่าทุกคนน่าจะสามารถหา Plugin ที่ถูกใจมาติดตั้งให้เว็บ WordPress ของตัวเองได้แล้วนะครับ ^^

ตอนต่อไปครับ วิธีใช้ WordPress ตอนที่ 10 – สร้างลิงก์
November 5, 2011
WordPress : รวมเครื่องมือสำหรับทำ Theme WordPress
เวลาที่เราจะสร้าง Theme WordPress หรือเว็บไซต์อะไรก็แล้วแต่ มันคงจะดีถ้าเรามีตัวช่วยในการทำ ตั้งแต่การทำ Layout จาก Photoshop หรือ Fireworks การเขียน Code HTML / CSS แล้วเริ่มต้นนำมาทำเป็น Theme WordPress จนกระทั่งเช็ค Theme ที่เราทำออกมา

ซึ่งทาง Wplift ได้รวบรวมไว้ให้ตามหัวข้อดังนี้
1. Designing Your Theme
2. Coding the HTML / CSS
3. Coding your WordPress Theme
4. Testing Your Theme
ตามไปอ่านต่อได้ที่ The Ultimate (Free!) WordPress Theme Development Toolkit
November 4, 2011
CSS : Firebug เพื่อนแท้ ช่วยแก้ CSS
วันนี้เราจะมาเรียนรู้วิธีการใช้ Firebug กันนะครับ โดยในการทำ CSS เนี่ย เวลาเราจะเช็คว่า CSS ที่เราเขียนมานั้น มันผิดตรงไหนหรือเปล่า หรืออยากลองแก้ CSS ดูก่อน โดยไม่อยากให้กระเทือนกับเว็บที่ใช้งานอยู่ในปัจจุบัน Firebug นั้นน่าจะเป็น 1 ในคำตอบที่เป็นตัวช่วยที่ดีของเรา

Firebug : โหลด Firebug

โดย Firebug นั้นเป็น Extensions ของ Firefox สามารถโหลดมาใช้งานได้ที่ Get Firebug

หน้าตาเว็บ Firebug (02/11/2011)

Firebug : การใช้งาน Firebug เบื้องต้น

เมื่อลง Firebug เสร็จเรียบร้อยแล้ว มาลองใช้งานกัน โดยคลิ๊กขวาแล้วเลือก Inspect Element

คลิ๊กขวา แล้วเลือก Inspect Element

หลังจากนั้น Firebug Panel จะปรากฎขึ้นมา

Firebug Panel

Firebug : เปิด Firebug เป็นอีกหน้าต่าง

เราสามารถเปิด Firebug เป็นอีกหน้าต่าง ได้โดยคลิ๊กที่ icon อันดับที่ 2 ที่อยู่ตรงมุมด้านขวาบนของ Firebug Panel

เปิด Firebug เป็นอีกหน้าต่าง

Firebug : ส่วนประกอบของ HTML Tab ใน Firebug Panel

สำหรับผม ในการใช้งาน Firebug นั้นจะใช้ในส่วนของ HTML Tab เป็นหลัก ดังนั้นมาดูว่า HTML Tab หน้าตาเป็นยังไงกันครับ

หน้าตาของ HTML Tab

Firebug : Node View

สำหรับ Node View ของ HTML Tab นั้นก็จะแสดง Code HTML ของเว็บให้เราดู โดยถ้าเรานำเม้าส์ไปวางไว้บน Element ไหน Firebug จะ Highlight ให้ดู ว่าแสดงผลอยู่ตรงไหน อย่างเช่นในรูป นำเม้าส์ไปวางที่ <div class=”info”> ดังนั้น Firebug ก็ Highlight ให้ดูว่า Element ตัวนี้อยู่ตรงไหน

Firebug Highlight ให้เราเห็นว่า <div class="info"> นั้นอยู่ตรงไหน

แต่ถ้าเราคลิ๊กที่ Element ไหน Firebug จะ highlight แถวที่เราคลิ๊ก และในส่วน HTML Stack นั้น Element ตัวที่เราคลิ๊กจะเป็นตัวหนา โดย HTML Stack นั้นจะเรียง Element ไว้โดยด้านขวาสุดคือ Element ที่คลุม Element อื่น ๆ ไว้ตามลำดับ รวมถึง HTML Side Panel จะแสดง CSS ของ Element ตัวนั้นไว้ด้วย

คลิ๊กที่ Element เพื่อดูรายละเอียด

แก้ไข Code HTML

เราสามารถกดคลิ๊กขวาที่ Element แล้วเลือก Edit HTML เพื่อแก้ไข Code HTML ได้

คลิ๊กขวา เลือก Edit HTML เพื่อแก้ไข Code

ซึ่งการแก้ไขใน Firebug เราจะสามารถเห็นผลลัพธ์ได้เลย แต่เมื่อเรา Refresh หน้านั้น การแสดงผลจะกลับมาเป็นเหมือนเดิมก่อนที่เราจะทำการแก้ไข (แก้ไขเสร็จแล้ว ให้กดที่ Edit เพื่อกลับไปยังหน้าปรกติ)

เมื่อลบคำว่า "วิธีจัดให้อยู่กึ่งกลาง" ออก ผลลัพธ์ก็แสดงผลให้เห็นทันที

Firebug : HTML Side Panel

สำหรับ HTML Side Panel นั้น มีแบ่งออกเป็น 4 ส่วนได้แก่
- Style : ซึ่งจะบอกรายละเอียดว่า Element ตัวนี้มี CSS ตัวใดกำกับอยู่บ้าง
  
  หัวข้อ Style
- Computed : จะบอก CSS ของ Element ตัวนั้นทั้งหมด ว่ามีค่าเป็นเท่าไหร่บ้าง
  
  ค่า CSS ต่าง ๆ ของ Element
- Layout : แสดงให้เห็นว่า Element มีขนาด มีลักษณะยังไง และเราสามารถแก้ค่าตัวเลขต่าง ๆ ได้ด้วย
  
  สามารถแก้ไขค่าตัวเลขได้เลย
- DOM : หัวข้อนี้ขอออกตัวเลยว่าไม่รู้เรื่อง ขอไม่อธิบายนะครับ >_<
Firebug : เริ่มต้นแก้ไข CSS ด้วย Firebug

ระงับการแสดงผล

เราสามารถระงับการแสดงผลชั่วคราวเพื่อดูการเปลี่ยนแปลงได้ โดยเอาเม้าส์ไปวางไว้หน้าตัวที่เราจะระงับ จะปรากฎ icon มาเมื่อเรากดไป จะเห็นการเปลี่ยนแปลงดังรูปเป็นตัวอย่าง

CSS ที่กำกับ

ตัวอักษรที่ใหญ่ขึ้นจากการระงับขนาดตัวอักษร

กดเพื่อระงับการใช้งาน

แก้ไข CSS

คราวนี้เรามาลองแก้ไข CSS ดูนะครับ Firebug ช่วยให้เราเห็นการเปลี่ยนแปลงในค่าที่เราใส่ได้ยังไง

ให้เราดับเบิ้ลคลิ๊กที่ค่าที่เราต้องการแก้ไข แล้วใส่ค่าใหม่ได้เลยครับ

จะเห็นว่าเพิ่ม margin-bottom แล้วมีการเปลี่ยนแปลงยังไง

เพิ่ม CSS

คราวนี้เวลาเขียน CSS เราก็อยากจะรู้ก่อนว่า ถ้าใส่ค่านี้เข้าไป มันจะแสดงผลยังไงนะ ถ้าเป็นแบบที่เราต้องการ จะได้นำไปใช้งานจริงเลย วิธีเพิ่ม CSS เข้าไป ก็ให้ดับเบิ้ลคลิ๊กที่บริเวณแถวปีกกาด้านล่าง จะได้เป็นดังรูป เพื่อให้เราเพิ่มค่าเข้าไป

ใส่ค่าที่ต้องการทดสอบเลยครับ

ผมใส่ค่าเป็น background:#FF0; เข้าไป ก็จะได้ผลลัพธ์เป็นพื้นหลังสีเหลืองในทันที

พื้นหลังสีเหลือง เห็นกันทันที

ทุกคนลองใช้ดูนะครับ ผมว่ามันทำให้การเขียน CSS ง่ายขึ้นเยอะเลยครับ

ปล. Chrome เนี่ยมันมีให้มากับตัว Browser อยู่แล้ว ใช้งานไม่ต่างกันเท่าไหร่

เพิ่มเติม (โดย @inhumba) : ตรง HTML Slide Panel ในส่วนของ Style สามารถแก้ไขค่าตัวเลขได้โดยใช้ปุ่มลูกศร เมื่อ cursor อยู่ที่ค่านั้นๆ ปุ่มขึ้นจะเพิ่มค่าตัวเลขทีละ 1 ปุ่มลงจะลดค่าตัวเลขทีละ 1 ปุ่ม Page Up จะเพิ่มทีละ 10 ปุ่ม Page Down จะลดทีละ 10 ครับ
November 2, 2011
CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง

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

CSS : จัด div ที่เราต้องการ ให้อยู่กึ่งกลาง

สมมติว่าเรามี div อยู่ตัวนึง อยากจะให้มันอยู่ตรงกลางจะทำยังไงดี เรารู้แล้วว่า div ตัวนี้กว้าง 200px และสูง 100px งั้นเรามาลองใช้ position แล้วให้ top:50% กับ left:50% แล้ว มันน่าจะอยู่ตรงกลางนะ ลองดู

[css]
#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
}
[/css]

ผลลัพธ์ที่เราได้ออกมาจะเป็นแบบนี้ครับ

ถ้าตั้งค่า top:50%; left:50%; จะได้ผลลัพธ์ดังรูป

จะเห็นได้ว่า ตำแหน่งที่มันใช้วางตำแหน่ง จะยึดหลักไว้ที่มุมด้านซ้ายบน ทำให้ top:50%; left:50%; ให้ผลลัพธ์ในแบบนี้ ดังนั้นเราจะทำต่อโดยใช้ margin เพื่อดึง div ให้มาอยู่ตรงกึ่งกลาง คราวนี้ค่าที่เราจะใช้คิดค่ามาจากเอาความกว้างหาร 2 แล้วนำไปใส่เป็นค่าลบให้ margin-left และเอาค่าความสูงหาร 2 แล้วนำไปใส่เป็นลบให้ margin-top ซึ่งความกว้าง 200px และความสูง 100px จึงได้ค่าออกมาเป็น

[css]
#box{
width:200px;
height:100px;
position:fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
[/css]

จะทำให้ div ขยับตามที่เราตั้งค่าไว้

#box จะขยับไปด้านบน และด้านซ้ายตามรูป

ผลลัพธ์จึงออกมาเป็นดังรูป

ในที่สุด #box ก็อยู่กึ่งกลางแล้ว

October 30, 2011
[WordPress] Cheat Sheet สำหรับเขียน Theme WordPress เบื้องต้น

ทาง WP TUTS+ ได้ทำ Cheat Sheet สำหรับการทำ Theme WordPress เบื้องต้นไว้ เราไปดูกัน ว่ามีอะไรบ้างครับ

โครงสร้าง

แนวทางการเขียน Loop

วิธีการเขียน Loop

October 28, 2011