Accessibility Links

• Skip to Content
• Skip to Main Navigation
• Skip to thaicss.com Search
• Accessibility help
• Access keys help
• 

CSS Layouts

Layouts ของ CSS แบบต่างๆ

1. การสร้าง Graph โดยใช้ XHTML CSS

   Radiz 2008-07-02 18:14:25

   สร้าง Graph กับ xhtml + css ผมลองนั่งคิด หาวิธีการ และจนกระทั่งทดลองทำ ใช้กลยุทต่าง ๆ ที่พอจะมีหาได้สะสมมาจากการทำงาน ประยุคเข้าไปให้มันใช้งานได้คงเคยเห็นมาบ้างแล้วการสร้าง Graph กับ css มีบทความให้เห็นกันอยู่มากพอสมควร อาจจะใช้ java script เข้าช่วยบ้างในบางแทคนิค แต่ก็ยังรู้สึกว่า มันค่อนข้างที่จะซับซ้อนมาก ทำความเข้าใจยากมากกับ Code ของหลาย ๆ ท่าน ผมก็เลยคิดหาทางสร้างขึ้นมาใหม่ตัวหนึ่ง ซึ่งคิดว่าน่าจะเป็น Code ง่าย ๆ ที่ผมเองพอจะทำได้ และ ลองเอามาแนะนำ เผื่อเอาไปต่อยอดความคิด ประยุคใช้เผื่อจะเกิดความคิดใหม่ ๆ ในงานของเรา เป็นการคิดนอกกรอบต่อยอดไปเรื่อย ๆ ครับ

   ส่วนใหญ่ที่ผ่านมาเราจะเห็นเป็นการนำเอารูปภาพสำเร็จมาวางแล้วใช้ attribute alt หรือ title เป็นตัวขยายความบ่งบอกความหมายของรูปนั้น ๆ หรือ ใช้ flash หรือ Ajax, Javascript อย่างที่เกริ่นไว้ข้างต้น (อนาคตอันใกล้ Flash จะสามารถมองเห็นได้ด้วย Search Engine แล้ว ถ้าเป็นความจริง Flash Web Designer ก็คงจะได้เฮกันล่ะครับ) แต่ผมมุ่งประเด็นไปตรงที่ว่า หากทำให้ Graph สื่อช้อมูลได้ตรงประเด็นจริง ๆ รับรู้ข้อมูลได้จริง ๆ อ่านค่าได้จริง ว่าในแต่ละข้อมูลนั้นได้เปรียบเทียบกันแล้วเป็นอย่างไร และถ้าหากว่าวันใดวันหนึ่ง file css หายไป การเรียงของข้อมูล และการให้ข้อมูลจะยังคง ปะติดปะต่อ เหมือนเดิม หรือเปล่า ไม่ใช้เป็นแค่รูปภาพที่แสดงขึ้นมาเฉย ๆ ไม่ได้บอกข้อมูล หรือรายละเอียดแต่อย่างได (ก็คือความเป็น semantic นั่นแหละ) ทำให้ข้อมูลเป็นประโยชน์ที่สุด มีประสิทธิภาพที่สุด ในการให้ข้อมูลแก่บุคคลทั่วไปที่ค้นหาข้อมูล ทั้งนี้จะได้ในเรื่องความเป็น Accessibility ในการให้ข้อมูล รายละเอียดต่าง ๆ ที่สามารถเข้าดูข้อมูลได้หลาย User ได้หลาย ๆ ทาง และรับรู้ข้อมูลได้เหมือน ๆ กัน ไม่ว่าจะเป็นการเข้าดูกับอุปกรณ์ อิเล็กทรอนิคต่าง ๆ ก็จะได้ข้อมูลที่ตรงกับความต้องการ และตรงกับการสื่อของผู้ส่งสาร (ดีไหมครับ ^^)

   Tags:

   1. Graph
   2. XHTML
   3. CSS

