23 Feb 2012 04:13:22

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

04 October 2011

ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการแสดงผลข้อมูลใน 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="http://www.ninenik.com" scrolling="no"
frameborder="0" width="1000" height="1000"></iframe>
</div>


</body>
</html>

ตัวอย่าง

ส่วนสำคัญ คือ การกำหนดความกว้าง และความสูงของ iframe อย่างน้อยต้องกว้างหรือสูงเท่ากับ

ขอบเขตของเนื้อหาที่ต้องการแสดง ในที่นี้ใช้ width="1000" height="1000" หากกำหนดไม่เหมาะสม

อาจทำให้ข้อมูล iframe ไม่แสดงได้

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

บทความในหมวดที่่น่าสนใจ อื่นๆ

06 Dec 11 การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่าย อ่าน 968

บทความคนเข้าอ่านวันนี้

จำนวนผู้เยี่ยมชม 798296