[CSS] Equal Width Menu (ทำเมนูให้กว้างเท่ากัน)

Equal Width Menu หรือการทำให้เมนูกว้างเท่ากันนั้น แต่ละคนคงมีวิธีทำที่แตกต่างกันไป ผมก็ไปเจอมาวิธีนึงซึ่งง่ายๆ เลย ใช้แค่ CSS ก็เรียบร้อยแล้ว

ใช้ display: table

วิธีนี้ก็เป็น 1 ในผลพลอยได้ที่เราไม่ต้องไปห่วงอีเจ้า IE6 ดูได้จาก Can I use : CSS Table display เจ้าตัว display: table เนี่ย มันสนับสนุนแบบเต็มรูปแบบใน IE8 ขึ้นไป โดยเราจะนำมาประยุกต์ใช้งานกับการทำเมนู

See the Pen Equal Width Menu by Sittipong Wiboonsirichai (@rabbitinblack) on CodePen.0

การทำเมนูด้วยวิธีนี้ เป็นการประยุกต์คุณสมบัติการแสดงผลของตารางมาใช้งาน เพียงแค่เราไม่ได้ใช้ tag <table> เท่านั้นเอง

โดย display: table เปรียบเสมือน <table>
และ display: table-cell เปรียบเสมือน <td>

อีกตัวที่สำคัญคือ table-layout: fixed โดยปรกติแล้ว tag <table> จะมีค่าพื้นฐานเป็น table-layout: auto โดยทั้งสองอย่างแตกต่างกันที่

table-layout: auto จะปรับความกว้างของแต่ละช่องตามเนื้อหาในช่องนั้นๆ
table-layout: fixed ความกว้างแต่ละช่องจะถูกแบ่งให้อย่างเท่าๆ กัน ถ้าเนื้อหาในช่องนั้นมีความยาวมากกว่าความกว้างของช่อง ช่องนั้นจะถูกเพิ่มความสูงแทน

แต่วิธีนี้เองก็มีข้อเสียตรงที่ ถ้าเมนูของเรามีช่องไหนที่สูงมากกว่าช่องอื่น ตอน hover จะเจอช่องว่างในช่องที่สูงน้อยกว่า

CSSDEE : ในที่สุดเมืองไทยก็มีเว็บรวมงานเว็บสวย ๆ แล้ว

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

ตัวอย่างพวกเว็บรวมผลงานก็เช่น

awwwards
Awwwards
cssdesignawards
CSS Design Awards
cssawards
CSS Awards

แล้ววันนึงใน Timeline Twitter ของผม ก็ไปสะดุดเข้ากับเว็บนี้ CSSDEE ในที่สุดผมก็มีเว็บที่รวมผลงานเว็บไซต์ของคนไทยให้ได้เสพย์แล้ว

CSSDEE
CSSDEE

ถ้าใครสนใจจะส่งผลงานของตัวเอง เพื่อลงในเว็บไซต์ CSSDEE เองก็มีหัวข้อ Submit a Site เตรียมไว้ให้แล้ว ถ้าใครเสพย์งานของเมืองนอกจนเบื่อแล้ว จะหันกลับมาลองดูผลงานของคนไทยด้วยกันบ้าง ก็แวะไปดูกันเนอะ

[WordPress] Class ที่เราไม่ควรลืมในการเขียน CSS

เวลาเราสร้าง WordPress Theme ขึ้นมานั้น แน่นอนว่า CSS เป็นส่วนประกอบสำคัญอย่างหนึ่งเลย โดยตัว WordPress จะยึดตัว style.css เป็นหลัก และใน style.css นั้นเราควรมี Class เหล่านี้อยู่ด้วย

Class ที่ควรมีใน CSS ของเรา

ถ้ามีคำถามว่า ทำไมถึงต้องมี Class เหล่านี้อยู่ด้วย คำตอบคือ จะมี Class บางตัวที่ตัว WordPress จะสร้างขึ้นมา ซึ่งส่วนใหญ่จะเกี่ยวข้องกับการจัดการรูปภาพ เช่น จัดชิดซ้าย, จัดซิดขวา เป็นต้น เราจึงจำเป็นต้องสร้าง CSS มาเพื่อรองรับ Class เหล่านี้