2. ทำ Rollover Navigation Menu ด้วย CSS อย่างง่าย

   Radiz 2008-05-12 17:29:49

   ไม่ได้เขียนอะไรเกี่ยวกับการลงมือทำบ้างเลย เขียนแต่เรื่อง concept แนวคิดมานานพอสมควรแล้ววันนี้ท่านเจ้าสำนักของเรา แยบ ๆ ผมมาว่าปลาเอ้ย เขียนเกี่ยวกับวิธีการปฏิบัติสักหน่อยสิ นักเขียนท่านอื่น เขาไม่ส่งบทความมาเสียที เขียนไปก่อนละกัน โอเค ก็ไม่รู้จะเขียนอะไรน่ะนะ O_o นั่งคิดอยู่นาน เอา Rollover Navigation ละกันนะ แบบแรกเป็นรูปภาพ Rollover ง่าย ๆ เลยละกัน เผื่อท่านใดอยากได้แนวทางการนำไปใช้ ถ้าท่านใดรู้แล้วก็มาแลกเปลี่ยนกันเผื่อจะได้อะไรที่มันประหยัดกระทัดรัด เอามาอวดมาเฉิดฉายกันหน่อย ในส่วนของ xhtml

   Tags:

   1. css
   2. navigation bar
   3. navigation menu

3. การเขียน CSS Elastic Layout

   พร อันทะ 2008-01-21 22:18:53

   หลังจากที่ลองเล่นกับ CSS แบบ Liquid Layout ไปแล้วตอนนี้มาลองเล่นแบบอื่นกันดูบ้างครับ Elastic Layout เป็นรูปแบบการเขียน CSS ที่ผมนำมาเสนอเป็นรูปแบบที่สอง จะเป็นอย่างไรนั้น ตามมาดูกันครับ

   Tags:

   1. Layout
   2. Elastic Layout
   3. em

4. CSS Liquid Layouts (การเขียนเว็บเต็มหน้าแบบ 100%)

   พร อันทะ 2008-01-19 18:22:15

   ก่อนหน้านี้ผมได้เขียนอธิบายคร่าวๆ ไว้แล้วว่า การเขียน CSS Layout มีรูปแบบคร่าวๆ กี่แบบ อย่างไรบ้าง ตอนนี้มาดูกันในแบบแรกเรื่อง Liquid Layout ทั้งแบบ 1 คอลัมน์ 2 คอลัมน์ และ 3 คอลัมน์

   Tags:

   1. layout
   2. liquid layout
   3. เต็มหน้า

5. ลับสมองไปกับ float ตอนที่ 1

   Radiz 2007-12-31 21:03:14

   browser ทุกวันนี้ ต่างก็ถูกพัฒนาขึ้นเรื่อย ๆ ทำให้เราสร้าง layout จาก css ได้ง่ายมากขึ้นด้วย float เป็นทางเลือกหนึ่งที่นิยมนำมาใช้ในการวาง layout ด้วย css แต่มันก็ไม่ใช่ทางออกทางเดียวนะครับ เพียงแต่ว่ามันง่ายในการใช้งาน

   Tags:

   1. float
   2. css
   3. box model

6. แนวทาง ในการแก้ไขปัญหา Float Model

   โอ๊ต 2007-11-08 16:15:02

   การจัดวาง layout เพื่อใส่ content ในเวปนั้น เราสามารถใช้ได้ทั้ง การกำหนด position หรือการใช้ float ซึ่งทั้งสองมีรูปแบบการใช้ที่แตกต่างกัน โดยในที่นี้เราจะพูดถึงการใช้ Float กับการจัดวาง Layout

   Tags:

   1. css
   2. layout
   3. float

7. Multi-Column Layout Design

   Radiz 2007-10-03 23:59:20

   ผมเชื่อว่าหลายคนคงเคยมีปัญหากับการที่ต้องออกแบบ CSS สำหรับ Layout ที่ถูก design มาหลาย ๆ column แล้ว column เหล่านั้นต้องมีความสัมพันธ์กันเมื่อ content ของฝั่งใดฝั่งหนึ่งนั้นยืดออกในแนวตั้ง อีกข้างก็ต้องยืดตามเท่ากัน

   Tags:

   1. css
   2. multi column
   3. fluid layout

