การสร้าง scrollbar ในเอ็นทรี
posted on 05 Aug 2007 23:16 by oatato in BlogDesignมาเพิ่มสีสันและความแปลกใหม่ให้กับเอ็นทรีกันดีกว่า...
ถ้าคุณมีข้อความในเอ็นทรีที่ความยาวหลายบรรทัด
- - - - - - - - - - - - - - - - - - - - - - - - -
ยาว
ย้าว
ยาว
ยาวมาก
ยาวเกินไป
ยาวจนเกะกะ
ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ
- - - - - - - - - - - - - - - - - - - - - - - - -
วันนี้ขอแนะนำทางเลือกใหม่ในการจำกัดพื้นที่ของเนื้อหาโดยใช้ scrollbar เป็นตัวช่วย
ตอนเขียนเอ็นทรี ให้คลิกที่ปุ่ม 
แล้วแทรกโค้ดนี้ลงไปในส่วนที่ต้องการให้มีกรอบพร้อม scrollbar
<div style="OVERFLOW: auto; width: 100%; height: 100">เนื้อหายาว ๆ </div>
แล้วปัญหาดังกล่าวจะหมดไป
ยาว
ย้าว
ยาว
ยาวมาก
ยาวเกินไป
ยาวจนเกะกะ
ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ
เพิ่มเติม
สามารถปรับเปลี่ยนความกว้างและความยาวกันได้ตามชอบ
และสามารถเพิ่มเติมคุณสมบัติอื่น ๆ ได้อีกด้วย ตัวอย่างเช่น
<div style="OVERFLOW: auto; width: 80%; height: 150; color:#FFFFFF; background-color:#C0F060">เนื้อหายาว ๆ </div>
- width: 80% หมายถึง ความกว้างของกรอบเป็น 80% ของเนื้อที่การเขียน
- height: 150 หมายถึง ความสูงของกรอบเท่ากับ 150 พิกเซล
- color:#FFFFFF หมายถึง สีตัวอักษรในกรอบมีสีขาว
- background-color:#C0F060 หมายถึง สีพื้นในกรอบมีสีเขียว
ยาว
ย้าว
ยาว
ยาวมาก
ยาวเกินไป
ยาวจนเกะกะ
ยาวจนกินเนื้อที่บนหน้าจอในบล็อกคุณ
ใครสนใจก็สามารถนำไปทดลองใช้กันได้นะครับ
ว่าไปแล้ว แบบนี้ก็ดีนะคะ
#1 By ตุ้มเป๊ะ on 2007-08-06 19:38