CSS Learninghttp://www.ninenik.comรวมบทความ CSSth-THSun, 05 Feb 2012 18:20:03 +0700Copyright ninenik.comCMSPro เว็บไซต์สำเร็จรูปhttp://www.ninenik.com/images/logo_ninenik.gifhttp://www.ninenik.comการใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่ายhttp://www.ninenik.com/การใช้งาน_css_จัดตำแหน่ง_ซ้อนข้อความบนรูปภาพอย่างง่าย-426.html ตัวอย่างโค้ดและคำแนะนำต่อไปนี้ เป็นวิธีการใช้งาน css ในการกำหนดตำแหน่ง

ของข้อมูลที่ต้องการแสดง ซ้อนทับ บนรูปภาพที่ต้องการ โดยสามารถนำไปประยุกต์
เพิ่มเติมให้เหมาะกับรูปแบบตามต้องการได้
 
ตัวอย่าง
 
ซ้อนทับ ชิดขอบบน

ซ้อนทับ ชิดขอบซ้าย

ซ้อนทับ ชิดขอบล่าง

ซ้อนทับ ชิดขอบขวา
 
ตัวอย่างโค้ดทั้งหมด
 
<!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></title>

<style type="text/css">
.holder_wrap{
	position:relative;
	margin:auto;
	display:block;
	height:120px; /* กำหนดความสูงส่วนพื้นที่คลุมเนื้อหาทั้งหมด */
}
.holder_wrap_img{
	position:absolute;/* กำหนดการจัดตำแหน่งส่วนพื้นที่คลุมเนื้อหารุปและข้อความซ้อนทับ */
}
.holder_wrap_img img{
	position:relative; /* กำหนดการจัดตำแหน่งของรูป */
}
/* css ซ้อนทับ ชิดขอบบน */
.inner_position_top{
	position:absolute;
	display:block;	
	background-color:#CC99FF;	
	height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
	width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	top:0px; /* css กำหนดชิดด้านบน  */
	z-index:999;
}
/* css ซ้อนทับ ชิดขอบด้านซ้าย */
.inner_position_left{
	position:absolute;
	display:block;	
	background-color:#99FFCC;	
	height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
	top:0px; /* css กำหนดชิดด้านบน  */
	left:0px; /* css กำหนดชิดซ้าย  */
	z-index:999;
}
/* css ซ้อนทับ ชิดขอบล่าง */
.inner_position_bottom{
	position:absolute;
	display:block;	
	background-color:#FFCCCC;	
	height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
	width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	bottom:0px; /* css กำหนดชิดด้านล่าง  */
	z-index:999;	
}
/* css ซ้อนทับ ชิดขอบด้านขวา */
.inner_position_right{
	position:absolute;
	display:block;	
	background-color:#FFFF99;	
	height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
	top:0px; /* css กำหนดชิดด้านบน  */
	right:0px; /* css กำหนดชิดขวา  */
	z-index:999;
}
</style>
</head>

<body>



<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_top">
ซ้อนทับ ชิดขอบบน
</div>
</div>
</div>

<br style="clear:both;float:left;" />


<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_left">
ซ้อนทับ ชิดขอบซ้าย
</div>
</div>
</div>

<br style="clear:both;float:left;" />


<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_bottom">
ซ้อนทับ ชิดขอบล่าง
</div>
</div>
</div>

<br style="clear:both;float:left;" />

<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_right">
ซ้อนทับ ชิดขอบขวา
</div>
</div>
</div>




</body>
</html>
 
]]>Tue, 06 Dec 2011 16:32:39 +0700การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่ายhttp://www.ninenik.com/การแสดงข้อมูลใน_iframe_ตามตำแหน่งที่ต้องการด้วย_css_อย่างง่าย-422.html การแสดงข้อมูลใน 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 ไม่แสดงได้
]]>Tue, 04 Oct 2011 10:39:11 +0700จัดข้อความยาว ให้อยู่ในกรอบ ด้วย css break wordhttp://www.ninenik.com/จัดข้อความยาว_ให้อยู่ในกรอบ_ด้วย_css__break_word-412.htmlการจัดตัวอักษรที่เป็นข้อความต่อเนื่องยาวติดกัน ในกรณีแสดงใน
พื้นที่ที่กำหนดขอบเขตการแสดง จะเจอกับปัญหา ข้อความล้นออก
นอกกรอบ ที่ต้องการ ดูตัวอย่าง ประกอบ

hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh


hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

css สำหรับใช้กำหนด ให้ข้อความแสดงในกรอบ ตามรูปที่ 2

word-wrap:break-word;

ตัวอย่างโค้ดทดสอบทั้งหมด
 

<!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></title>
<style type="text/css">
div#mylayout_1{
	display:block;
	width:100px;
	border:1px solid #09C;	
	background-color:#FCC;
}
div#mylayout_2{
	display:block;
	width:100px;
	border:1px solid #09C;	
	background-color:#CFC;
	word-wrap:break-word;
}
</style>
</head>

<body>


<div id="mylayout_1">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</div>
<br />
<br />
<div id="mylayout_2">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh 
</div>

</body>
</html>

 

]]>Sun, 03 Apr 2011 08:00:00 +0700การแบ่งหน้า การพิมพ์ สำหรับข้อมูลต่อเนื่อง ด้วย css อย่างง่ายhttp://www.ninenik.com/การแบ่งหน้า_การพิมพ์_สำหรับข้อมูลต่อเนื่อง_ด้วย_css_อย่างง่าย-400.htmlในกรณีที่เรามีรูปแบบ ข้อมูลที่ต้องการพิมพ์ มีการแสดงผลข้อมูลแบบต่อเนื่อง
แต่เราต้องการพิมพ์ข้อมูลโดย ให้ บราวเซอร์แบ่งหน้าให้โดยอัตโนมัติ ตามขอบเขต
ของข้อมูลที่เรากำหนด เพื่อให้สะดวกในการพิมพ์ข้อมูลได้ง่าย

ตัวอย่างโค้ดสำหรับทดสอบ
 

<!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 print report table continue</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
}
html {
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
	color:#000000;
}
body {
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
	padding:0;
	margin:0;
	color:#000000;
}
.headTitle {
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
}
.headerTitle01 {
	border:1px solid #333333;
	border-left:2px solid #000;
	border-bottom-width:2px;
	border-top-width:2px;
	font-size:11px;
}
.headerTitle01_r {
	border:1px solid #333333;
	border-left:2px solid #000;
	border-right:2px solid #000;
	border-bottom-width:2px;
	border-top-width:2px;
	font-size:11px;
}
/* สำหรับช่องกรอกข้อมูล  */
.box_data1 {
	font-family:Arial, "times New Roman", tahoma;
	height:18px;
	border:0px dotted #333333;
	border-bottom-width:1px;
}
/* กำหนดเส้นบรรทัดซ้าย  และด้านล่าง */
.left_bottom {
	border-left:2px solid #000;
	border-bottom:1px solid #000;
}
/* กำหนดเส้นบรรทัดซ้าย ขวา และด้านล่าง */
.left_right_bottom {
	border-left:2px solid #000;
	border-bottom:1px solid #000;
	border-right:2px solid #000;
}
/* สร้างช่องสี่เหลี่ยมสำหรับเช็คเลือก */
.chk_box {
	display:block;
	width:10px;
	height:10px;
	overflow:hidden;
	border:1px solid #000;
}
/* css ส่วนสำหรับการแบ่งหน้าข้อมูลสำหรับการพิมพ์ */
@media all
{
	.page-break	{ display:none; }
	.page-break-no{ display:none; }
}
@media print
{
	.page-break	{ display:block;height:1px; page-break-before:always; }
	.page-break-no{ display:block;height:1px; page-break-after:avoid; }	
}
</style>
</head>