8. 12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standard (จบ)

   Radiz 2007-09-20 17:13:31

   เมื่อคุณย่างก้าวที่จะเข้าสู่โลกของการ design แบบ tableless layout นั้น สิ่งที่คุณต้องคิดถึงไม่ใช่แต่เพียงคิดว่าจะจัดวาง container elements ของคุณอย่างไรแต่สิ่งที่คุณไม่ควรมองข้ามคือการจัดการ selector ของคุณด้วย

   Tags:

   1. css
   2. layout
   3. web standards

9. 12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standards (3)

   Radiz 2007-09-05 10:52:43

   การที่จะเขียน code markup ขึ้นมาให้สนับสนุนกับมาตรฐานเต็ม ๆ นั้นมันขัดแย้งกับการที่เรา ใช้ table ที่เป็น container elements บรรจุทุก ๆ สิ่ง ทุก ๆ อย่าง แบบเมื่อก่อนโดยสิ้นเชิง เรา จะ container elements ให้เหมาะสมกับข้อมูล

   Tags:

   1. css
   2. web standards
   3. lesson

10. 12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standards (2)

    Radiz 2007-08-27 14:17:09

    การแสดงผลของในแต่ละ browser อีกซึ่งแต่ละ browser นั้นมีผู้พัฒนา และ มาตรฐานไม่เหมือนกันอีก เจอทีแรกผมก็สบถเลย แสดด ... ทำไมมันไม่ทำมาให้มันเหมือน ๆ กันฟะ และ นั่นแหละที่ผมได้รู้จัก W3C

    Tags:

    1. css
    2. web standards
    3. lesson

11. 12 ข้อคิดสำหรับผู้ที่กลัว CSS และ Standards

    Radiz 2007-08-27 14:14:46

    ย้อนกลับไปเมื่อ 1 ปีเกือบ ๆ สองปี ที่แล้วที่ผมยังใหม่สำหรับ CSS-XHTML อยู่ มีอะไรหลายอย่าง ๆ ที่ต้องปรับตัวปรับระบบความคิดต่าง ๆ หลาย ๆ อย่าง ด้วยความคุ้นชินกับการ design ในแบบ old school อยู่

    Tags:

    1. css
    2. web standards
    3. lesson

12. Double-Float Margin Bug ใน IE6

    Radiz 2007-08-21 10:47:20

    เพื่อน ๆ คงเคยกำหนดให้ box หนึ่ง box มีระยะห่างจาก box อีกตัวที่เป็นตัวครอบโดยใช้ float: left กันใช่ไหมครับ ฟังดูแล้วคงเหมือนง่ายใช่ไหมครับก็แค่กำหนด อะไร ๆ ตามปกติและเมื่อลอง preview กับ Modern Browser ทุกตัวก็ได้การแสดงผลออกมาที

    Tags:

    1. double float margin
    2. css
    3. fix

13. css กับการจัดวาง xhtml ในกล่องข้อมูล

    พร อันทะ 2007-08-18 14:42:08

    การจัดวางข้อมูลแบบเดิมๆ ในกล่องนั่นคือ มี div, h1, p, strong, span, em, img ซึ่งแต่ละอันจะถูก นำมาใช้ให้เหมาะสม กับการนำเสนอข้อมูล ในตัวอย่างต่อไปนี้ ผมขอสมมุติเรื่องราวขึ้นมา 1 เรื่องแล้วกันนะครับ ผมอยากจะเอาเนื้อหาทั้งหมด

    Tags:

    1. css
    2. xhtml
    3. layout

14. CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 2)

    Radiz 2007-08-21 10:34:57

    และก้าวข้ามขีดจำกัดของ Grid Design ได้สบาย ๆ เลย และมันสามารถลดสิ่งที่ไม่จำเป็นต้องใช้ออกไปจากงานของเราได้มากขึ้น และ ทำให้เราจัดการงานของเราได้ดีขึ้น ตอบสนองความต้องการจากไอเดียได้มากขึ้นกว่าเดิม (มองในแง่มุมของ Designer นะครับ)

    CSS Visual Model เป็นได้ทั้ง lines และ boxes ซึ่งใช่มันเป็นส่วนหนึ่งของ Grid แต่เราสามารถทำอะไรกับ boxes ได้มากขึ้นไม่ว่าจะด้านในด้านนอกของ boxes หรือ เราอาจจะอยากให้มันไม่ทำหน้าที่เป็นเหมือน boxes ด้วยก็ได้ เราสามารถกำหนดคุณลักษณะให้กับมันได้อย่างอิสระตามที่เราอยากจะให้มันเป็น

    

    เราสามารถกำหนดตำแหน่งให้ภาพอยู่ที่ไหนก็ได้ ตัวหนังสืออยู่ที่ไหนก็ได้ด้วย properties ที่ชื่อว่า position หรือ float ช่องว่างระหว่างตัวอักษร ระยะห่างระหว่างบรรทัด ขนาดตัวอักษรเล็กใหญ่แตกต่างกัน และคุณประโยชน์อีกมากมายซึ่ง ผม พร เพื่อนและ ThaiCSS คงทราบกันดี หรือผู้ที่เพิ่งเคยเข้ามาเยี่ยมชมก็ให้ลองไปอ่านดูในส่วนของ CSS,XHTML Online หรือ บทความ: สาเหตุและความกลัวเกี่ยวกับ Cascading Style Sheets (CSS) ดูว่ามีการพูดถึงไว้อย่างไรบ้าง CSS จะช่วยให้เราทำงานกับการ Design Website ได้มากขึ้นเพราะมีความยืดหยุ่นมาก ขึ้นอยู่กับแล้วล่ะว่าทีนี้เราจะนำเสนอกล่องเหล่านั้นสู่สายตาคนภายนอกอย่างไร ตัวอย่างการ Design แบบนอกกรอบโดยใช้ CSS

    Tags:

    1. css
    2. outside
    3. grid design

15. CSS กับการคิดนอกกรอบ (สี่เหลี่ยม ตอนที่ 1)

    Radiz 2007-08-21 10:35:38

    กับการนั่งทำงาน Job ที่รับมาตาเปียกตาแฉะไม่ก็นั่งหาอะไรอ่านไปเรื่อย ๆ ตามประสาคนชอบสอดชอบแส่หาเรื่องปวดกบาลใส่ตัว พอเห็นเจ้าขนมต่าง ๆ เนี่ยมันก็ทำให้ผมมาคิดได้ว่า เอ้อ! นะมันก็มีกรอบก็มีเหลี่ยม และ ก็รูปทรงอื่น ๆ หลากหลายเหมือนเวลาเรามานั่งแพลนทำ Layout ของ Website นี่ล่ะ

    สี่เหลี่ยมของขนมรังผึ้ง กับ ขนมครกที่เป็นทรงกลม มันทำให้ผมนึกถึงการ Design Website ในสมัยก่อนเก่า ซึ่งเราจะต้องมานั่งคิดว่าเราจะตัดออกมาอย่างไรให้มันเป็นช่องสี่เหลี่ยม ที่เรียงรายออกมาได้อย่างเป็นระบบระเบียบ เพื่อที่จะจัดมันไว้ในตารางโดยไม่มีการผิดเพี๊ยนไปจากตอนที่เรานั่ง Design ใน Photoshop เนี่ย มันเป็นสิ่งที่ต้องทำจนเราจำจนขึ้นใจไปแล้วว่า เอ้อ ... จะทำอย่างไรหนาให้มันออกมาเป็นเช่นนั้น ไม่งั้นมันคงจะตัด slice ออกมากันยากน่าดู (นั่งคิดมาก ๆ จ้องจอมาก ๆ มันอาจจะแปลงร่างเป็นหุ่นให้เราตกใจเล่นก็ได้นะ) แต่ผมเคยคิดนะว่าเมื่อไหร่มันจะทำได้มากกว่านี้นะ เหมือนกับตอนที่เราทำ Flash หรือ ตอนที่กำลัง Design มันออกมานั้น ที่เราอยากจะวางอะไรลงไปก็ได้ แต่พอวางอะไรที่มันเหนือหรือล้ำจินตนาการมาก ๆ ก็ต้องมานั่งลำบากปวดกบาลตอนมานั่ง slice อีก จะทำอย่างไรน้าถึงจะก้าวข้ามขีดจำกัดเหล่านี้ (ซึ่งตอนนั้นผมยังอ่อนต่อประสบการณ์ยิ่งนัก เพราะยังไม่มีใครผลิตแก๊ซโซฮอล) จะทำอย่างไรให้มันวางตรงไหนก็ได้แต่ออกมาแล้วเป็นความสวยงามเหมือนกับขนมครก มันทำให้ผมครุ่นคิดเป็นพัก ๆ แล้วมันก็จางหายไป ตามวันเวลาผมก็ Design Webpage ตามมีตามเกิดของผมไป ขังตัวเองอยู่ในตารางนั้น

    Tags:

    1. css
    2. outside
    3. grid design

