Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > [HTML] ออกแบบหน้าจอโปรแกรมใน dreamweaver อย่างไรไม่ให้ตัวหนังสือล่นลงมาอีกบรรทัด เมื่อปรับขนาดจอ

[HTML] ออกแบบหน้าจอโปรแกรมใน dreamweaver อย่างไรไม่ให้ตัวหนังสือล่นลงมาอีกบรรทัด เมื่อปรับขนาดจอ

เริ่มหัวข้อใหม่

kwang

โพสกระทู้ ( 11 )
บทความ ( 0 )

คือเราออกแบบหน้าจอโปรแกรมใน dreamweaver โดยใช้ tag <tr><td> ในการสร้าง form และ textbox ต่างๆ เมื่ีัอรันโปรแกรมแล้วปรับขนาดภาพเป็น800*600 ตัวหนังสือล่วงลงมาอีกบรรทัด ดังภาพ
800คูณ600

เราพอทราบมาบ้างว่าทำ % ให้เป็น pixel แล้วตัวหนังสือจะไม่ล้นลงมา ซึ่งอยากทราบว่าพอจะมีวิธีอื่นอีกมั้ยคร้า

Code (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>Untitled Document</title>
<link rel="stylesheet" href="css/mystyle2.css" type="text/css" />
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="header">
<table width="99%">
<tr>
<td width="91%">
ใบสั่งงาน
</td>
<td width="9%">
<input type="button" id="add" name="add" value="เพิ่มลูกค้าใหม่"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div class="font">
<table width="100%" border="0" align="center">
<tr>
<td width="82%" valign="top"><table width="100%" border="0">
<tr>
<td width="70">ทะเบียนรถ</td>
<td width="89"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="83">ออกให้จังหวัด</td>
<td width="103"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="76">ยี่ห้อ</td>
<td width="183"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="81">รุ่น</td>
<td width="106"><input type="text" id="test5" name="test5" size="10" /></td>
</tr>

<tr>
<td width="70">เลขไมล์</td>
<td width="89"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="83">เลขไมล์ครั้งก่อน</td>
<td width="103"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="76">เฉลี่ย/วัน</td>
<td width="183"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="81">ติดต่อคร้งก่อน</td>
<td width="106"><input type="text" id="test5" name="test5" size="10" /></td>
</tr>


<tr>
<td width="70">ผู้แจ้งซ่อม</td>
<td width="89"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="83">โทรศัพท์</td>
<td width="103"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="76">ประเภทภาษี</td>
<td width="183"><select name="test" id="test">
<option value="1">1.รวมภาษี</option>
<option value="2">2.แยกภาษี</option>
</select></td>
<td width="81">ภาษี</td>
<td width="106"><input type="text" id="test5" name="test5" size="10" /></td>
</tr>

<tr>
<td width="70">คำสั่งงาน</td>
<td colspan="3"><input type="text" id="test5" name="test5" size="40" /></td>
<td width="76">คำนวณราคา</td>
<td width="183"><select name="test15" id="test15">
<option value="1">1.ราคาหน่วย</option>
<option value="2">2.จำนวนเงิน</option>
</select></td>
<td width="81">ร่องราคา</td>
<td width="106"><select name="test3" id="test3">
<option value="1">มาตรฐาน</option>
<option value="2">ลูกค้าเงินสด</option>
<option value="3">ลูกค้าเครดิต</option>
<option value="3">ลูกค้าพิเศษ</option>
</select></td>
</tr>


<tr>
<td width="70">ประเภทชำระ</td>
<td width="89"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="83">ระยะเวลาชำระ</td>
<td width="103"><input type="text" id="test5" name="test5" size="10" /></td>
<td width="76">ประเภทใบ</td>
<td width="183"><select name="test2" id="test2">
<option value="1">ใบกำกับภาษี/ใบเสร็จรับเงิน</option>
<option value="2">ใบส่งสินค้าชั่วคราว</option>

</select></td>
<td width="81">ติดต่อคร้งก่อน</td>
<td width="106"><input type="text" id="test5" name="test5" size="10" /></td>
</tr>

</table></td>
<td width="18%" valign="top">
<table width="98%" height="146" border="1">
<tr>
<td colspan="2" valign="top">photo</td>
</tr>
</table></td>
</tr>
</table>
</div>

<tr><td>
<table width="100%" border="0" align="center">
<tr>
<td><div id="TabbedPanels2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">ข้อมูลสินค้า</li>
<li class="TabbedPanelsTab" tabindex="0">ข้อมูลลูกค้า</li>
<li class="TabbedPanelsTab" tabindex="0">ข้อมูลพนักงานขาย</li>

</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">

<div class="font">
<table width="100%" border="0">
<tr valign="top">
<td colspan="12" align="center" bgcolor="#999999">ค้นหารายการ</td>
</tr>

<tr valign="top">
<td width="80"><img src="images/BTSEMP.GIF" width="19" height="18" />รหัสสินค้า</td>
<td width="77"><input type="text" id="test9" name="test9" size="10" /></td>
<td width="77">ชื่อสินค้า</td>
<td width="60"><input type="text" id="test10" name="test10" size="10" /></td>
<td width="55">ที่เก็บ</td>
<td width="78"><input type="text" id="test11" name="test11" size="10" /></td>
<td width="64">ราคาล่าสุด</td>
<td width="108"><input type="text" id="test16" name="test16" size="10" /></td>
<td width="40">หน่วย</td>
<td width="120"><select name="test7" id="test7">
<option value="1">-</option>
<option value="2">Ka</option>
<option value="2">กระบอก</option>
</select></td>
<td colspan="2">&nbsp;</td>
</tr>



<tr valign="top">
<td width="80">จำนวน</td>
<td width="77"><input type="text" id="test12" name="test12" size="10" /></td>
<td width="77">ราคา/หน่วย</td>
<td width="60"><input type="text" id="test4" name="test4" size="10" /></td>
<td width="55">ลด%1</td>
<td width="78"><input type="text" id="test13" name="test13" size="10" /></td>
<td width="64">ลด%2</td>
<td width="108"><input type="text" id="test8" name="test8" size="10" /></td>
<td width="40">ลดเงิน</td>
<td width="120"><input type="text" id="test14" name="test14" size="10" /></td>
<td width="81"><img src="images/BTSEMP.GIF" alt="" width="19" height="18" />ช่างซ่อม</td>
<td width="81"><input type="text" id="test14" name="test14" size="10" /></td>
</tr>

<tr valign="top">
<td>&nbsp;</td>
<td>
<input type="button" id="test" name="test" value="เพิ่มรายการ" />
</td>
</tr>

</table>
</div>
<div class="scroll">
<div class="font">
<table width="100%" border="1">
<tr>
<td width="8%" align="center" bgcolor="#999999">รหัสสินค้า</td>
<td width="11%" align="center" bgcolor="#999999">ชื่อสินค้า</td>
<td width="6%" align="center" bgcolor="#999999">หน่วย</td>
<td width="11%" align="center" bgcolor="#999999">ที่เก็บ</td>
<td width="8%" align="center" bgcolor="#999999">จำนวน</td>
<td width="8%" align="center" bgcolor="#999999">ราคา</td>
<td width="8%" align="center" bgcolor="#999999">ลด%1</td>
<td width="8%" align="center" bgcolor="#999999">ลด%2</td>
<td width="8%" align="center" bgcolor="#999999">ลดเงิน</td>
<td width="8%" align="center" bgcolor="#999999">จำนวนเงิน</td>
<td width="8%" align="center" bgcolor="#999999">ช่างซ่อม</td>
<td width="8%" align="center" bgcolor="#999999">คำสั่ง</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
</div></br>
<div class="font">
<table width="100%" border="0">
<tr>
<td width="70%">&nbsp;</td>
<td width="24%">ส่วนลดรวม</td>
<td width="3%">0.00</td>
<td width="3%">บาท</td>
</tr> 
<tr> 
<td width="70%">&nbsp;</td>
<td width="24%">รวมเงิน</td>
<td width="3%">&nbsp;</td>
<td width="3%">บาท</td>
</tr>
<tr>
<td width="70%">&nbsp;</td>
<td width="24%">ภาษีมูลค่าเพิ่ม</td>
<td width="3%">&nbsp;</td>
<td width="3%">บาท</td>
</tr>

<tr>
<td width="26%">&nbsp;</td>
<td width="24%">รวมยอดสุทธิ</td>
<td width="3%">&nbsp;</td>
<td width="3%">บาท</td>
</tr>

</table>
</div>
</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
</div>
</div>
<table width="14%" border="0" align="center">
<tr>
<td><input type="button" id="test6" name="test6" value="บันทึก" />
<input type="button" id="test17" name="test6" value="ยกเลิก" />
<input type="hidden" id="test18" name="test18" value="พิมพ์" /></td>
</tr>
</table>
<p>&nbsp;</p></td>
</tr>
<tr> </tr>
</table>

</td></tr>
</td></tr>
</table>
<script type="text/javascript">
<!--
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
//-->
</script>
</body>
</html>

Tag : Ms SQL Server 2008, HTML/CSS, JavaScript, jQuery

ประวัติการแก้ไข
2014-06-07 18:46:12

Date : 2014-06-07 18:40:06

By : kwangkookku

View : 3917

Reply : 3

No. 1

Mongkon.k

โพสกระทู้ ( 3,847 )
บทความ ( 0 )

ปรับ width สิครับ

ประวัติการแก้ไข
2014-06-08 12:24:31

Date : 2014-06-08 12:23:27

By : mangkunzo

No. 2

kwang

โพสกระทู้ ( 11 )
บทความ ( 0 )

ปรับ width เป็น px หรอ ค่ะ พอจะมีวิธีอื่นอีกมั้ยคร้าแบบใช้ css ไรงี้

Date : 2014-06-08 14:45:08

By : kwangkookku

No. 3

meannerss

โพสกระทู้ ( 1,666 )
บทความ ( 0 )

ไม่มีใครใช้จอ 800*600 อีกแล้วครับสมัยนี้ไม่ต้องห่วง ร้อยคนจะเจอ 1 คนรึเปล่ายังไม่รู้เลย
พวกอุปกรณ์มือถือ/แท็บเล็ต เห็นมันเล็กๆจอมันไม่ไช่800*600 นะครับ มันเนียนกว่านั้นมาก

Date : 2014-06-08 17:36:57

By : meannerss

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : [HTML] ออกแบบหน้าจอโปรแกรมใน dreamweaver อย่างไรไม่ให้ตัวหนังสือล่นลงมาอีกบรรทัด เมื่อปรับขนาดจอ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก