การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย
ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการแสดงผลข้อมูลใน iframe โดยเราสามารถเลือกจะให้
ข้อมูลในส่วนใด ของ iframe แสดงผลตามต้องการ
โค้ดตัวอย่างทั้งหมด พร้อมตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>css iframe position</title> <style type= "text/css" > body{ background-color:#FF9; } /* ส่วนกำหนดสำหรับ แสดง iframe */ div#myiframe_position1{ position:relative; margin:auto; display:block; width:270px; /*ความกว้างส่วนของเนื้อหา iframe ที่ต้องการแสดง*/ height:700px; /* ความสูงส่วนของเนื้อหา iframe ที่ต้องการแสดง */ overflow:hidden; } /* ส่วนกำหนด สำหรับ iframe */ div#myiframe_position1 iframe{ position:absolute; display:block; float:left; margin-top:-420px; /* ปรับค่าของ iframe ให้ขยับขึ้นบนตามตำแหน่งที่ต้องการ */ margin-left:-715px; /* ปรับค่าของ iframe ให้ขยับมาด้านซ้ายตามตำแหน่งที่ต้องการ */ } </style> </head> <body> <div id= "myiframe_position1" > frameborder= "0" width= "1000" height= "1000" ></iframe> </div> </body> </html> |
ตัวอย่าง
ส่วนสำคัญ คือ การกำหนดความกว้าง และความสูงของ iframe อย่างน้อยต้องกว้างหรือสูงเท่ากับ
ขอบเขตของเนื้อหาที่ต้องการแสดง ในที่นี้ใช้ width="1000" height="1000" หากกำหนดไม่เหมาะสม
อาจทำให้ข้อมูล iframe ไม่แสดงได้