<body>
<?php for($i=1;$i<=5;$i++){ ?>
<div class="page-break<?=($i==1)?"-no":""?>">&nbsp;</div>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">Page <?=$i?></td>
  </tr>
  <tr>
    <td align="center" class="headTitle" style="font-size:15px;">ใบรับฝากรวม<br />
      RECEIPT FOR BULK POSTING <br /></td>
  </tr>
  <tr>
    <td align="left"><table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">ไปรษณียภัณฑ์</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">ลงทะเบียน</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">รับรอง</td>
        </tr>
        <tr>
          <td>ได้รับฝาก</td>
          <td align="center">&nbsp;</td>
          <td align="left">Letter-Post items</td>
          <td align="center">&nbsp;</td>
          <td align="left">Registered</td>
          <td>&nbsp;</td>
          <td align="left">Certified</td>
        </tr>
        <tr>
          <td>Received</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">พัสดุไปรษณีย์</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">รับประกัน</td>
          <td>&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="center">&nbsp;</td>
          <td align="left">Parcels</td>
          <td align="center">&nbsp;</td>
          <td align="left">Insured</td>
          <td>&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td width="200" align="center"> ไว้ดังนี้ ตราประจำวัน</td>
        </tr>
        <tr>
          <td>จาก
            <input name="textfield" type="text" class="box_data1" id="textfield" style="text-align:left;width:500px;"   /></td>
          <td align="center">As Follows Date Stamp</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left">From</td>
  </tr>
  <tr>
    <td align="left"><table width="750" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-top:5px double #000;">
        <tr>
          <td width="50" rowspan="2" class="headerTitle01"  align="center" valign="middle">ลำดับ<br />
            No.</td>
          <td width="200" rowspan="2" class="headerTitle01"    align="center" valign="middle">นามผู้รับ<br />
            Name Of Addressee</td>
          <td width="130" rowspan="2" class="headerTitle01"    align="center" valign="middle">ปลายทาง<br />
            Destination</td>
          <td width="70" rowspan="2" class="headerTitle01"   align="center" valign="middle">เลขที่<br />
            Number</td>
          <td width="100" rowspan="2" class="headerTitle01"    align="center" valign="middle">น้ำหนัก (กรัม)<br />
            Weight (Grammes)</td>
          <td colspan="2" class="headerTitle01"    align="center" valign="bottom">ค่าบริการ<br />
            Postal Charge</td>
          <td width="100" rowspan="2" class="headerTitle01_r"   align="center" valign="middle">หมายเหตุ<br />
            Remarks</td>
        </tr>
        <tr>
          <td width="70"   align="center" valign="bottom" class="headerTitle01">บาท<br />
            Baht</td>
          <td width="30" class="headerTitle01"   align="center" valign="bottom">สต.
            Stg.</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">1</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">2</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">3</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">4</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">5</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">6</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">7</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">8</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">9</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">10</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="4" align="left" style="border-top:2px solid #000;">รวมทั้งสิ้น 
            Total
            <input name="textfield2" type="text" class="box_data1" id="textfield2" style="text-align:center;width:250px;"   />
            ฉบับ/ห่อ
            Pieces</td>
          <td align="center" style="border-top:2px solid #000;">เป็นเงิน 
            Amount</td>
          <td height="20" align="left" class="left_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;">&nbsp;</td>
          <td align="left" class="left_right_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;">&nbsp;</td>
          <td align="left" style="border-top:2px solid #000;">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="left"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50%" align="left">- ใบรับฝากนี้ใช้เป็นหลักฐานการฝากส่ง โปรดเก็บรักษาไว้จนหมดอายุ<br />
            การสอบสวน คือ ระยะเวลา 6 เดือน นับจากวันต่อจากวันที่ฝากส่ง<br /></td>
          <td width="50%" align="left">&nbsp;</td>
        </tr>
        <tr>
          <td align="left">- การติดต่อในเรื่องใดเกี่ยวกับการฝากส่ง ต้องนำใบฝากฉบับนี้<br />
            มาแสดงทุกครั้ง มิฉะนั้น ปณท อาจไม่ทำการตรวจสอบหรือสอบสวนให้</td>
          <td align="left"><table width="300" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="100" align="right">พนักงานรับฝาก</td>
                <td width="62%"><input name="textfield10" type="text" class="box_data1" id="textfield10" style="text-align:center;width:200px;"   /></td>
              </tr>
              <tr>
                <td align="right">Counter Clerk</td>
                <td>&nbsp;</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
<?php } ?>
</body>
</html>

ตัวอย่างโค้ดข้างต้น เป็นการสมมติ การวนลูปแสดงข้อมูลอย่างต่อเนื่อง
โดยมีการกำหนด ส่วนสำหรับแบ่งการพิมพ์ ด้วย โค้ด PHP ร่วมกับ CSS
 

<div class="page-break<?=($i==1)?"-no":""?>">&nbsp;</div>

ซึ่งหมายถึง ถ้าเป็น ข้อมูลแรก $i==1 ให้แสดง
div ที่มี class เท่ากับ page-break-no คือยังไม่ต้องเริ่มทำการแบ่งหน้าสำหรับพิมพ์
แต่ถ้าข้อมูลที่ไม่ใช่ข้อมูลแรก ให้เริ่มทำการแบ่งหน้าสำหรับการพิมพ์ด้วย การกำหนด
div ให้มี class เท่ากับ page-break

ทดสอบตัวอย่างตามลิ้งค์ด้านล่าง
http://www.ninenik.com/demo/css_report_table2.php
เมื่อเข้าไปที่หน้าดังกล่าว แล้วให้คลิกขวา แล้วเลือก print preview
จะเห็นว่า แม้ข้อมูลที่แสดง จะเรียกต่อเนื่องกัน
แต่ข้อมูลสำหรับการพิมพ์ จะมีการแบ่งหน้าให้อัตโนมัติ ตามตำแหน่งที่เรากำหนด

]]>Wed, 23 Feb 2011 08:00:00 +0700ตัวอย่าง การสร้างรูปแบบ ตารางรายงานข้อมูล ด้วย css อย่างง่ายhttp://www.ninenik.com/ตัวอย่าง_การสร้างรูปแบบ_ตารางรายงานข้อมูล_ด้วย_css_อย่างง่าย-399.htmlตัวอย่าง การสร้างรูปแบบ ตารางรายงานข้อมูลต่อไปนี้ เป็นการใช้งาน css ทั้งแบบ
in-line และ Internal

ศึกษาการใช้งาน css ใน แบบ in-line และ Internal ได้ที่
http://www.ninenik.com/การใช้งาน_CSS__ศึกษาวิธีการนำ_CSS_ไปใช้กับ_HTML-59.html

ดูไฟล์ตัวอย่างได้ที่
http://www.ninenik.com/demo/css_report_table.php
ตัวอย่างโค้ดไฟล์ตัวอย่าง
 

<!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 report table</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
}
html {
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
	color:#000000;
}
body {
	font-family:Arial, "times New Roman", tahoma;
	font-size:12px;
	padding:0;
	margin:0;
	color:#000000;
}
.headTitle {
	font-size:12px;
	font-weight:bold;
	text-transform:uppercase;
}
.headerTitle01 {
	border:1px solid #333333;
	border-left:2px solid #000;
	border-bottom-width:2px;
	border-top-width:2px;
	font-size:11px;
}
.headerTitle01_r {
	border:1px solid #333333;
	border-left:2px solid #000;
	border-right:2px solid #000;
	border-bottom-width:2px;
	border-top-width:2px;
	font-size:11px;
}
/* สำหรับช่องกรอกข้อมูล  */
.box_data1 {
	font-family:Arial, "times New Roman", tahoma;
	height:18px;
	border:0px dotted #333333;
	border-bottom-width:1px;
}
/* กำหนดเส้นบรรทัดซ้าย  และด้านล่าง */
.left_bottom {
	border-left:2px solid #000;
	border-bottom:1px solid #000;
}
/* กำหนดเส้นบรรทัดซ้าย ขวา และด้านล่าง */
.left_right_bottom {
	border-left:2px solid #000;
	border-bottom:1px solid #000;
	border-right:2px solid #000;
}
/* สร้างช่องสี่เหลี่ยมสำหรับเช็คเลือก */
.chk_box {
	display:block;
	width:10px;
	height:10px;
	overflow:hidden;
	border:1px solid #000;
}
</style>
</head>

