Posts tagged height

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

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

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

table.gif

Read more…

Related Articles

Share
Categories: CSS techniques
Tags:

การจัดการกับความสูง

สำหรับคนที่ได้ลองเขียน css ด้วยตัวเองมาบ้างแล้ว ก็คงพอจะทราบว่า แท้จริงแล้ว หน้าเว็บก็ไม่ได้มีอะไรมากไปกว่าการทำกล่องและใส่ margin padding ซึ่งก็คือ การจัดตำแหน่งการแสดงผลของหน้าเว็บเพจ โดยใช้โค้ดที่แยกออกจากส่วน โครงสร้าง HTML เท่านั้นเอง แต่ภายใต้การกระทำที่แสนจะพื้นฐาน กลับมีเทคนิคมากมาย เพราะเบราเซอร์ที่มีในโลกนี้ ไม่ได้ทำงานไปในทิศทางเดียวกัน หากเขียน css ให้เว็บเพจดูได้สมบูรณ์ที่ เบราเซอร์เดียวแล้วละก็ เราจะไม่ต้องมีเทคนิคอะไรเลยก็ทำได้ง่ายแสนง่าย? ดังนั้นเมื่อเริ่มเขียน css สิ่งที่ควรจะระลึกไว้เสมอคือ?ถ้าต้องการให้เว็บดูได้สมบูรณ์ที่ หลายๆเบราเซอร์ อย่าใช้โค้ดใหม่ (css2 , css3) หรือโค้ดเทพต่างๆให้มากนัก เพราะคุณจะประสบปัญหาการแสดงผลอย่างแน่นอน แล้วจะต้องมานั่ง hack กันให้เสียเวลา??พยายาม keep simple เข้าไว้ หรือถ้าคุณไม่แคร์ และคิดว่า จะให้เว็บดูสุดยอดที่ firefox เท่านั้น นั่นก็อีกเรื่อง ใส่กันเข้าไปให้เต็มที่ ตามใจอยาก

เข้าเรื่องที่จะพูดถึงกัน เว็บเพจโดยทั่วไปแล้ว มักจะถูกกำหนดความกว้าง (width) เป็นค่าอย่างใดอย่างหนึ่ง อาจเป็น pixel หรือ เปอร์เซ็นต์ เพราะเราไม่ต้องการให้มีการยืดที่ด้านข้าง แต่เว็บเราเลื่อนลงข้างล่าง ความสูง(height) จึงมักจะเป็นตัวแปรตาม คือไม่กำหนดค่า แล้วแต่ว่า เนื้อหาภายในมีมากน้อยเพียงใด เรามาดูว่า ปัญหาของค่า height นั้นมีอะไรบ้าง

Read more…

Related Articles