• knife set
  • feed

    จัดตำแหน่ง fixed ด้วย CSS

    posted on 25 Jul 2009 22:03 by itshee in Twitter

    css ในปัจจุบันนั้นเรียกได้ว่าเป็นมาตรฐานในการสร้างเว็บไซต์เลยทีเดียว ซึ่งจะเห็นได้ว่าเว็บไซต์รุ่นใหม่เกือบทั้งหมดใช้ css ในการจัดรูปแบบ

    ในการจัดตำแหน่ง fixed นั้น ปกติแล้วจะไม่ค่อยใช้กันเท่าไรนัก เนื่องจากตามธรรมชาติของเว็บไซต์ ที่มักจะเป็นหน้ายาวๆ ซึ่งการวางตำแหน่งสิ่งต่างๆ มักจะปล่อยให้วางไหลไปตามความยาวของหน้า แต่บางครั้งเราอาจต้องการให้ ปุ่ม แบนเนอร์ หรือป้าย ที่ต้องการอยู่ตำแหน่งเดิมตลอด ไม่ว่าคนใช้งานจะเลื่อนหน้าไปทางไหน ซึ่งสามารถทำได้ผ่าน position: fixed และระบุระยะที่ต้องการ เช่น

    • position:fixed; top: 10px; อันนี้จะวาง fixed ไว้ห่างจากขอบบน 10 พิกเซล
    • position:fixed; bottom: 20px; left: 30px; อันนี้จะวาง fixed ไว้ห่างจากขอบล่าง 20 พิกเซล แล้วถัดมาจากขอบซ้าย 30 พิกเซล

    ค่าพวกนี้ปกติแล้วจะใส่ในไฟล์ css และเรียกใช้ผ่าน class หรือ id แต่ตัวอย่างนี้จะใส่ลงไปโดยตรง จากบล็อกวันก่อนเขียนเรื่อง ใส่ปุ่ม retweet ไว้ในบล็อก (บวกกับไอเดียจาก บล็อกคุณ Tonhor เรื่อง retweet) โดยว่าปุ่มนี้ควรจะอยู่ตำแหน่งล่างของหน้า เพื่อให้คนอ่าน อ่านจนจบแล้วกดปุ่ม retweet ได้ทันที แทนที่ว่าอ่านจบแล้วต้องย้อนกลับมาหาปุ่ม


    จากหน้าเดิม ใส่โค้ดแค่ว่า

    <script type="text/javascript" src="http://exteenscript.googlecode.com/files/retweet.js"> </script> <a class="retweet vert self" href=""></a>


    คราวนี้ใส่ css เพิ่มเพื่อจัดตำแหน่ง ให้วางซ้ายล่างห่างขอบล่าง 10 พิกเซล ห่างขอบซ้าย 10 พิกเซล 

    <div style="position:fixed;bottom:10px;left:10px;"> <script type="text/javascript" src="http://exteenscript.googlecode.com/files/retweet.js"> </script> <a class="retweet vert self" href=""></a> </div>

    ซึ่งคราวนี้ ปุ่ม retweet ก็จะแสดงออกมามุมซ้ายล่างตลอด นอกจากนี้หากใครอยากดัดแปลง ใส่กรอบ ใส่พื้นหลัง ก็สามารถปรับได้ตามสะดวกผ่าน css

    ขอบคุณครับ

    #16 By lamptan (58.8.173.233) on 2010-02-25 10:36

    confused smile

    #15 By ขายเกมส์ (124.157.235.157) on 2009-08-13 22:24

    ขอบคุณมากครับ แอบเอาไปแก้โค๊ดเล่น

    #14 By ฟ้าใส on 2009-08-05 14:25

    Hot! แอบไปลง อิอิ

    ขอบคุณมากครับ แต่วิธีแก้มีหลายแบบหรอครับ

    เห็นบางที่ไม่เหมือนคนอื่น เช่น คุณ [url=http://tonhor.exteen.com]TonHor[/url] อะครับ

    #13 By cm!rage on 2009-08-01 12:36

    ไม่ได้มา exteen เสียนาน
    คุณมานพสบายดีนะคะ big smile

    ต้องระวังสุขภาพหน่อยค่ะช่วงนี้

    #12 By Mrs. Holmes on 2009-07-29 17:30

    ขอเอาไปใช้นะครับ ขอบคุณมาก^^Hot!

    #11 By Chuy on 2009-07-27 11:27

    เลิศมากค่ะ big smile Hot!

    #10 By ไอ้แป้น : i-phan on 2009-07-26 20:22

    Hot!

    #9 By mahaoath on 2009-07-26 20:16

    มีประโยชน์มากๆ
    เอาไปประยุกต์ใช้ได้หลายอย่างเชียวbig smile Hot!
    css นี่มัน powerful ดีจริงๆ
    จะลองเล่นนะคะ

    #6 By ::housewife:: on 2009-07-26 03:44

    อยากลองทำมั่ง.. sad smile

    #5 By PunPrai on 2009-07-26 03:24

    เดี๋ยวจะลองดูบ้างนะคะbig smile

    #4 By ~memay~ on 2009-07-26 01:41

    โอ้วว ขอบคุณมากครับ เจ๋งจริง!Hot!

    #3 By sage_nu on 2009-07-25 23:56

    แบบนี้ดีเลย ผมก็ลืมนึกไปเลย ไปแก้แต่ในโค้ดสะนี่

    สงสัยใกล้สอบ ฮ่าๆ confused smile

    #2 By TonHor on 2009-07-25 22:38

    ของผมเอาไว้กับไซด์บาร์เหมือนเดิมครับ เพราะแบ็คกราวด์มันลาย มองไม่เห็นไอค่อน

    แต่เดี๋ยวถ้าเปลี่ยนแบ็คกราวนด์ ว่าจะเอาไปใส่big smile

    #1 By ขุนกระบี่ on 2009-07-25 22:33