2 คอลัมน์เลย์เอ้าท์ พร้อม header และ footer

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

การวางแบบ เลย์เอ้าท์ ขึ้นแรกสุดที่ผมอยากแนะนำไว้ตรงนี้ก่อนสักนิดนึงนะครับ เพื่อให้เป็นการง่ายในการเขียนโค้ด CSS ท่านลองหลับตานึกก่อนว่า จะให้ หน้าเว็บแสดงผลออกมาในลักษณะ อย่างไร

เช่น ผมนั่งหลับตานึกๆ แล้ว ได้ประมาณว่า อยากให้เว็บมี header มีตรงกลางแสดงผลข้อมูล แล้วก็ แบ่งพื้นที่ไว้ทำเมนูด้านซ้ายมือ เหมือนเว็บทั่วๆ ไป ส่วนฝั่งขวาเอาไว้แสดงผลข้อมูล แล้วก็มีไฟล์ footer เพื่อแสดงรายละเอียดเกี่ยวกับหน้าเว็บสักเล็กน้อย

ถ้าคิดอยากให้เป็นได้ลักษณะนี้แล้ว ต่อไปก็ลุยโค้ด css ได้เลยครับ หลักๆ สำหรับ หน้าเว็บแบบ 2 คอลัมน์และมีหัวท้ายนี่ จะใช้ DIV tag id 3 ตัว และ DIV class 2 ตัว

คือ

1. id แรก จัดให้เป็น div header

2. id ที่ สอง จะให้เป็น div wrapper (เพื่อไว้แสดงผลข้อมูลและเมนู)

3. id ที่สาม กำหนดให้เป็น div footer

**id ทั้ง 3 กว้าง 800px

สำหรับ class ทั้ง 2 ตัว ที่จะนำมาใช้ นั้น ใช้ควบคุม 2 คอลัมน์ที่ซ้อนอยู่ใน id wrapper นั่นเองครับ

1. กำหนดคลาสสำหรับ tag div ฝั่งซ้ายให้ชื่อ content-left (200px)

2. กำหนดคลาสสำหรับ tag div ฝั่งขวาชื่อ content-right (600px)

เมื่อได้รูปแบบแนวคิดการเขียนมาแล้ว เริ่มละเลง css กันได้เลยครับ

ตัวอย่าง และโค้ด สามารถ Save ได้จาก Link นี้ครับ

https://www.thaicss.com/lessons/layouts/2chf.php

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0
Tweet 20
fb-share-icon20

Back to Top

