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

04 October 2011 By Ninenik Narkdee
css iframe ตำแหน่ง

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



 การแสดงข้อมูลใน 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="http://www.ninenik.com" scrolling="no"
frameborder="0" width="1000" height="1000"></iframe>
</div>


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


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





Tags:: ตำแหน่ง css iframe







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











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