CSS ตัวอย่างของ Class ที่ควรจะมีใน CSS ของเรา

[css]
/* =WordPress Core
————————————————————– */
.alignnone {
margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

.alignright {
float:right;
margin: 5px 0 20px 20px;
}

.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

.aligncenter {
display: block;
margin: 5px auto 5px auto;
}

a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}

a img.alignnone {
margin: 5px 20px 20px 0;
}

a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto
}

.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}

.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
margin: 5px 0 20px 20px;
}

.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
[/css]

ซึ่งตัวอย่างนี้ ก็นำมาจากในเว็บของ wordpress.org เอง ซึ่งเราสามารถนำไปปรับเปลี่ยนได้ตามที่เราต้องการนะครับ

[CSS] พื้นฐานการเรียกใช้งาน CSS

เขียนเกี่ยวกับ CSS มาเยอะแยะ คราวนี้ขอย้อนกลับไกลหน่อย ย้อนกลับมาถึงการเรียกใช้งาน CSS ซึ่งการเรียกใช้งาน CSS นั้นก็มีอยู่ในหลาย ๆ รูปแบบ

การเรียกใช้งาน CSS

เรามาดูการเรียกใช้งานแบบหลัก ๆ ที่เห็นกันบ่อย ๆ นะครับ ก็จะมี Inline style, เขียนใน >head< หรือเขียนเรียกจาก >link<

Inline style

ก็คือการเขียนลงไปในตัว tag HTML เลย โดยเรียกใช้ด้วย style="xxx" อย่างเช่น

[html]
<h1 style="font-size:32px;color:#FF0000;">Kwon Yuri</h1>
[/html]

รูปแบบนี้คือการใช้งานแบบ Inline style เป็นการกำหนดให้เฉพาะตัวนี้ มีคุณสมบัติดังที่เรากำหนดให้

เขียนลงไปใน <head>

ก็คือการกำหนดคุณสมบัติให้ element ตัวไหน มีคุณสมบัติตามที่เรากำหนด โดยคลุมด้วย

อย่างเช่น

[html]
<head>
<style> h1 { font-size:32px; color:#FF0000; } </style>
</head>
[/html]

เรียกจาก file โดยใช้ <link>

ให้สร้าง file css ขึ้นมา ในนั้นก็เขียน CSS กำหนดคุณสมบัติให้ตัว element ต่าง ๆ ตามที่เราต้องการ แล้วก็ใช้ >link< เพื่อเรียก file CSS ที่เราสร้างขึ้นมาใช้งาน อย่างเช่น ผมสร้าง style.css แล้ววางไว้ในตำแหน่งชั้นเดียวกับตัว index.html ของเรา ก็เรียกโดย

[html]
<head>
<link rel="stylesheet" href="style.css" />
</head>
[/html]

แต่ก่อนจะทำความเข้าใจเรื่องการเรียกใช้งานมากขึ้นกว่านี้ แนะนำให้ไปอ่านหัวข้อ CSS : ลำดับความสำคัญของ style ใน CSS ก่อนเพื่อทำความเข้าใจเรื่อง ID และ Class ใน tag HTML

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

[html]
<h1 id="heading1" class="title1">Kwon Yuri</h1>
[/html]

ถ้าเรามี element ที่มี ID และ Class แบบนี้ เราสามารถกำหนดคุณสมบัติให้ได้แบบนี้ครับ

[css]
h1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ Tag HTML
#heading1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ ID
.title1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ Class
[/css]

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

[HTML CSS] บางอย่างที่เราอาจจะยังไม่รู้

วันนี้ไปเปิดเจอ Slide ของคุณ Chris Coyier เจ้าของเว็บ CSS-Tricks ได้พูดไว้ในหัวข้อ What We Don’t Know เลยเอามาแชร์ให้ได้อ่าน ได้ดูกันนะครับ >_<

ตามไปอ่านบทความเต็ม ๆ ได้ที่ My Slides from InControl 2012: What We Don’t Know