Posts tagged css layout

โปรแกรมทำ css layout

แจกโปรแกรมสำหรับสร้าง css layout เลือกๆ ลากๆ แล้ววางได้เลย ดูวิธีใช้งาน

1. ตรงกล่องขวามือ มีให้เลือกมากมาย ตามรูป ลากเมนูมาวาง
image001

2.จากนั้นก็จะได้เมนูตามต้องการ ง่ายมากๆ
image002
Read more…

Related Articles

Share
Categories: CSS tools
Tags:

ทำ layout ให้สูงเท่ากันทุกคอลัมน์

ปัญหาคอลัมน์ยืดยาวไม่เท่ากัน มีรูปแบนเนอร์ที่ต้องการให้อยู่ชิดล่างตลอด มีวิธีแก้ดังต่อไปนี้
Read more…

Related Articles

ทำ layout ให้สูงเท่ากัน ทุกคอลัมน์

จากตอน “การจัดการกับความสูง” ได้มีคอมเม้น ของคุณปีโป้ ได้เข้ามาถามไว้ว่า จะทำ กล่องที่มีเนื้อหาไม่เท่ากัน ให้สูงเท่ากันได้อย่างไร ถ้าจะตอบแบบ ไม่ต้องคิดมาก ก็คือ ใช้ table สิ เหอๆๆ แต่ ถ้าคนเคยทำ css แล้วจะมีอาการโรคจิต ชนิดหนึ่ง ที่จะต้องพยายาม ทำทุกอย่างในหน้าเว็บ โดยไม่ใช้ table ให้ได้ ราวกับว่า การมี table สักอันอยู่ในหน้าเว็บ เป็นความพ่ายแพ้ และเป็นที่เหยียดหยามอย่างมาก จากเพื่อนร่วมงาน ดังนั้นเรามาดูวิธี ทำโดยไม่ใช้ table แต่ทำแบบ table เอ๊ะยังไง????

table แบบเดิมเราเขียนกันแบบนี้

table.gif

Read more…

Related Articles

ค้นหาพัฒนาการแห่ง Layout

CSS Layout คือการจัดรูปหน้าเวปโดยการจัดวาง div และส่วนประกอบต่างๆของหน้าเวบนั้นๆ ให้อยู่ในจุดที่ต้องการ

การจัดตำแหน่งสามารถทำได้โดยการกำหนด position หรือการใช้เทคนิคการ float-clear

นอกจากนั้นยังต้องคำนึงถึง CSS Box Model ด้วย

Layout หลักๆในหนึ่งหน้า xhtml ที่มีความหมาย semantic (การเขียนหน้าเว็บตามความหมายของ tag) ที่ถูกต้องแก่การใช้งานได้แก่

  • header
  • navigation
  • content
  • footer

ซึ่งจากพื้นฐานนี้เราจะสามารถกำหนดรายละเอียดเพิ่มเติม ให้หน้าเว็บของเราต่อไปได้ว่า เราเลือกที่จะให้หน้าเว็บมีเนื้อหากี่ส่วนกี่คอลัมน์ คอลัมน์ไหนเป็นคอลัมน์หลักหรือคอลัมน์รอง เลือกที่จะมี navigation กี่ส่วนแบบไหน แล้วก็ควรจะตั้งชื่อ div ให้ตรงตามความหมายกับเนื้อหาทุกอย่างที่ใส่ไปด้วย การเพิ่ม div เข้าไปเพื่อจุดประสงค์ของการจัดรูปหน้าเพียงอย่างเดียว โดยไม่ได้เกี่ยวข้องกับเนื้อหาเป็นการประนีประนอมยอม แลกความถูกต้องทาง semantic(ความหมาย) กับการจัดรูปแบบเสมอ

เราควรใช้ div ที่มีจุดประสงค์เพื่อการจัดรูปหน้าอย่างเดียวให้น้อยที่สุด เท่าที่จะทำได้เพื่อรักษาความถูกต้องทาง semantic(ความหมาย) ไว้ให้ได้มากที่สุดเพื่อผลประโยชน์ทาง SEO ไม่ได้หมายความว่าเราควรหลีกเลี่ยงการใช้ div โดยสิ้นเชิง แค่ควรหลีกเลี่ยงการใช้ div ที่ไม่มีความหมายทาง semantic เท่านั้น
Read more…

Related Articles