<body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="center" class="headTitle" style="font-size:15px;">ใบรับฝากรวม<br />
      RECEIPT FOR BULK POSTING <br /></td>
  </tr>
  <tr>
    <td align="left"><table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">ไปรษณียภัณฑ์</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">ลงทะเบียน</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">รับรอง</td>
        </tr>
        <tr>
          <td>ได้รับฝาก</td>
          <td align="center">&nbsp;</td>
          <td align="left">Letter-Post items</td>
          <td align="center">&nbsp;</td>
          <td align="left">Registered</td>
          <td>&nbsp;</td>
          <td align="left">Certified</td>
        </tr>
        <tr>
          <td>Received</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">พัสดุไปรษณีย์</td>
          <td align="center"><div class="chk_box"></div></td>
          <td align="left">รับประกัน</td>
          <td>&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td align="center">&nbsp;</td>
          <td align="left">Parcels</td>
          <td align="center">&nbsp;</td>
          <td align="left">Insured</td>
          <td>&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td>&nbsp;</td>
          <td width="200" align="center"> ไว้ดังนี้ ตราประจำวัน</td>
        </tr>
        <tr>
          <td>จาก
            <input name="textfield" type="text" class="box_data1" id="textfield" style="text-align:left;width:500px;"   /></td>
          <td align="center">As Follows Date Stamp</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left">From</td>
  </tr>
  <tr>
    <td align="left"><table width="750" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-top:5px double #000;">
        <tr>
          <td width="50" rowspan="2" class="headerTitle01"  align="center" valign="middle">ลำดับ<br />
            No.</td>
          <td width="200" rowspan="2" class="headerTitle01"    align="center" valign="middle">นามผู้รับ<br />
            Name Of Addressee</td>
          <td width="130" rowspan="2" class="headerTitle01"    align="center" valign="middle">ปลายทาง<br />
            Destination</td>
          <td width="70" rowspan="2" class="headerTitle01"   align="center" valign="middle">เลขที่<br />
            Number</td>
          <td width="100" rowspan="2" class="headerTitle01"    align="center" valign="middle">น้ำหนัก (กรัม)<br />
            Weight (Grammes)</td>
          <td colspan="2" class="headerTitle01"    align="center" valign="bottom">ค่าบริการ<br />
            Postal Charge</td>
          <td width="100" rowspan="2" class="headerTitle01_r"   align="center" valign="middle">หมายเหตุ<br />
            Remarks</td>
        </tr>
        <tr>
          <td width="70"   align="center" valign="bottom" class="headerTitle01">บาท<br />
            Baht</td>
          <td width="30" class="headerTitle01"   align="center" valign="bottom">สต.
            Stg.</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">1</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">2</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">3</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">4</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">5</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">6</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">7</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">8</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">9</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">10</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">11</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">12</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">13</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">14</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">15</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">16</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">17</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">18</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">19</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">20</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">21</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">22</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">23</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">24</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="center" class="left_bottom">25</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_bottom">&nbsp;</td>
          <td align="left" class="left_right_bottom">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="4" align="left" style="border-top:2px solid #000;">รวมทั้งสิ้น 
            Total
            <input name="textfield2" type="text" class="box_data1" id="textfield2" style="text-align:center;width:250px;"   />
            ฉบับ/ห่อ
            Pieces</td>
          <td align="center" style="border-top:2px solid #000;">เป็นเงิน 
            Amount</td>
          <td height="20" align="left" class="left_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;">&nbsp;</td>
          <td align="left" class="left_right_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;">&nbsp;</td>
          <td align="left" style="border-top:2px solid #000;">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="left"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50%" align="left">- ใบรับฝากนี้ใช้เป็นหลักฐานการฝากส่ง โปรดเก็บรักษาไว้จนหมดอายุ<br />
            การสอบสวน คือ ระยะเวลา 6 เดือน นับจากวันต่อจากวันที่ฝากส่ง<br /></td>
          <td width="50%" align="left">&nbsp;</td>
        </tr>
        <tr>
          <td align="left">- การติดต่อในเรื่องใดเกี่ยวกับการฝากส่ง ต้องนำใบฝากฉบับนี้<br />
            มาแสดงทุกครั้ง มิฉะนั้น ปณท อาจไม่ทำการตรวจสอบหรือสอบสวนให้</td>
          <td align="left"><table width="300" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="100" align="right">พนักงานรับฝาก</td>
                <td width="62%"><input name="textfield10" type="text" class="box_data1" id="textfield10" style="text-align:center;width:200px;"   /></td>
              </tr>
              <tr>
                <td align="right">Counter Clerk</td>
                <td>&nbsp;</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

ตัวอย่างการใช้ css แบบ inline บรรทัดที่ 132
 

style="border-collapse:collapse;border-top:5px double #000;"

เป็นการกำหนดให้ขอบด้านบนของตาราง แสดงขีด 2 เส้น

]]>Tue, 22 Feb 2011 00:40:44 +0700วิธีใช้ css จัดรูปแบบ เนื้อหา contents ที่ต้องการแสดง บน google maphttp://www.ninenik.com/วิธีใช้_css_จัดรูปแบบ_เนื้อหา_contents_ที่ต้องการแสดง_บน_google_map-346.htmlการจัดรูปแบบ เนี้อหา บน google map ในที่นี้ไม่ได้หมายถึง การนำส่วนต่างๆ ที่ต้องการไปแสดง ใน google map โดยตรง เหมือนกับตัว marker  แต่เป็นการ นำไปแสดง ให้อยู่บน div ที่แสดงแผนที่ อีกทีหนึ่ง ซึ่งถ้ามีความเข้าใจในส่วนนี้ จะสามารถนำไปประยุกต์ กับการสร้างปุ่มควบคุมแผนที่ ให้อยู่บนแผนที่ได้ตามต้องการ

ตัวอย่างเช่น เราต้องการสร้างปุมควบคุมแผนที่ ขึ้นมาใช้เอง แทนปุ่มที่ google map กำหนดมาให้ เป็นต้น

ความเข้าใจเกี่ยวกับ css ที่จำเป็นสำหรับการใช้งานนี้ คือ property position ของ css ศึกษาได้จากบทความ
http://www.ninenik.com/รู้จัก_property_position_ของ_css_ให้มากขึ้น_ด้วย_ตัวอย่าง_และคำอธิบาย-251.html

ตัวอย่าง
 

<div id="contain_map">
<div id="map_canvas"></div>
<div id="my_navigator">
  <img src="images/compass.png" width="74" height="74" />
</div>
</div>

div id=contain_map คือ div ตัวนอกสุด
div id=map_convas คือ div สำหรับแผนที่
div id=my_navigator คือ div สำหรับตัวควบคุมที่ต้องการ

css สำหรับ แผนที่
 

/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	position:relative;
	width:550px;
	height:400px;
	margin:auto;
}

css สำหรับ div ตัวนอกสุด ให้กำหนด position เป็น relative และความกว้างความสูง เท่ากับแผนที่
 

/* css สำหรับ div คลุม google map อีกที */
#contain_map{
	position:relative;
	width:550px;
	height:400px;
	margin:auto;	
	margin-top:50px;
}

ส่วน css สำหรับตัวควบคุม ให้กำหนด position เป็น absolute แล้ว กำหนดการจัดตำแหน่ง top, right , bottom และ left ได้ตามต้องการ เช่น
 

/* กำหนดบริเวณมุมบนขวา ห่างจากด้านบน 10px และห่างจากด้านขวา 10px */
#my_navigator{
	position:absolute;	
	top:10px;
	right:10px;
}
/* กำหนดบริเวณมุมบนซ้าย ห่างจากด้านบน 10px และห่างจากด้านซ้าย 10px */
#my_navigator{
	position:absolute;	
	top:10px;
	left:10px;
}
/* กำหนดชิดขอบล่าง */
#my_navigator{
	position:absolute;	
	bottom:0px;
}

เมื่อเข้าใจในหลักการกำหนด css แล้ว ส่วนที่ต้องปรับเพิ่มเติม คือ การกำหนด ให้ google map แสดง หรือไม่แสดงปุ่มควบคุมของ google map เพื่อจะใช้ส่วนควมคุมที่เราสร้างขึ้นแทน สามารถกำหนดได้ในส่วนต่อไปนี้
 

var myOptions = {
    zoom: 13, // กำหนดขนาดการ zoom
    center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
    mapTypeControl:false, // ปิดส่วนควบคุมสำหรับเลือกประเภทแผนที่
    navigationControl:false, // ปิดส่วนควบคุมสำหรับ zoom in out และเลื่อนแผนที่
    mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
};

