Archive for the ‘ css ’ Category
สำหรับคนที่ทำเว็บและใช้เว็บก็คงจะคุ้นเคยกันดีกับหน้า sitemap ซึ่งโดยปกติก็จะเป็นหน้าที่รวบรวมลิงค์ไปยังทุกๆหน้ามาเรียงกันไว้อย่างมีระบบ สำหรับตัวเราเองเวลาทำเว็บแล้วก็จะทิ้งส่วนนี้ไว้เป็นส่วนสุดท้าย ซึ่งยอมรับเลยว่าบางครั้งไม่อยากทำเท่าไหร่ เพราะมันออกแนวน่าเบื่อและสำหรับหลายๆงานมันก็ไม่ได้อยู่ใน requirement ด้วยซ้ำ แต่ก็ต้องทำเพราะเป็นส่วนที่ควรจะทำ ซึ่งเวลาทำเข้าจริงๆแล้วก็ไม่พ้นต้องใช้ unordered list ไปเรื่อยๆ เหตุผลเพราะมันง่ายที่สุด แต่ผลลัพท์ที่ได้ออกมาก็ไม่ได้สวยงามเลยซักนิด วันนี้ก็เลยจะลองใช้ css เขียนดูบ้าง โดยอกแบบให้ใช้กับเว็บขนาดเล็กถึงกลาง กะว่าเขียนทิ้งไว้เลย งานไหนๆก็จะใช้ประมาณนี้ เปลี่ยนแค่สีอย่างเดียว พอลงมือทำโดยใช้ css2 แล้วก็พบว่ามันไม่พอที่จะทำรูปแบบโครงสร้างแบบ tree อย่างที่ตั้งใจไว้ เลยต้องตัดใจใช้ css3 ซึ่งส่วนที่สำคัญคือ pseudo-class selector แล้วก็จัดการกับ ie 6 ด้วย javascript hack นิดๆหน่อย ออกมาก็ได้หน้าตาประมาณนี้ โค้ทที่เขียนและรูปภาพที่ใช้ก็พยายามให้มีน้อยที่สุด ที่ไม่ชอบเลยคือ javascript hack แต่จริงๆแล้วเวลาใช้ก็ไม่ต้อง hack ก็ได้ เพราะถ้าไม่นับ ie6 แล้วก็ยังสามารถดู sitemap ในบราวเซอร์อื่นๆที่ไม่สนับสนุน css3 ได้ ได้อาจจะผิดเพี้ยนไปบ้างเท่านั้นเอง [ READ MORE ]
ปรากฎการณ์ลึกลับที่เกิดขึ้นมากมายใน ie6 ทำให้คนทำเว็บอย่างเราๆต้องเสียเวลาไปมากในการมานั่งตามแก้ไข ซึ่งหนึ่งในปัญหาสำคัญที่เจอใน ie6 คือปัญหาที่เกี่ยวกับการใช้ float กรณีศึกษา “กล่องหล่น” ทดลองสร้างกล่อง 2 กล่อง กล่องละ 200px(รวมขอบแล้ว) อยู่ภายใต้กล่องขนาดใหญ่ขนาด 400px โดยให้ทั้งสองกล่อง float ไปทางซ้าย และกล่องแรกอยู่ห่างจากขอบด้านซ้าย 5 pixels เมื่อดูใน ie8(และบราวเซอร์อื่นๆ) จะได้ผลลัพท์ที่ถูกต้อง ดังนี้ แต่ถ้าดูใน ie6 หล่ะ? งานเข้าหล่ะสิ มันเกิดอะไรขึ้นเนี่ย กรอบขนาด 400 ใส่กล่องขนาด 200 สองชิ้น ก็รวมเป็น 400 พอดี แล้วทำไมมันตกลงมาได้ ???! ก่อนที่จะถอนหายใจเฮือกใหญ่แล้วเปลี่ยนใจกลับไปใช้ table ลองมาศึกษาปัญหาอย่างเป็นระบบ แล้วหาทางแก้ไขอย่างถูกต้อง(เท่าที่จะถูกได้ใน ie6) เพื่อชีวิตที่ดีกว่า[ READ MORE ]
วิธีง่ายๆที่จะเปลี่ยนจากการเขียน html layout โดยใช้ตารางมาเป็น css/div layout สำหรับคนที่กำลังลังเลที่จะใช้ css แทนตารางแบบเดิมๆ ก่อนอื่นดูตารางก่อน โค้ทของตาราง This is Header Main Menu -Menu1 Content goes here! This is content! ดูแล้วก็ง่ายๆ ตามสไตล์ที่คุ้นเคย แต่ดูแล้วยุ่งยากใจพิลึก ทีนี้เราจะจับเจ้า layout ที่คุ้นเคยนี้แหละมาเขียนเป็น css[ READ MORE ]
มันเริ่มจากการอ่านเว็บไปเรื่อยๆและเจอกระแส tableless html layout มานาน แต่ก็บอกตัวเองว่าไม่มีเวลาสักทีที่จะเปลี่ยนสไตล์การเขียนเว็บของตัวเองจาก “old school html” ที่เน้นใช้ตารางในการจัดหน้า html มาเป็น css based layout ที่ใช้ div และ css เป็นหลัก บอกว่าไม่มีเวลาจริงๆแล้วก็เป็นข้ออ้างนั่นแหละ เพราะการเปลี่ยนจากสิ่งที่คุ้นเคยมาใช้อะไรใหม่ๆมันต้องเรียนรู้อะไรมากมาย ทำให้ไม่อยากจะเปลี่ยนแปลงอะไรในบางจังหวะของชีวิตที่ยึดเอาความขี้เกียจเป็นที่ตั้ง จนกระทั่งได้จังหวะก็เริ่มมาศึกษาจริงๆจัง กว่าจะเขียนได้คล่องก็ไม่ง่ายแต่ก็ไม่ได้ยากมากมายอย่างที่คิดไว้[ READ MORE ]