Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > กระทู้สำหรับภาษาต่าง ๆ > =-=-=-=-=- เรื่องเส้นที่ไม่พึงประสงค์จะแก้ยังไงดีครับ--------------



=-=-=-=-=- เรื่องเส้นที่ไม่พึงประสงค์จะแก้ยังไงดีครับ--------------

 
Topic : 053779

Guest



เรื่องมีอยู่ว่า ออกแบบใน photoshop แล้วตัดเป็น 3 ส่วน (ตอนยังไม่ได้ตัดส่วนกลางอีกรอบ ไม่มีเส้น)
แต่พอจะตัดส่วนกลางออกเป็นส่วนเล็ก แล้วเอามาใส่ในตาราง มันดันมีเส้นด้านขวา ที่ไม่ต้องการ มันโผล่มาได้ไงครับ

ความต้องการ คือ ออกแบบไว้ที่ 985 px ตรงกลาง (จะเอาไว้สำหรับจอ 1024*768)
ส่วนด้านข้าง ตั้งเป็น 100 % ให้มันยืดเองถ้าเจอจอที่มีขนากว้าง โดยตั้งรูปซ้ายขวาเป็น bk ครับ
แนบรูปมาให้ดูด้วย

1
2
3



ส่วนนี่ code ครับ


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url();
}
-->
</style></head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="219" background="images/psd_01.jpg"><div align="center"> </div></td>
<td width="219"><table id="Table_01" width="986" height="1801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" rowspan="3"> <img src="images/psd_02_01.jpg" width="243" height="390" alt=""></td>
<td colspan="6"> <img src="images/psd_02_02.jpg" width="547" height="120" alt=""></td>
<td rowspan="2"> <img src="images/psd_02_03.jpg" width="132" height="342" alt=""></td>
<td rowspan="9"> <img src="images/psd_02_04.jpg" width="63" height="876" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="3"> <img src="images/psd_02_05.jpg" width="422" height="327" alt=""></td>
<td> <img src="images/psd_02_06.jpg" width="95" height="222" alt=""></td>
<td rowspan="17"> <img src="images/psd_02_07.jpg" width="30" height="1680" alt=""></td>
</tr>
<tr>
<td rowspan="16"> <img src="images/psd_02_08.jpg" width="95" height="1458" alt=""></td>
<td rowspan="14"> <img src="images/psd_02_09.jpg" width="132" height="1158" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2"> <img src="images/psd_02_10.jpg" width="243" height="96" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="57" alt=""></td>
</tr>
<tr>
<td> <img src="images/psd_02_11.jpg" width="242" height="39" alt=""></td>
<td colspan="3" rowspan="4"> <img src="images/psd_02_12.jpg" width="180" height="369" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td colspan="4"> <img src="images/psd_02_13.jpg" width="485" height="255" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="255" alt=""></td>
</tr>
<tr>
<td colspan="3"> <img src="images/psd_02_14.jpg" width="243" height="24" alt=""></td>
<td rowspan="4"> <img src="images/psd_02_15.jpg" width="242" height="180" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td rowspan="4"> <img src="images/psd_02_16.jpg" width="135" height="291" alt=""></td>
<td colspan="2" rowspan="6"> <img src="images/psd_02_17.jpg" width="108" height="414" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="51" alt=""></td>
</tr>
<tr>
<td rowspan="8"> <img src="images/psd_02_18.jpg" width="60" height="684" alt=""></td>
<td colspan="2" rowspan="4"> <img src="images/psd_02_19.jpg" width="120" height="339" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="60" alt=""></td>
</tr>
<tr>
<td rowspan="5"> <img src="images/psd_02_20.jpg" width="63" height="363" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td rowspan="3"> <img src="images/psd_02_21.jpg" width="242" height="258" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="135" alt=""></td>
</tr>
<tr>
<td rowspan="2"> <img src="images/psd_02_22.jpg" width="135" height="123" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="99" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="4"> <img src="images/psd_02_23.jpg" width="120" height="345" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2"> <img src="images/psd_02_24.jpg" width="485" height="255" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="60" alt=""></td>
</tr>
<tr>
<td rowspan="4"> <img src="images/psd_02_25.jpg" width="63" height="561" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="195" alt=""></td>
</tr>
<tr>
<td colspan="4"> <img src="images/psd_02_26.jpg" width="485" height="66" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="66" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2"> <img src="images/psd_02_27.jpg" width="198" height="300" alt=""></td>
<td colspan="4"> <img src="images/psd_02_28.jpg" width="401" height="123" alt=""></td>
<td rowspan="2"> <img src="images/psd_02_29.jpg" width="66" height="300" alt=""></td>
<td> <img src="images/psd_02_30.jpg" width="132" height="123" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="123" alt=""></td>
</tr>
<tr>
<td colspan="4"> <img src="images/psd_02_31.jpg" width="401" height="177" alt=""></td>
<td> <img src="images/psd_02_32.jpg" width="132" height="177" alt=""></td>
<td> <img src="images/spacer.gif" width="1" height="177" alt=""></td>
</tr>
<tr>
<td> <img src="images/spacer.gif" width="135" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="45" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="242" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="54" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="66" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="95" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="30" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="132" height="1" alt=""></td>
<td> <img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td></td>
</tr>
</table></td>
<td width="234" background="images/psd_03.jpg"></td>
</tr>
</table>
</body>
</html>



