การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย

เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee
css iframe ตำแหน่ง

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css iframe ตำแหน่ง

ดูแล้ว 43,787 ครั้ง


 การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย

 
ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการแสดงผลข้อมูลใน iframe โดยเราสามารถเลือกจะให้
ข้อมูลในส่วนใด ของ iframe แสดงผลตามต้องการ
 
โค้ดตัวอย่างทั้งหมด พร้อมตัวอย่าง
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
<iframe src="https://www.ninenik.com" scrolling="no"
frameborder="0" width="1000" height="1000"></iframe>
</div>


</body>
</html>
 
ตัวอย่าง
 
 
ส่วนสำคัญ คือ การกำหนดความกว้าง และความสูงของ iframe อย่างน้อยต้องกว้างหรือสูงเท่ากับ
ขอบเขตของเนื้อหาที่ต้องการแสดง ในที่นี้ใช้ width="1000" height="1000"  หากกำหนดไม่เหมาะสม
อาจทำให้ข้อมูล iframe ไม่แสดงได้


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