16. สาเหตุและความกลัวเกี่ยวกับ Cascading Style Sheets (CSS)

    Radiz 2007-08-21 10:36:24

    ศิลปินถ่ายทอดประสบการณ์ ความคิด และ ความรู้สึกของพวกเขา ผ่านความสวยงาม พวกเขาได้รับแรงบันดาลใจ จากสิ่งต่าง ๆ บนโลกที่อยู่รอบ ๆ ตัวเขา และ พวกเขาก็เป็นแรงบันดาลใจ ให้กับสิ่งต่าง ๆ อื่น ๆ ด้วย การออกแบบ website นั้นก็คือ ข้อมูลที่ผ่านการกลั่นกรองมาเรียบร้อยแล้วว่าเป็นประโยชน์, เป็นความคิดที่สื่อออกมาถึงผู้รับได้ และ ข้อมูลนั้นสามารถถ่ายทอด และ ดึงดูดเย้ายวนไปถึงผู้รับได้อย่างสมบูรณ์แบบ

    การออกแบบโครงร่างภายนอก คงเป็นเรื่องเกี่ยวกับความสามารถทางศิลป์ล้วน ๆ การคิดคำนึงถึงภาพที่เราจะออกแบบมาให้สวยงามวาด หรือ ออกแบบ อย่างไรออกมาให้สวยมันเป็นเรื่องง่ายที่เราจะทำ แต่การนำมาใช้กับการทำ website นั้นมันต้องคิดลึกซึ้งไปกว่านั้น เพราะมันไม่ได้เป็นเพียงแต่ภาพที่เราวาดออกมาเพียงเท่านั้น มันไม่ได้มีไว้เพื่อดูเพียงตาเปล่า หากทว่ามันมีส่วนที่จับต้องได้ นำไปใช้ต่อได้ เช่น ภาพเล็ก ๆ น้อย ๆ ของข้อมูล content ต่าง ๆ ที่เป็นตัวหนังสือที่ผู้ใช้สามารถนำไปใช้ต่อ เช่น เก็บไว้อ่านเก็บไปอ้างถึงได้

    เพราะฉะนั้นเมื่อคุณจะต้องออกแบบ website คุณจะต้อง คิดและมองอย่าง นักเขียน เป็นอันดับแรก จากนั้นคุณต้องคิดและมองอย่าง วิศวกร และ ท้ายที่สุดถึงจะคิดและมองอย่าง ศิลปิน ทีนี้เราก็กลั่นกรองออกมาตาม sense ที่เราได้ลำดับความคิด และ เรียนรู้ใหม่ทั้งหมดของเราเลย เช่น สีสันหน้าตาเป็นอย่างไร การจัดวางตัวหนังสือ การกำหนดช่องว่างระหว่าง content จัดเรียงหน้าตาที่ user จะเข้ามาสัมผัสอย่างไรให้สวยงามเหมาะสมที่สุด ทำอย่างไรให้การแสดงผลของ website ของเรานั้นไม่ผิดเพี๊ยน ข้อมูลไม่มีการเสียหายเมื่อต้องการเปลี่ยนแปลงโครงสร้าง และ/หรือ รูปร่างหน้าตา จะเห็นได้ว่ามันจะทำงานร่วมกันอย่างเป็นระบบ

    Tags:

    1. กลัว
    2. ปัญหา
    3. css