18 Responses to 2 คอลัมน์เลย์เอ้าท์ พร้อม header และ footer

  1. chan

    คือผมลองแล้วนะครับ ไม่ว่าจะเขียนแบบไหน

    #wrapper .content-left { ….}

    .wrapper .content-left { ….}

    #wrapper #content-left { ….}

    .wrapper #content-left { ….}

    ผลที่ออกมาจะเหมือนกันหมด เพียงแต่ให้อ้าง ว่าเป็น ID หรือ class แค่นั้นเอง ใช่ไมครับ

    ผมเข้าใจแบบนี้ถูกต้องหรือเปล่าเนี่ยครับ

    ผู้เชี่ยวชาญ แนะนำหน่อย….

    Reply

  2. chan

    สอบถามหน่อยครับ

    เห็นบอกว่า ID กับ class คล้ายกัน แล้ว

    ทำไหมต้องทำเหมือน ID ใหญ่กว่า class

    ตรง

    #wrapper .content-left {

    width:200px;

    position: relative;

    float: left;

    margin: 0;

    padding: 0;

    background: #000000;

    color: #FFFFFF;

    height: 200px;

    }

    มันเหมือน class เป็น ซับเซ็ต ของ ID อีกทีหนึ่ง

    ผม งง อะครับ

    ช่วยอธิบายหน่อย

    Reply

  3. พร อันทะ

    อ้าว เรื่องอย่างนี้ต้องให้เซียนจาวา มาช่วยไขด้วยซะแล้ววว

    ถึงจะกระจ่างแจ่ม

    Reply

  4. goragod

    ตามความเห็นผมนะ ผมจะใช้ ID ถ้าเป็นการอ้างถึงอะไรเพียงแค่อย่างเดียว ส่วน class ผมจะใช้สำหรับอะไรก็ตามที่ต้องอ้างซ้ำๆกัน

    เช่น ปุ่มทั้งหมดบนเว็บ ผมใช้ class เพื่อให้เหมือนๆกัน

    ส่วน ID ผมใช้กับแค่ตัวใดตัวหนึ่งเพียงตัวเดียวครับ

    เหตุผลก็เพื่อใช้อ้างกับ Javascript ได้ง่ายครับ

    http://goragod.mwfhost.com

    Reply

  5. Artofid

    จะว่าใช่ มันก็อาจจะใช่ครับ แต่อีกหน่อยถ้าหากคุณจะมาแก้ทีหลังคุณจะงงเอง หรือคนที่ตามมาแก้ทีหลังคุณอาจจะด่าบุพการีเอาได้ เพราะ id ใชที่เดียวครับ คือ ในหน้าหนึ่ง จะมีแค่ที่เดียวเท่านั้น เพราะอย่างนั้นเราถึงใช้ id เวลาเราตามมาแก้จะได้รู้ว่า อ๋อ เราแก้ตรงนี้แล้วจะมีผลกระทบแค่ที่เดียวนะ ในหน้านี้ เพราะต่อไปหากทำเว็บที่ซับซ้อนมากๆ หากคุณใส่เป็น class หมด จะงงเองครับ เพราะ class จะใช้ต่อเมื่อมีหลายจุดในหน้าหนึ่งๆเท่านั้น เช่น ปุ่มสีแดงข้างบน แล้วก็ยังมีปุ่มแบบเดียวกันนี้ข้างล่างด้วย ด้านขวาด้วย เป็นต้น

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

    Reply

  6. พร อันทะ

    แจ่มครับท่าน Artofid

    Reply

  7. chan

    Thanks ครับ Clear ดี

    Reply

  8. spider

    งง ครับแบบว่าที่แสดงในหน้า demo กับโค้ดที่ใช้กับหน้าจริงๆมันไม่เหมือนกันอ่ะ แล้วถ้าเอาไปใช้มันจะเหมือนกับหน้า demo มั๊ยเนี่ย งง

    Reply

  9. Goommy

    #wrapper .content-right {

    width:600px;

    position: relative;

    float: left; <<<<<<<<<<<!!!!!!!!!!

    margin: 0;

    padding: 0;

    }

    Reply

  10. Goommy

    อ่อ มัน Relative เลยต่อกันไปนี่เอง อ๊ากกก งงกับ step ว้อยยย :P

    Reply

  11. NGS

    มีปัญหาตรงที่

    บางครั้ง คอลัมฝั่งขวานั้น บางทีตกหล่นไปอยู่ตรงด้านล่าง ถัดจากคอลัมฝั่งซ้ายนะครับ ต้องคอยรีเฟรชอีกทีถึงจะกลับไปเป็น 2 คอลัมน์เลย์เอ้าท์ เหมือนเดิม

    ทำไงดีครับ

    Reply

  12. ชุปเปอร์มั่ว

    ความคิดเห็นที่12

    มีปัญหาตรงที่

    บางครั้ง คอลัมฝั่งขวานั้น บางทีตกหล่นไปอยู่ตรงด้านล่าง ถัดจากคอลัมฝั่งซ้ายนะครับ ต้องคอยรีเฟรชอีกทีถึงจะกลับไปเป็น 2 คอลัมน์เลย์เอ้าท์ เหมือนเดิม

    ทำไงดีครับ

    ตอบ

    <div>

    <div>

    </div>

    <div>

    </div>

    </div>

    Reply

  13. ชุปเปอร์มั่ว

    เอ้ายังเขียนไม่เสร็จหลงไปกด Enter

    ตอบ

    .clear {

    clear : both;

    }

    #a .b,#a .c {

    float: left;

    }

    #a .b {

    width: ?;

    }

    #a .c {

    width: ?;

    }

    /* #a .b และ #a .c บวกรวมกันต้องไม่เกิน #a ถ้ามีborder ลบความกว้างตาม border */

    <div id="a">

    <div class="b"> </div>

    <div class="c"> </div>

    <div class="clear"></div>

    </div>

    Reply

  14. NGS

    ขอบคุณมากครับ

    แต่เรื่องความกว้างนั้นคิดว่า ไม่มีปัญหาอะไร เพราะ บวกกันแล้วไปเกิดแน่นอน และก็ไม่ใส ่border ด้วยครับ

    จะลองเพิ่ม

    .clear {

    clear : both;

    }

    ดูครับ

    Reply

  15. NGS

    แก้ยังไงก็ไม่หายครับ คอลัมฝั่งขวานั้น บางทีตกหล่นไปอยู่ตรงด้านล่าง ถัดจากคอลัมฝั่งซ้ายเหมือนเดิม ต้องคอยรีเฟรชอีกทีถึงจะกลับไปเป็น 2 คอลัมน์เลย์เอ้าท์

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

    เพราะอะไรครับ??

    Reply

  16. Gimmick

    clear::ครับพี่ผมขเมาอ่านเข้าจัยแจ่มจ้งเลยครับเหอะๆพรุ่งนี้จะแวะเข้ามาชมไหม่น๊ะครับ

    Reply

  17. cpe10

    ติดตามชมเรื่อยๆ ครับ เป็นประโยชน์มาก

    Reply

  18. mcca

    ปีนี้ 2016 แล้ว แต่บทความนี้ถูกเขียนเมื่อปี 2006 ผ่านมาเป็น 10 ปีแล้ว หวังว่าคงจะตามทันทุกๆ คนนะครับ

    Reply

Leave a Reply to NGS Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial