เคยเจอปัญหานี้กันหรือเปล่า…
ออกแบบ layout แบบสองคอลัมน์ (หรือมากกว่า) โดยใช้ div + float แต่พอเจอ content มากๆ ความสูงของ div มันกลับไม่เท่ากัน ทำให้ไม่สามารถใส่ background-color ให้กับคอลัมน์ที่สั้นกว่าได้ (ส่วนมากจะเป็น navigation menu)
Faux Columns คือนิยามของเรื่องข้างบนที่ A List Apart ให้ไว้ – เขาใช้การใส่ background image สลับข้าง คือให้เป็นพื้นหลังของข้างที่ยาวกว่า
ผมมีวิธีแก้ปัญหาอีกทางหนึ่ง โดยใช้ JavaScript เข้ามาช่วย
สมมุติว่ามีโค้ดแบบนี้
HTML
<div id="wrapper"> <h1 id="header">Site Header</h1> <div id="main"> <div id="sidebar"> <!-- Main Navigation--> <ul id="navigation"> ... </ul> </div> <div id="content"> ... </div> <div class="clear"/> </div> </div> <div id="footer"> ... </div>
CSS
#wrapper {
margin: 0 auto;
width: 780px;
}
#sidebar {
float: left;
width: 200px;
}
#content {
float: left;
padding: 20px 25px;
width: 520px;
}
หน้าตาที่ได้จะเป็นตามรูปข้างล่าง
วิธีแก้คือใช้ DOM หาค่าความสูงของคอลัมน์ที่ยาวที่สุด (ในที่นี้คือ content) จากนั้นก็ update ให้มันเท่ากันซะ
JavaScript
function equalHeight() {
var sidebarHeight = $('#sidebar').height();
var contentHeight = $('#content').height() + 40; // 40 is padding top + bottom of content
// If sidebar is shorter, update sidebar's height to equal the content panel
if(sidebarHeight < contentHeight) {
$('#sidebar').height(contentHeight);
}
}
ผลลัพธ์
ในตัวอย่างผมใช้ jQuery เพราะมันหา dimension ง่ายดี – ใครจะใช้ native DOM หาความสูงเองก็ใช้ได้เหมือนกัน
ถึงมันจะยุ่งกว่าการใช้ table นิดหน่อยแต่ก็ไม่เสีย web accessibility ล่ะนะ
6 Comments
เยี่ยมครับ
ยังมีเวลาเขียนบล๊อคอีกหรอเนี่ย ยอดมนุษย์เจรง ๆ
ผมยังไม่เข้าใจเลย ว่าทำไมเค้าไม่ให้ทำ layout ด้วย table ><
เอาแบบกำปั้นทุบดินคือ มันไม่ได้เกิดมาเพื่อสิ่งนี้อ่ะกิ๊ฟ >*<
เอาแบบดีๆ
table มีไว้แสดง tabular data (ข้อมูลที่มีหลาย attribute ใน 1 record) เช่นตารางสินค้า ตารางนู่นนี่ มันจึงไม่ได้ถูกออกแบบมาทำเลย์เอาท์ – เหมือนที่เลื่อยมีไว้ตัดต้นไม้ ไม่ได้มีไว้หั่นผัก
table ทำลาย accessibility เช่นเวลากด tab มันจะ focus ไปยัง cell ต่อไป ทั้งๆที่เราอยากให้เริ่มจาก main menu > side bar > content แต่พอใช้ table จะมั่วไปหมด (เรื่องนี้คนอาจจะมองว่าไม่สำคัญ แต่ google เห็นสำคัญเน่อ)
table ทำให้โหลดช้ากว่า อาจจะไม่มาก แต่ถ้า nest table เยอะๆ ประมาณว่าลากๆเอาจาก dream weaver จะเกิด code ที่ไม่จำเป็น (เราเรียกโค้ดขยะ) เยอะขึ้นเรื่อยๆ
ลองเปิดด้วย device อื่นที่ไม่ใช่ desktop browser อย่างพวก mobile จะเห็นความสำคัญของ accessibility มากขึ้น – แล้วจะรัก table น้อยลง
ส่วนนี่ความเห็นของฝรั่งเขา
อันนี้ผมมีประสบการณ์ตรงเลยฮะ ลำบากจริงๆ
สุดท้ายผมก็…table ซิครับ เอ๊กๆ
ปล. ส่วนตัวผมว่าถ้าต้องโหลด script มา optimize layout (แบบธรรมดา) มันดูโหดร้ายอยู่เหมอืนกันนะครับ
одноклассников, с которой я поеду в этот день чет как пиво перестал как обычно – вроди надо чего-то написать. Также обдуман план по