17. เขียน css สำหรับเครื่องปริ้นท์

    พร อันทะ 2007-08-21 10:39:55

    หลายคนยังคิดไม่ออกว่ามันคืออะไร การเขียน css สำหรับเครื่องปริ้นท์ หรือการกำหนด print media ให้กับหน้าเว็บเพจ เราสามารถเขียน css ควบคุมหน้าเอกสารในเว็บของเราได้ ว่าจะให้แสดงผลต่างไปอย่างไร ใน User Agents แบบอื่นๆ ไม่ใช่แค่บราวเซอ

    Tags:

    1. printer
    2. css

18. ThaiCSS กับ Screen, Print และ Handheld Media type

    พร อันทะ 2007-08-21 10:40:42

    ตอนนี้ถ้าใครใช้โทรศัพท์มือถือ หรือ พีดีเอ เข้าเว็บไทยซีเอสเอส คงเห็นหน้าตาเว็บที่เปลี่ยนไป หรือ ใครที่สั่งพิมพ์หน้าเว็บก็จะเห็น ความแตกต่างเช่นเดียวกัน ใช่เลยครับ ผมเขียน css ขึ้นมาใหม่เพื่อให้รองรับ Handheld และ Print เพราะฉะนั้นเวลาที่ผู้ใช้เปลี่ยน device ในการเข้าถึงหน้าเว็บ การแสดงผลจะต่างไปด้วย

    Tags:

    1. print
    2. handheld
    3. media type

19. เปลี่ยนใจมาใช้ div แทน table ตอนที่ 3 (สร่างเมา)

    พร อันทะ 2007-08-21 10:42:42

    ถ้าเราจะสร้างตารางสักอัน โดยที่ไม่ต้องใช้ table แล้วเราสามารถใช้อะไรได้บ้าง ในความเป็นจริงอย่างที่เคยบอกกล่าวกันไว้ ถ้าข้อมูลอันไหนมันแสดงผลเป็นตาราง มันก็ควรที่จะเป็น table tag แต่ ถ้ามันดันเปิดดูกับ Devices อื่นๆ แล้วมันมีปัญหา แล้วเราจะใช้มันทำไมหละ

    Tags:

    1. div
    2. table
    3. xhtml

20. เปลี่ยนใจมาใช้ div แทน table ตอนที่ 2 (เมา DIVs)

    พร อันทะ 2007-08-21 10:43:03

    เมา div(s) หลายคนอาจจะเคยเป็น เพราะผมก็เคยเมามาก่อน การเมา div มันไม่เหมือนการเมาเบียร์เท่าไหร่ เพราะเมาแล้วไร้ประโยชน์ แต่ได้ประสบการณ์ แต่ว่าประสบการณ์อย่างนี้ ผมไม่อยากให้เพื่อนๆ พี่ๆ น้องๆ ลุง ป้า น้า อา มาเมากะผมด้วย เพราะน่าจะแนะนำกันได้ไม่มากก็น้อย

    Tags:

    1. div
    2. table
    3. xhtml

21. XHTML ข้างทาง

    พร อันทะ 2007-08-21 10:44:18

    Tags:

    1. xhtml
    2. side way
    3. structure

22. เปลี่ยนใจมาใช้ div แทน table ตอนที่ 1

    พร อันทะ 2007-08-21 10:45:25

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

    Tags:

    1. div
    2. table
    3. xhtml

23. Float ตอนที่ 1

    พร อันทะ 2007-08-31 08:26:53

    Floatting หรือการจับ element(s) ให้อยู่ชิดซ้าย ชิดขวา หรืออยู่ตรงกลาง ด้วยคำสั่ง float: left;, float: right; และ float: none;

    Tags:

    1. css
    2. float

1. Fixed Layout CSS

Unknown Version Unknown