รูปปุ่มควบคุม สามารถคลิกขวา แล้วบันทึกไว้ใช้งานได้ หรือจะสร้างข้้นมาเองก็ได้ โดยแนะนำให้เป็นไฟล์ png ลักษณะโปร่งใส transparent
สำหรับ คำสั่งควบคุมปุ่มที่เราสร้าง จะขอเพิ่มเติมในภายหลังต่อไป

 
From : To:
 

 

ตัวอย่างโค้ด
 

<!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>Google Map API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	position:relative;
	width:550px;
	height:400px;
	margin:auto;
}
/* css สำหรับ div คลุม google map อีกที */
#contain_map{
	position:relative;
	width:550px;
	height:400px;
	margin:auto;	
	margin-top:50px;
}
/* css ของส่วนการกำหนดจุดเริ่มต้น และปลายทาง */
#showDD{
	position:absolute;
	bottom:0px;
	height:30px;
	padding-top:5px;
	background-color:#000;
	color:#FFF;	
}
/* css ของส่วนแสดงคำแนะนำเส้นทางการเดินทาง */
#directionsPanel{
	width:550px;
	margin:auto;
	clear:both;	
/*	background-color:#F1FEE9;*/
}
/* ส่วน css สำหรับตัวควบคุม  */
#my_navigator{
	position:absolute;	
	top:10px;
	right:10px;
}
/* ส่วน css สำหรับตัวควบคุม  */
#zoom_inout{
	position:absolute;	
	width:32px;
	top:80px;
	right:25px;	
}
/* css ในส่วนข้อมูลการแนะนำเส้นทาง เพิ่มเติม ถ้าต้องการกำหนด */
.adp-placemark{
/*	background-color:#9C3;*/
}
.adp-summary{
	
}
.adp-directions{
	
}
</style>


</head>

<body>

<div id="contain_map">
<div id="map_canvas"></div>
<div id="my_navigator">
  <img src="images/compass.png" width="74" height="74" />
  </div>
 <div id="zoom_inout">
  <img src="images/zoom_in.png" width="32" height="32" />
    <img src="images/zoom_out.png" width="32" height="32" /> 
 </div> 
<div id="showDD">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->

<table width="550" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center">
From :
<input name="namePlace" type="text" id="namePlace" size="20" />
To:
<input name="toPlace" type="text" id="toPlace" size="20" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />    
    </td>
  </tr>
</table>
</div>   
</div>
<div id="directionsPanel"></div>


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	directionShow=new  GGM.DirectionsRenderer({draggable:true});
	directionsService = new GGM.DirectionsService();
	// กำหนดจุดเริ่มต้นของแผนที่
	my_Latlng  = new GGM.LatLng(13.761728449950002,100.6527900695800);
	// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
	initialTo=new GGM.LatLng(13.8129355,100.7316899); 
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0];
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeControl:false,
		navigationControl:false,
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
	// ส่วนสำหรับกำหนดให้แสดงคำแนะนำเส้นทาง
	directionShow.setPanel($("#directionsPanel")[0]);  
	
	if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
		 searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
	}
	
	// กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
	GGM.event.addListener(directionShow, 'directions_changed', function() {
		var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
	});

}
$(function(){
	// ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
		if(!FromPlace && !ToPlace){ // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา
			var FromPlace=$("#namePlace").val();// รับค่าชื่อสถานที่เริ่มต้น
			var ToPlace=$("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง
		}
		// กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
		var request={
			origin:FromPlace, // สถานที่เริ่มต้น
			destination:ToPlace, // สถานที่ปลายทาง
			travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์
		};
		// ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){ // ถ้าสามารถค้นหา และสร้างเส้นทางได้
				directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์
			}else{
				// กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
				// โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
			}
		});
	}
	
	// ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
		searchRoute();	// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
	});

	$("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13 && $(this).val()!=""){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
			searchRoute();		// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
		}		
	});
	
	$("#iClear").click(function(){
		$("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
	});
	
});
$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize	
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

 

]]>Mon, 27 Sep 2010 08:00:00 +0700ปรับแต่ง facebook comments ด้วย css กำหนด style ให้เข้ากับเว็บhttp://www.ninenik.com/ปรับแต่ง_facebook_comments_ด้วย_css_กำหนด_style_ให้เข้ากับเว็บ-310.htmlอ่าน สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย ได้ที่

http://www.ninenik.com/สร้าง_comment_ด้วย_social_plugins_ใน_facebook_api_อย่างง่ายดาย-291.html

การนำ facebook comments ไปใช้ ในกรณีที่ต้องการปรับแต่ง การแสดงผลของเนื้อหา และรายละเอียดของ comments เช่น สีตัวอักษร ตำแหน่งการจัดวาง สีพื้นหลัง ให้เข้ากับเว็บไซต์ สามารถทำได้ดังนี้

อ่านวิธีการและตัวอย่าง จากที่มา ภาษาอังกฤษ ได้ที่ http://giltbdblack.blogspot.com/

1. สร้างไฟล์ css สำหรับกำหนด style ในที่นี้ใช้ชื่อ facebook_comment.css แล้ว copy จาก css ด้านล่างไปใช้ปรับแต่ง โดย css ด้านล่างจะเป็นการปรับแต่ง สีของข้อความเป็นหลัก สามารถเพิ่ม ปรับแต่ง สีพื้นหลัง หรืออื่นๆ เพิ่มเติมได้ตามต้องการ
 

