Home > CSS techniques > เทคนิค css 1 บรรทัด

เทคนิค css 1 บรรทัด

วิธีแก้ปัญหา โดยใช้ css 1 บรรทัด หากใครทำ css อยู่ ต้องเคยเจอกับปํหญหาเหล่านี้ อย่างแน่นอน

  1. ทำ vertical align ด้วย line-height

    line-height:20px;

    กำหนด line-height ให้เท่ากับค่า height ของกล่อง

  2. ป้องกัน content ยาวเกิน layout ที่ใช้การ float และกำหนดความกว้าง

    #main{
    overflow:hidden;
    }

    #main มักจะหดสั้น เมื่อใช้การ float จนทำให้คอนเท้นหายไป แก้ด้วย overflow (อย่าลืมว่าต้องกำหนดความกว้างด้วย)

  3. ป้องกัน ลิ้งค์คำยาวๆ ขึ้นบรรทัดใหม่

    a{
    white-space:nowrap;
    }

    ช่วยให้ลิ้งค์ ขึ้นรรทัดใหม่ ทั้งคำ ไม่ขึ้นบรรทัดใหม่กลางคำ

  4. จัดตำแหน่งกล่องให้อยู่ตรงกลาง (แนวนอน)

    margin:0 auto;

    อย่าลืมใส่ความกว้างด้วย

  5. เอา vertical scrollbar ใน textarea ออก (IE)

    textarea{
    overflow:auto;
    }

    textarea ใน ie จะมี scrollbar อยู่แล้ว ถ้าอยากเอาออก ก็ใส่ตามนั้นครับ

  6. บังคับ page breaks ในหน้าปริ๊น

    h2{
    page-break-before:always;
    }

    สามารถ กำหนด จุดหยุดในหน้าเอกสาร เวลาปริ๊น

  7. เอาเส้นประ ที่ลิ้งค์ออก (FF)

    a:active, a:focus{
    outline:none;
    }

    เอา dotted outline ที่ลิ้งค์ออกเวลากดเม้าส์

ถ้าใครมีเทคนิค สั้นๆ แต่ได้ประโยชน์สูง โพสต์ไว้ที่นี่ได้เลยครับ

Related Articles


About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. July 14th, 2008 at 16:04 | #1

    form { margin:0px; padding:0px}
    body { margin:0px; padding:0px; background-color: #FFFFFF; font-family:verdana; color: #0000;}
    ผมจะเปลี่ยน font ไทยได้ยังครับ

  2. utt
    July 15th, 2008 at 23:53 | #2

    กดเปลี่ยนที่คีบอร์ด ได้เลยครับ :-\”

  3. October 21st, 2008 at 06:17 | #3

    body { margin:0px; padding:0px; background-color: #FFFFFF; font-family:verdana; color: #0000;}

    สังเกตุตรง verdana ครับ
    ให้เปลี่ยนตรงนี้ อาจจะเป็น Tahoma ก็ได้ครับผม

  4. piya
    March 25th, 2009 at 16:37 | #4

    ขอบคุณมากครับ เว็บนี้ดีที่สุดเลย ^_^

  5. December 6th, 2009 at 13:31 | #5

    ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ

  6. December 6th, 2009 at 13:32 | #6

    Thank you for good information

  1. No trackbacks yet.