Tag : HTML/CSS

Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2010-12-28 11:46:10 By : izone View : 983 Reply : 8
 

 

No. 1



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



สถานะออฟไลน์
Facebook

ลองดูตรงส่วนที่กำหนด width ดีๆน่ะครับ

เพราะถ้ามันเกินมาหน่อยนึ่งมันจะทำใหภาพเลื่อนได้น่ะครับ

ลองดูภาพตรงส่วนกลางดูนะครับ ถ้าหาจุดไม่ได้ก็ลองนั่งทำใหม่ และทำการ test ทีละส่วนไปเรื่อยๆจะได้ดูว่ามันผิดตรงไหน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-12-28 11:56:24 By : lightkung
 


 

No. 2

Guest


width ผมกำหนดแบบ ทีละหน่อยๆแล้วครับ...มันยังเหมือนเดิม
ไม่ทราบปกติ มันเป็นแบบนี้เหรอครับ หรือว่า เฉพาะผมที่เป็น
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-12-28 12:31:41 By : izone
 


 

No. 3



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



สถานะออฟไลน์
Facebook

ใช่ครับ ถ้ารูปไม่มีปัญหา มันจะติดกันครับ

ถ้าไม่ติดกัน ก็แสดงว่า code มันผิดนะแหละครับ

ยังไงลองส่งรูป ด้่าน ซ้าย ขวา ตรงกลาง มาให้ผมดูหน่อยครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-12-28 15:25:46 By : lightkung
 


 

No. 4

Guest


http://upload.one2car.com/download.aspx?pku=43D0097A7DU8NXPRZOK7Y7RWXLK1XP

ฝากไฟล์ไปให้แล้วครับ pass คือ 987987

ผมทำมาแบบ ยังไม่ได้ตัดตรงกลาง preview เป็นปกติ
กับ ตัดภาพตรงกลางแล้วเอามาใส่ในตาราง preview เป็นเส้น

ขอบคุณ คูณLightz มากครับที่ช่วยดูให้ ปัญหานี้แก้ไม่ตกจริงๆ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-12-29 09:03:26 By : izone
 


 

No. 5

Guest


ดูโค้ดละแนะนำให้เลิกแบ่งรูปภาพเป็นส่วนๆ แบบนี้ ใช้ div กำหนดตำแหน่งดีกว่า
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-12-29 23:34:47 By : ...
 


 

No. 6



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



สถานะออฟไลน์
Facebook

ผมดู code และรูปภาพที่ติดแล้วครับ

ค้อนข้าง งง เลยแหละครับ

แนะนำไม่ควรตัดภาพเป็นแบบนี้นะครับ น่าจะตัดเป็นส่วนๆกว่านี้นะครับ เพราะมันจะประกอบยาก

แล้วไอ้เส้นที่เกินมา ผมสงสัยมันมาจาก code นี้

Code (PHP)
<img src="images/spacer.gif" width="1" height="48" alt="">


ถ้าจะแก้ใหม่ ผมว่ามันต้องแก้ code ใหม่หมดเลยนะครับ

ตอนตัดรูปเราควรจะตัดเป็นคำๆดีกว่าน่ะครับ พวก wording นะครับ

แล้วก็ควรแบ่ง table ให้มันดูเรียบร้อยกว่านี้นะครับแล้วใช้การเลื่อนรูปเอา

อ่อ แล้วก็ควรเซ็ต align กับ valign ในแท็ก <td> ด้วยนะครับ

ตัวอย่าง

Code (PHP)
<tr><td align="left" valign="top" style="padding-top:30px; padding-left:15px;"><img src="top.png" width="100" height="100" border="0"></td></tr>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-12-30 08:33:09 By : lightkung
 


 

No. 7

Guest


ขอบคุณครับ จะลองดูๆ

ปกติผมตัดแบบนี้ เอามาประกันโดย copy มาทั้ง ตารางเลย โดยเปิดกับ dream แล้ว copy มาใส่อีกไฟล์ที่สร้างใหม่
ไม่ต้องมานั่งใส่ทีละภาพ

แต่ยังไงจะลองวิธีของคุณ Lightz ดูครับ

ขอบคุณมากๆครับที่ช่วยดูให้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2010-12-30 15:05:10 By : izone
 


 

No. 8

Guest


หวัดดีปีใหม่ กลับมาทดสอบแล้วครับ
ต้องตัดเป็นส่วนๆเอา แล้วมาวาง ไม่มีเส้นแล้วครับ ขอบคุณๆมาก
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-01-04 10:13:36 By : izone
 


   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : =-=-=-=-=- เรื่องเส้นที่ไม่พึงประสงค์จะแก้ยังไงดีครับ--------------
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่