@charset "utf-8";
/* css กำหนดปุ่ม Like  ปรับแต่งตามต้องการ */
div.like span.connect_widget_text {color:#eee;}
div.like div.connect_widget_confirmation {color:#eee;}
div.like span.connect_widget_text a {color:#ffc6ff;}

/* css กำหนดส่วนของ comments ปรับแต่งตามต้องการ */

/* css กำหนดส่วนของ การล็อกอิน facebook กรณียังไม่ได้ล็อกอิน */
div.comment_body div.composer div.connected {color:#eee;}
div.comment_body div.composer div.connected div.UIImageBlock_Content {color:#fff;}
div.comment_body div.composer div.connected span.namelink a {color:#ffc6ff;}
div.comment_body div.post_area div.connected label {color:#ccc;}
div.comment_body div.show_connected a.editsettings {color:#ffc6ff;}

/* css กำหนด ส่วนของแต่ละรายการของ comments*/
div.comment_body div.wallkit_post {color:#eee;border-bottom:#d8dfea 1px dotted;}

/* css ในส่วนที่แสดงเนื้อหาข้อความ comments */
div.comment_body div.wallkit_postcontent h4 {color:#eee;}
div.comment_body div.wallkit_postcontent h4 a {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 span.wall_time {color:#ccc;}
div.comment_body div.wallkit_postcontent div {color:#fff;}
div.comment_body div.wallkit_postcontent div a {color:#c4ffc4;}

/* css กำหนด ส่วนลิ้งค์ของผู้ดูแล comments เช่นปุ่มลบ บล็อก เป็นต้น */
div.comment_body div.wallkit_actionset a {color:#ffc6ff !important;}

/* css ในส่วนที่แสดงจำนวน comments และลิ้งค์แสดงหน้าของ comments */
div.comment_body div.wallkit_subtitle div.post_counter {color:#ccc;}
div.comment_body div.wallkit_subtitle div.pager a {color:#ffc6ff;}
div.comment_body div.wallkit_subtitle div.pager a:hover {color:#fff;}

/* css กำหนดส่วนของ การล็อกอิน facebook กรณียังไม่ได้ล็อกอิน */
div.comment_body div.connect_area div.or {color:#eee;}
div.comment_body div.connect_area div.connect_button_text {color:#eee;}

/* css ข้อความในส่วนของ captch กรณีอนุญาตให้คนทั่วไป comments ได้  */
div.comment_body div.wall_captcha {color:#eee;}
div.comment_body div.wall_captcha h3 {color:#eee;}
div.comment_body div.wall_captcha a {color:#ffc6ff;}
div.comment_body div.wall_captcha label {color:#eee;}

2. ปรับในส่วน tag fb:comments  โดยเพิ่ม attribute simple และ css เข้าไป
 

<fb:comments xid="<?=md5($_SERVER['SCRIPT_NAME'].$_SERVER['REQUEST_URI'])?>" 
simple="1" css="http://www.youdomain.com/facebook_comment.css?<?=time()?>"  
numposts="10"  width="800"></fb:comments>

โดย path ของ css ต้องเป็น แบบ absolute url หรือ path เต็ม ไม่สามารถใช้ css="facebook_comment.css?<?=time()?>" ได้

3.ปรับแต่งไฟล์ facebook_comment.css ในข้อ 1 ตามต้องการ เมื่อได้ style ตามต้องการแล้ว ให้เอา <?=time()?> ใน css="http://www.youdomain.com/facebook_comment.css?<?=time()?>" จากข้อ 2 ออก แล้วใช้เป็น
ตัวเลข 1 2 3.... เป็น css="http://www.youdomain.com/facebook_comment.css?1"

หากต้องทดสอบการปรับรูปแบบใหม่ ให้ใช้ <?=time()?> แทนตัวเลขหลัง ? และถ้าได้ style ตามต้องการแล้ว
ให้เปลี่ยนกลับเป็นตัวเลข โดยเพิ่ม เป็น 2 3 4 ...
css="http://www.youdomain.com/facebook_comment.css?2"
css="http://www.youdomain.com/facebook_comment.css?3" .....

 ตัวอย่างภาพประกอบ กรณีกำหนดพื้นหลังเว็บไซต์เป็นสีดำ

ตัวอย่างภาพประกอบ กรณีกำหนดพื้นหลังเว็บไซต์เป็นสีฟ้า

ดาวน์โหลดไฟล์ css และไฟล์ตัวอย่างได้ที่ http://www.ninenik.com/download/facebook_test_style.rar

หมายเหตุ เราไม่สามารถปรับรูปแบบให้ได้ตามต้องการเลยในครั้งเดียว จึงใช้ <?=time()?> แทนการกำหนด ?1 ?2 ?3 ในครั้งแรก เพื่อลดการเสียเวลา ในการไปกำหนดเพิ่มตัวเลข กรณีทุกครั้งเราทำการปรับแต่ง style

]]>Wed, 11 Aug 2010 03:03:58 +0700ตรึง หัวข้อ คอลัมน์ ในตาราง ด้วย เทคนิคที่ง่ายกว่า รองรับทุกบราวเซอร์http://www.ninenik.com/ตรึง_หัวข้อ_คอลัมน์_ในตาราง_ด้วย_เทคนิคที่ง่ายกว่า_รองรับทุกบราวเซอร์-307.htmlตรึง หัวคอลัมน์ ในตาราง ด้วย เทคนิคที่ง่ายกว่า รองรับทุกบราวเซอร์

จากที่เคยมีหัวข้อ ตรึงหัวข้อ header ในตาราง table ด้วย css รองรับ Firefox และ IE

http://www.ninenik.com/ตรึงหัวข้อ_header_ในตาราง_table_ด้วย_css_รองรับ_Firefox_และ_IE-217.html

ซึ่งสามารถทำงานใน Firefox กับ IE7 แต่ไม่สามารถทำงานได้กับ IE8 ,Chrome,Safari,Opera

มีวิธีการที่ง่ายกว่า และรองรับทุกบราวเซอร์ ด้วยเทคนิค และตัวอย่างโค้ดต่อไปนี้  สามารถนำไปประยุกต์ใช้งาน และปรับ
รูปแบบได้ตามต้องการ
ตัวอย่าง
  

Column 1 Column 2 Column 3 Column 4
1 1 1 1
2 2 2 2
3 3 3 3
4 4 4 4
5 5 5 5
6 6 6 6
7 7 7 7
8 8 8 8
9 9 9 9
10 10 10 10
11 11 11 11
12 12 12 12
13 13 13 13
14 14 14 14
15 15 15 15
16 16 16 16
17 17 17 17
18 18 18 18
19 19 19 19
20 20 20 20
21 21 21 21
22 22 22 22
23 23 23 23
24 24 24 24
25 25 25 25
26 26 26 26
27 27 27 27
28 28 28 28
29 29 29 29
30 30 30 30

 

CSS Code
 

<style type="text/css">
.containBody{
	height:300px;
	display:block;
	overflow:auto;	
	border-bottom:1px solid #CCC;
}
.tbl_headerFix{
	border-bottom:0px;	
}
</style>

ส่วนของเนื้อหา (ในที่นี้ใช้ PHP สร้างจำนวนแถว)
 

<table width="550" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" align="center" bgcolor="#FFFF99">Column 1</td>
    <td width="25%" align="center" bgcolor="#FFFF99">Column 2</td>
    <td width="25%" align="center" bgcolor="#FFFF99">Column 3</td>
    <td width="25%" align="center" bgcolor="#FFFF99">Column 4</td>
  </tr>
  <tr>
    <td colspan="4" align="left" valign="top" >
  <div class="containBody">
    <table class="tbl_headerFix" width="100%" border="1" cellspacing="0" cellpadding="0" >
 <?php for($i=1;$i<=30;$i++){ ?>
      <tr>
        <td width="25%" align="center"><?=$i?></td>
        <td width="25%" align="center"><?=$i?></td>
        <td width="25%" align="center"><?=$i?></td>
        <td width="25%" align="center"><?=$i?></td>
      </tr>
<?php } ?>      
    </table>
</div>    
    </td>
  </tr>
</table>


 

]]>Fri, 06 Aug 2010 20:33:58 +0700การจัดข้อความ text direction rotation หมุนข้อความ แนวตั้ง ด้วย css ในตาราง http://www.ninenik.com/การจัดข้อความ_text_direction_rotation_หมุนข้อความ_แนวตั้ง_ด้วย_css_ในตาราง_-283.html
ใช้ css ในการกำหนดทิสทางของข้อความ ในตาราง รองรับ IE6 - IE8, Chrome , Firefox, Safari

รายละเอียด เพิ่มเติม
http://msdn.microsoft.com/en-us/library/ms535153.aspx
http://snook.ca/archives/html_and_css/css-text-rotation

การใช้งานจริง ต้องปรับแต่ง เพิ่มนิดหน่อย เพื่อให้การแสดงผลใน บราวเซอร์ที่แตกต่างกัน มีความใกล้เคียงกันทีสุด

ตัวอย่างผลลัพธ์

  จำนวนสินค้า 1 จำนวนสินค้า 2 จำนวนสินค้า 3 จำนวนสินค้า 4
ข้อมูลที่ 1 1 2 3 4
ข้อมูลที่ 2        
ข้อมูลที่ 3        
ข้อมูลที่ 4        

 

CSS Code ตัวอย่าง

<style type="text/css">
body{
	font-size:12px;	
}
.textAlignVer{
	display:block;
	writing-mode: tb-rl;
	filter: flipv fliph;
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);	
	transform: rotate(-90deg); 
	position:relative;
	width:20px;
	white-space:nowrap;
	font-size:12px;
	margin-bottom:10px;
}
</style>

HTML Code ตัวอย่าง

<table width="200" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="120" align="center" valign="bottom">&nbsp;</td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 1</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 2</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 3</span></td>
    <td height="100" align="center" valign="bottom"><span class="textAlignVer">จำนวนสินค้า 4</span></td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 1</td>
    <td align="center">1</td>
    <td align="center">2</td>
    <td align="center">3</td>
    <td align="center">4</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 2</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 3</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">ข้อมูลที่ 4</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
</table>

 

]]>Tue, 11 May 2010 13:36:41 +0700ใช้ คุณสมบัติ css stylesheet สร้างตารางhttp://www.ninenik.com/ใช้_คุณสมบัติ_css_stylesheet_สร้างตาราง-273.htmlใช้ คุณสมบัติ css stylesheet สร้างตาราง ใช้ได้กับ IE8 เป็นต้นไป และบราวเซอร์เวอร์ชั่นใหม่ๆ

CSS Code ตัวอย่าง

<style type="text/css">
.iTable{
	display:table; /* กำหนดให้แสดงเหมือนแท็ก table */
	width:500px;
	margin:auto;
	border:1px solid #333;
	border-collapse:collapse;
}
.iCaption{
	display:table-caption; /* กำหนดให้แสดงเหมือนแท็ก caption */
	caption-side:top;
	text-align:center;
}
.iRow{
	display:table-row; /* กำหนดให้แสดงเหมือนแท็ก tr */
}
.iTd{
	display:table-cell; /* กำหนดให้แสดงเหมือนแท็ก td หรือ th */
	border:1px solid #333;
	text-align:center;
}
</style>

 

HTML Code ตัวอย่าง

<div class="iTable">
<span class="iCaption">Table Description</span>
<ul class="iRow">
<li class="iTd">data 1</li>
<li class="iTd">data 2</li>
<li class="iTd">data 3</li>
</ul>
<ul class="iRow">
<li class="iTd">data 4</li>
<li class="iTd">data 5</li>
<li class="iTd">data 6</li>
</ul>
<ul class="iRow">
<li class="iTd">data 7</li>
<li class="iTd">data 8</li>
<li class="iTd">data 9</li>
</ul>
</div>

 ตัวอย่าง (IE8 เป็นต้นไป และบราวเซอร์เวอร์ชั่นใหม่ๆ หากเป็นเวอร์ชันไม่สนับสนุน จะแสดงตัวอย่างด้านล่างเพี้ยน)

Table Description
  • data 1
  • data 2
  • data 3
  • data 4
  • data 5
  • data 6
  • data 7
  • data 8
  • data 9

เวอร์ชั่นอื่นสามารถศึกษาจากหัวข้อนี้ข้างล่างนี้แทน

http://www.ninenik.com/เทคนิค_CSS_แสดงข้อมูลแบ่งเป็น_คอลัมน์_แทนการใช้ตาราง_Table-229.html

]]>Tue, 06 Apr 2010 11:26:51 +0700สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน ด้วย เทคนิค csshttp://www.ninenik.com/สร้าง_layout_3_คอลัมน์_column_ให้_สูงเท่ากัน_ด้วย_เทคนิค_css-271.htmlต่อไปนี้เป็นเทคนิคการใช้ css หลายตัว มากำหนดให้ ความสูงของคอลัมน์ ใน layout สูงเท่ากัน โดยอาศัยความสูง
ของ div ที่มีความสูงมากที่สุดมาปรับใช้งาน

ตัวอย่าง HTML Code
 

<div class="container">
  <div class="rightback">
    <div class="contentback">
      <div class="leftback">
        <div class="leftsidebar">
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
        </div>
        <div class="content">
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
         </div>
        <div class="rightsidebar">        
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
            Test Data<br />
	</div>
      </div>
    </div>
  </div>
</div>

ตัวอย่าง CSS Code 

<style type="text/css">
body{
	padding:0;
	margin:0;
	font-family:tahoma;
	font-size:12px;
}

.container{ /* กำหนดส่วนของ เนื้อหา ทั้งหมด */
	width: 900px; /* กำหนดความกว้าง ของทั้ง 3 คอลัมน์รวมกัน */
	margin:auto;
}
.rightback{ /* กำหนดพื้นหลัง คอลัมน์ ด้านขวา */
	background-color: #CCFFCC;
	overflow:hidden;
}
.contentback{  /* กำหนดพื้นหลัง คอลัมน์ ตรงกลาง */
	background-color:#CCCCFF;
	right: 250px;    /* กำหนดความกว้าง ของคอลัมน์ ด้านขวา */
}
.leftback{  /* กำหนดพื้นหลัง คอลัมน์ ด้านซ้าย */
	background-color: #FFFFCC;
	right: 400px; /* กำหนดความกว้าง ของคอลัมน์ เนื้อหา หรือ ตรงกลาง */	
}
.rightback,.contentback,.leftback{ /* กำหนดคุณสมบัติที่ใช้ร่วมกัน */
	float:left;
	position:relative;
	width:100%;
}
.leftsidebar{ /* กำหนดสำหรับคอลัมน์ ด้านซ้าย */
	width: 250px;   /* กำหนดความกว้าง ของคอลัมน์ ด้านซ่าย */
}
.content{  /* กำหนดสำหรับคอลัมน์ ตรงกลาง */
	width: 400px; /* กำหนดความกว้าง ของคอลัมน์ เนื้อหา หรือ ตรงกลาง */
}
.rightsidebar{  /* กำหนดสำหรับคอลัมน์ ด้านขวา */
	width: 250px; /* กำหนดความกว้าง ของคอลัมน์ ด้านขวา */
}
.leftsidebar,.content,.rightsidebar{ /* กำหนดคุณสมบัติที่ใช้ร่วมกัน */
	float:left;
	overflow:hidden;
	position:relative;
	left: 650px; /* ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย ในที่นี้ 900-250  */	
}
</style>

การนำไปใช้งาน
ให้นำค่าที่ต้องการไปกำหนดใน css ด้านบน ตรงส่วนที่ คอมเม้นไว้ ซึ่งมีค่าต่อไปนี้
1.ความกว้างทั้งหมด
2.ความกว้างคอลัมน์ด้านซ้าย
3.ความกว้างคอลัมน์ตรงกลาง
4.ความกว่้างคอลัมน์ด้านขวา
5.ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย

สมมติ ดังนี้
ต้องการสร้าง layout 3 คอลัมน์ กว้างทั้งหมด 900 px คอลัมน์ซ้าย กว้าง 200 คอลัมน์ขวากว้าง 200
ตรงกลางกว้าง 500 สามารถกำหนดได้ดังนี้
1.ความกว้างทั้งหมด=900px
2.ความกว้างคอลัมน์ด้านซ้าย=200px
3.ความกว้างคอลัมน์ตรงกลาง=500px
4.ความกว่้างคอลัมน์ด้านขวา=200px
5.ความกว้างทั้งหมด ลบด้วย ความกว่าง คอลัมน์ด้านซ้าย=700px

นำค่าที่ได้ไปแทนใน css ด้านบน

ต้วอย่าง

สร้าง layout 3 คอลัมน์ column ให้ สูงเท่ากัน

]]>Fri, 02 Apr 2010 11:30:49 +0700ทบทวน คุณสมบัติ สี color และ พื้นหลัง background property ของ CSShttp://www.ninenik.com/ทบทวน_คุณสมบัติ_สี_color_และ_พื้นหลัง__background_property_ของ_CSS-263.htmlCSS มีคุณสมบัติ ในการกำหนด สี color และ พื้นหลัง background ให้กับ html element ได้ โดยพื้นหลัง background อาจเป็นได้ทั้งสี color หรือ รูปภาพ images โดยหากเป็นรูปภาพ ยังสามารถกำหนด ตำแหน่งของ พื้นหลัง, การกำหนด การซ้ำ, และรวมทั้ง การตรึงพื้นหลัง หรือกำหนดให้เลื่อนตามการเลื่อน ของ scrollbar ได้อีกด้วบ

คุณสมบัติ color property
color
กำหนดเป็นค่าสี เช่น red #FF000 rgb(255,0,0) หรือ เป็นลักษณะ ค่าสีแบบ การถ่ายทอด inherit
ค่าเริ่มต้น ขึ้นอยู่กับแต่ละ บราวเซอร์
สามารถกำหนดได้กับ html elements ทุกตัว
สามารถถ่ายทอดได้
ไม่สามารถ กำหนด เป็น เปอร์เซ็นต์ได้
นำเสนอโดย การแสดงผล
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ตัวอย่าง
ข้างล่างเป็นตัวอย่าง การกำหนดค่าสี แดง ให้กับ em tag element ในรูปแบบ ที่แตกต่างกัน

em { color: red }              /* กำหนดโดยการใช้ชื่อของสี */
em { color: rgb(255,0,0) }     /* กำหนดแบบ RGB อยู่ในช่วง 0 - 255  */

คุณสมบัติ Background Property
การกำหนดพื้นหลัง background สามารถกำหนดได้ทั้งสี color หรือ รูปภาพ images ตามรูปแบบของ box model
พื้นหลัง background นั้นหมายถึง พื้นหลังพื้นที่ของ เนื้อหา content ,พื้นที่ของระยะห่างจากขอบใน padding,และพื้นที่ของขอบ border โดยที่ ขอบ border สามารถกำหนด คุณสมบัติสี และรูปแบบด้วยคุณสมบัติ border property
ส่วนสำหรับ พื้นที่ของระยะห่างจากขอบนอก จะไม่รวมในพื้นหลัง background แต่จะมีลักษณะ โปร่งใส transparent

คุณสมบัติ Background properties จะไม่สามารถถ่ายทอดได้ แต่กรณีที่ element ที่อยู่เหนือกว่า หรือ parent element มีการกำหนด Background properties ดังนั้น เมื่อ ค่าเริ่มต้นของพื้นหลัง background เป็นแบบโปร่งใส transparent จึงทำให้มองเห็นพื้นหลังของ parent element

การกำหนดพื้นหลัง แนะนำให้กำหนดไว้ใน body แทนการกำหนดใน html
ตัวอย่าง

    <STYLE type="text/css">
       BODY { background: url("http://www.ninenik.com/marble.png") }
    </STYLE>

 


คุณสมบัติ 'background-color'
Value:   <color> | transparent | inherit 
สามารถกำหนดค่าเป็น ค่าสี หรือ โปร่่งใส transparent หรือ ลักษณะการถ่ายทอด
Initial:   transparent 
ค่าเริ่มต้นเป็น โปร่งใส
Applies to:   all elements 
สามารถกำหนดได้กับ elements ทุกตัว
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่สามารถกำหนดค่า เปอร์เซ็นต์ได้
Media:   visual 
นำเสนอ โดยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

คุณสมบัติ background-color ใช้สำหรับกำหนดค่าสีพื้นหลังของ element

ตัวอย่าง:

 

h1 { background-color: #F00 }

คุณสมบัติ 'background-image'
Value:   <uri> | none | inherit 
กำหนดค่าเป็น ตำแหน่งของรูปภาพ หรือ กำหนดไม่แสดง none หรือ กำหนดเป็นแบบการถ่ายทอด
Initial:   none 
ค่าเริ่มต้น คื่อไม่มี หรือไม่แสดง none
Applies to:   all elements 
สามารถกำหนดได้กับ elements ทุกตัว
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่สามารถ กำหนดเป็น เปอร์เซ้นต์ได้
Media:   visual 
นำเสนอโดยการแสดงผล
Computed value:   absolute URI or none 
ค่าจากการคำนวณ ไม่มีหรือขึ้นอยู่กับค่าสัมบูรณ์ URI

คุณสมบัติ background-image ใช้สำหรับกำหนดพื้นหลังที่ เป็นรูปภาพ
การกำหนดทั้ง background-image และ background-color จะทำให้กรณีที่ background-image ไม่มีรูปพื้นหลัง
ก็จะแสดงเป็นค่าสี แทนจากคุณสมบัติ background-color ได้


ตัวอย่าง:

body { background-image: url("ninenik.png") }
p { background-image: none }

 


คุณสมบัติ 'background-repeat'
Value:   repeat | repeat-x | repeat-y | no-repeat | inherit 
สามารถกำหนดค่าเป็น
repeat
ซ้ำในแนวตั้งและแนวนอน
repeat-x
ซ้ำเฉพาะในแนวนอนเท่านั้น
repeat-y
ซ้ำเฉพาะในแนวตั้งเท่านั้น
no-repeat
ไม่ต้องซ้ำ แสดงแค่รูปพื้นหลังแค่รูปเดียว
Initial:   repeat 
ค่าเริ่มต้น  เป็น ซ้ำในแนวตั้งและแนวนอน
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่มีคุณสมบัติการถ่ายทอด
Percentages:   N/A 
ไม่มีการกำหนดค่าเป็น เปอร์เซ็นต์
Media:   visual 
นำเสนอ ด้วยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ ก็จะสามารถกำหนดคุณสมบัติการแสดงผลรูปภาพซ้ำโดยใช้ background-repeat

ตัวอย่าง:

body { 
  background: white url("ninenik.png");
  background-repeat: repeat-y;
  background-position: center;
}

 

คุณสมบัติ 'background-attachment'
Value:   scroll | fixed | inherit 
สามารถกำหนดค่าเป็น เลื่อน sxroll ตามการเลื่อนของ scrollbar หรือ ตรึง fixed หรือ ตามการถ่ายทอด
Initial:   scroll 
ค่าเริ่มต้น เลื่อน sxroll ตามการเลื่อนของ scrollbar
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   N/A 
ไม่มีการกำหนดค่า เปอร์เซ็นต์
Media:   visual 
นำเสนอ โดยการแสดงผล
Computed value:   as specified 
ค่าจากการคำนวณ ขึ้นอยู่กับการกำหนด

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ เมื่อมีการกำหนดคุณสมบัติ  background-attachment เป็น fixed รูปพื้นหลัง
จะไม่เลื่อนตาม การเลื่อนของ scrollbar

ตัวอย่าง:

body { 
  background: red url("ninenik.png");
  background-repeat: repeat-y;
  background-attachment: fixed;
}


คุณสมบัติ 'background-position'
Value:   [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit 
สามารถกำหนดค่าเป็น เปอร์เช็นต์ หรือค่า อิงตำแหน่งด้านซ้าย ตรงกลาง แงละ ด้านขวา ตามด้วย เปอร์เซ็นต์ หรือค่า
อิงตำแหน่่งด้านบน ตรงกลาง หรือด้านล่าง หรือตามการถ่ายทอด
Initial:   0% 0% 
ค่าเริ่มต้น 0% 0% หรือ left top
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่มีการถ่ายทอด
Percentages:   refer to the size of the box itself 
เปอร์เซ็นต์กำหนดอิงตาม ขนาดของรูปพื้นหลังนั้นๆ
Media:   visual 
นำเสนอด้วยการแสดงผล
Computed value:   for <length> the absolute value, otherwise a percentage 
ค่าจากการคำนวณ กำหนดโดยตรง หรือ เป็นเปอร์เซ็นต์

ถ้ามีการกำหนดพื้นหลังเป็นรูปภาพ หากไม่มีการกำหนด background-position ค่าที่ได้จะเป็นค่าเริ่มต้น หากมีการ
กำนหดค่าเดียว ค่าที่สองจะเป็น center หรือตรงกลางโดยอัตโนมัติ หากค่าหนึ่งค่าใดอย่างน้อยหนึ่งค่า ไม่ได้กำหนด
เป็นลักษณะ keyword เช่น left center หรือ top จะได้่ว่า ค่าแรกแสดงถึงตำแหน่งในแนวนอน และอีกค่าจะแสดงถึง
ตำแหน่งในแนวตั้ง และค่าที่กำหนดสามารถเป็นตัวเลขติดลบ ได้


top มีค่าท่ากับ '0%' สำหรับตำแหน่งในแนวตั้ง
right มีค่าท่ากับ '100%' สำหรับตำแหน่งในแนวนอน
bottom มีค่าท่ากับ '100%'  สำหรับตำแหน่งในแนวตั้ง
left มีค่าท่ากับ '0%' สำหรับตำแหน่งในแนวนอน
center มีค่าท่ากับ '50%' สำหรับตำแหน่งในแนวนอน

ตัวอย่าง:

body { background: url("ninenik.jpeg") right top }    /* 100%   0% */
body { background: url("ninenik.jpeg") top center }   /*  50%   0% */
body { background: url("ninenik.jpeg") center }       /*  50%  50% */
body { background: url("ninenik.jpeg") bottom }       /*  50% 100% */

 

คุณสมบัติ 'background'
Value:   [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit 
กำหนดค่าตามแต่ละคุณสมบัติ
Initial:   see individual properties 
ค่าเริ่มต้น ขึ้นอยู่กับแต่ละคุณสมบัติ
Applies to:   all elements 
สามารถกำหนดได้กับทุก elements
Inherited:   no 
ไม่สามารถถ่ายทอดได้
Percentages:   allowed on 'background-position' 
ค่าเปอร์เซ็นต์ใช้กับ คุณสมบัติ background-position
Media:   visual 
นำแสดง ด้วยการแสดงผล
Computed value:   see individual properties 
ค่าจากการคำนวณ ขึ้นอยู่กับแต่ละคุณสมบัติ

คุณสมบัติ 'background' เป็นการคุณสมบัติแบบสั้น shorthand ที่รวมเอาทุกคุณสมบัติมารวมกัน

ตัวอย่าง

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

 

 

]]>Fri, 19 Mar 2010 11:54:16 +0700รู้จัก property position ของ css ให้มากขึ้น ด้วย ตัวอย่าง และคำอธิบายhttp://www.ninenik.com/รู้จัก_property_position_ของ_css_ให้มากขึ้น_ด้วย_ตัวอย่าง_และคำอธิบาย-251.html

 

div.exampleDiv1 
div.exampleDiv1{

}
div.exampleDiv2 
div.exampleDiv1{

}
Span
Div1 Left: Top:
Div2 Left: Top:
Div3
 
  • position:static; เป็นค่าเริ่มต้น จะกำหนดหรือไม่กำหนดก็ได้ ปกติถ้ากำหนดจะใช้เมื่อทำการ override หรือกรณีต้องการล้างค่าที่กำหนดก่อนหน้า จากค่าอื่นเช่น fixed , absolute หรือ relative
    position:static; จะไม่รองรับการกำหนดค่า left , top, right และ bottom
  • position:relative;เป็นการกำหนดตำแหน่งที่อิงความสัมพันธ์กับตำแหน่งเดิม เช่น div1 กำหนด position เป็น relative และกำหนด left:20px; ผลลัพธ์คือ div1 จากเลื่อนออกจากตำแหน่งเดิมทางซ้าย 20 pixels
    ข้อมูลหรือเนื้อหาที่อยู่ใน element ที่กำหนด position เป็น relative สามารถที่จะเลื่อนและอยู่วางซ้อนเหนือ elements ตัวอื่นได้ แต่จะเกิดพื้นที่ว่างจากเนื้อหาหรือข้อมูลขึ้นในตำแหน่งเดิม
    position:relative;จะใช้บ่อยสำหรับบรรจุบล็อกของ elements ที่กำหนด position เป็น absolute
     

  • position:absolute; จะกำหนดตำแหน่งโดยอิงกับตำแหน่ง parent ตัวแรก ที่กำหนด position เป็นค่าอื่นที่ไม่ใช่ static
    ตัวอย่าง ถ้า div1 อยู่ใน div2 หมายถึง div2 เป็น parent ของ div1

        <div id="div2">
    <div id="div1">

    </div>
    </div>
    ถ้า div1 อยู่ใน div2 และ div2 อยู่ใน div3 หมายถึง div2 และ div3 เป็น parent ของ div1
        <div id="div3">
    <div id="div2">
    <div id="div1">

    </div>
    </div>
    </div>
    หาก div3 มีการกำหนด position เป็น relative,absolute หรือ fiexd (ยกเว้น static)
    และเมื่อกำหนด div1 position เป็น absolute ดังนั้นตำแหน่างของ div1 จะอิงความสัมพันธ์
    กับตำแหน่งของ div3 ซึ่งเป็น parent ตัวแรกที่เข้าเงื่อนไข

    กรณีไม่มี parent ใดๆ ที่เข้าเงื่อนไข ตำแหน่งของ div1 ที่กำหนด position เป็น absolute จะอิงกับ <html> หรือ ขอบด้านในของบราวเซอร์

    position:absolute; สามารถที่จะซ้อนทับกันได้ โดยใช้ร่วมกับ z-index เพื่อกำหนดตำแหน่งบน ล่าง

  • position:fixed; .ใช้กำหนดตำแหน่งของ element โดยอิงความสัมพันธ์กับตำแหน่งขอบด้านในของบราวเซอร์ และจะไม่เคลื่อนเมื่อมีการเลื่อน scrollbar
    ถ้ากำหนด position ของ div1 เป็น fixed และกำหนด left:45px;top;100px; ตำแหน่งของ div1 จะขยับออกจากด้านซ้ายของขอบด้านในของเบราวเซอร์ 45 pixels และขยับออกจากด้านบนของขอบด้านในของบราวเซอร์เท่ากับ 100 pixels
]]>Thu, 14 Jan 2010 04:48:29 +0700เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Tablehttp://www.ninenik.com/เทคนิค_CSS_แสดงข้อมูลแบ่งเป็น_คอลัมน์_แทนการใช้ตาราง_Table-229.htmlการใช้งาน CSS กำหนดแท็ก ul , li ในการสร้างคอลัมน์ให้คล้ายกับการใช้ตาราง จำเป็นต้องกำหนดค่า CSS ให้เหมาะสม ซึ่งขึ้นอยู่กับการปรับ CSS เป็นสำคัญ ไม่มีรูปแบบตายตัว แต่การกำหนด CSS จะเป็นไปตามรูปแบบ ที่ต้องการ

HTML ตารางตัวอย่าง

<table width="500" border="1" cellpadding="0" cellspacing="5" bordercolor="#333333">
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
  <tr>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
    <td bgcolor="#99CC99"> </td>
  </tr>
</table>

ตัวอย่างผลลัพธ์

       
       
       
       
       

CSS Code ใช้กำหนด ul และ li

<style type="text/css">
ul.showInColumn{
	display:block;float:left;
	list-style:none;
	padding:0;margin:0;
	width:495px; 
/*	background-color:#FFCCCC;*/
	border:1px solid #333333;  /* เทียบใกล้เคียงกับการกำหนด  ของ table  */	
	padding:2px 0 2px 2px;
}
ul.showInColumn li{
	list-style:none;
	display:block;float:left;
	background-color:#99CC99;
	margin:2px;  /* เทียบใกล้เคียงกับการกำหนด  cellspacing"  ของ table  */
	margin-left:3px;
	padding:0px; /* เทียบใกล้เคียงกับการกำหนด  cellpadding  ของ table  */
	border:1px solid #333333;  /* เทียบใกล้เคียงกับการกำหนด border ใน td ของ table  */
	width:116px; /*  กำหนดความกว้างของแต่ละคอลัมน์  */
}
</style>

HTML การใช้ ul และ li ตัวอย่าง

<ul class="showInColumn">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>

ตัวอย่างผลลัพธ์

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

การใช้ ul , li ในการสร้างคอลัมน์ให้คล้ายกับการใช้ตาราง สามารถนำไปใช้ในแสดงข้อมูลที่ทำการดึงจากฐาน ข้อมูลมาแสดงเป็นคอลัมน์ เช่น การแสดงสินค้า หรือข่าว เป็นคอลัมน์ โดยที่ CSS จะทำการกำหนดคอลัมน์ให้

ตัวอย่างการใช้งานร่วมกับการดึงข้อมูลจากฐานข้อมูล

PHP code 

<ul class="showInColumn">
<?php
$q="SELECT * FROM table ";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
<li><?=$rs['data']?></li>
<?php } ?>
</ul>
]]>Sun, 08 Nov 2009 03:13:20 +0700ใช้งาน CSS Sprite images กับ การกำหนด CSS ของ Input form อย่างง่ายhttp://www.ninenik.com/ใช้งาน_CSS_Sprite_images_กับ_การกำหนด_CSS_ของ_Input_form_อย่างง่าย-224.html
การทำ CSS Sprite Images ช่วยลดจำนวน HTTP Requests ตัวอย่าง กรณีเรามีปุ่มที่เป็นรูปภาพอยู่ 3 อัน
เมื่อมีการเรียกหน้าเพจนั้น ก็จะมีการเรียก HTTP Requests เท่ากับ 3 ตามจำนวนของรูป เป็นต้น
บางกรณีการทำ CSS Sprite ยังช่วยลดขนาดของไฟล์ได้อีกด้วย ทำให้การโหลดหน้าเว็บเพจเร็วขึ้น

การทำ CSS Sprite Images เป็นเทคนิคการรวมไฟล์รูปภาพหลายๆ รูปเป็นรูปเดียว แล้วกำหนดการนำมาแสดง
โดยใช้เป็น Backgroud แล้วระบุตำแหน่งของแต่ละรูป เรียกใช้ผ่าน css class (div.class) หรือ css selector (div#selector)

ตัวอย่าง รูปที่รวมกันแล้ว


ผลลัพธิ์การทำ CSS Sprite Images

CSS code ตัวอย่าง 

<style type="text/css">
input.iSubmit,input.iSend,input.iClear{
	padding:0;margin:0;border:0;border-collapse:collapse;cursor:pointer;
}
input.iSend{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -1px;
}
input.iSubmit{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -23px;
}
input.iClear{
	width:65px;height:20px;
	background:url(demo/images/css_bt_sprite.png) -1px -45px;
}
</style>

HTML code ตัวอย่าง 

<input name="button" type="submit" class="iSubmit" id="button" value=" " />
<input name="button2" type="reset" class="iClear" id="button2" value=" " />
<input name="button3" type="button" class="iSend" id="button3" value=" " />

]]>Sat, 31 Oct 2009 16:51:26 +0700