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

Registered : 108,967

HOME > PHP > PHP Forum > อยากให้ปุ่มกด ไปอยู่ตำแหน่งด้านล่างซ้าย เขียนคำสั่ง Css ยังไงครับ



 

อยากให้ปุ่มกด ไปอยู่ตำแหน่งด้านล่างซ้าย เขียนคำสั่ง Css ยังไงครับ

 



Topic : 060471

Guest




อย่างเช่น
.box {
width: 300px;
height: 250px;
}

แล้วอยากให้ปุ่ม readmore ที่ทำขึ้นไปอยู่ตำแหน่ง ล่างซ้ายของกล่อง ทำยังไงหรอครับ

*พอดีจะทำ 3 column แล้วให้ปุ่ม readmore อยู่ตำแหน่งเดียวกัน ไม่กว่าข้อความ หรือรูปภาพ จะยาวหรือสั้นก็ตาม คือไม่มีผลกับตำแหน่งของปุ่ม readmore นะครับ

ขอคำแนะนำทีนะครับ
ขอบคุณมากๆ ครับ



Tag : PHP, HTML/CSS







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-05-21 04:49:37 By : Fogza View : 17252 Reply : 10
 

 

No. 1



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



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


ดูตามนี้ครับ
http://www.enjoyday.net/webtutorial/css/css_chapter17.html






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 08:08:36 By : grandraftz
 


 

No. 2



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



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

ขอบคุณมากครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 14:21:40 By : fogza
 

 

No. 3



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



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

ยังทำไม่ได้นะครับ
นี่คือส่วนที่เป็นปุ่ม readmore
.gn_static-link a {
background: url(../images/gn_static-link.png) 0 0 no-repeat;
padding: 6px 19px 8px 10px;
display: inline-block;
color: white;
}

.gn_static-link a:hover {background: url(../images/gn_static-link-hover.png) 0 0 no-repeat; text-decoration: none;}


ตามต้นฉบับที่ให้มา เค้าจะเอาไปแทรกในบทความเลย คือ
<span class="gn_static-link"><a href="#">Read more</a></span></div>



ตามรูปข้างบนนะครับ มันดูไม่เป็นระเบียบเอาซะเลย ผมอยากให้ปุ่ม Readmore มันอยู่ด้านล่างซ้ายสุดขอบ โดยที่ไม่สนใจว่าในตำแหน่งนั้นจะมีข้อมูลมาก หรือน้อยนะครับ กำหนดยังไง

ผมลองกำหนดแบบ
position:relative;
right: 0px;
bottom: 0px;

มันก็ยังไม่ได้ครับ กำหนดแบบอื่นๆ ก็ล้นไปล้นมา ช่วยทีนะครับ
เดี๋ยวออกไปข้างนอกแปปนึง เดี๋ยวมาดูใหม่ครับ


ประวัติการแก้ไข
2011-05-21 15:26:32
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 15:25:53 By : fogza
 


 

No. 4



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

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

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

ล่างซ้ายแล้วตัวอย่างยังไม่ใช่ล่างซ้ายอีกหรอครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 15:32:28 By : Dragons_first
 


 

No. 5



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



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

คือตำแหน่งมันไม่เท่ากันนะครับ ตามรูปไงครับ
อยากให้มันเท่ากันกับปุ่มที่ 3 ขวามือนะครับ ต้องทำยังไงเอ๋ย?

ต้องกำหนดความสูงของกล่องหรือปล่าวครับ


ประวัติการแก้ไข
2011-05-21 15:44:33
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 15:44:01 By : fogza
 


 

No. 6



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

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

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

ใช่ครับกำหนดความสูงของกล่องให้เท่ากัน และปุ่ม read more ก็ไม่จำเป็นต้องเขียน css เพิ่มด้วยครับ ทำตารางไว้ล่างสุดเลยก็ได้ครับ

Code (PHP)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">งาน</th>
    <th scope="col">งาน</th>
    <th scope="col">งาน</th>
  </tr>
  <tr>
    <th align="left" scope="col">ปุ่ม</th>
    <th align="left" scope="col">ปุ่ม</th>
    <th align="left" scope="col">ปุ่ม</th>
  </tr>
</table>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 16:10:26 By : Dragons_first
 


 

No. 7



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



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

ตอบความคิดเห็นที่ : 6 เขียนโดย : Dragons_first เมื่อวันที่ 2011-05-21 16:10:26
รายละเอียดของการตอบ ::
scope="col" นี้คือคลาสของอะไรหรอครับ
แล้วเราประกาศความสูงแบบ height: 100%; แบบนี้ได้ไหม๋ครับ มันจะเท่ากันไหม๋

*โค้ดที่เขียนมาให้ดูคือ html ไม่ต้องไปทำเพิ่มใน css ใช่ไหม๋ครับ แค่เรียกคลาสที่เป็นปุ่ม readmore มาใส่ในตาราง ผมเข้าใจถูกไหม๋?

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 16:20:48 By : fogza
 


 

No. 8



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

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

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

ไม่ถูกครับ ที่ทำมาให้ดูเป็นตัวอย่างการสร้างตาราง จากตัวอย่างของคุณ ทำให้ผมนึกว่า ถ้าแบ่งตารางเป็น 2 row 3 column คือโค๊ดอันนี้
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">รายละเอียดงาน 1</th>
    <th scope="col">รายละเอียดงาน 2</th>
    <th scope="col">รายละเอียดงาน 3</th>
  </tr>
  <tr>
    <th align="left" scope="col">เอาปุ่ม read more มาใส่ที่นี่</th>
    <th align="left" scope="col">เอาปุ่ม read more มาใส่ที่นี่</th>
    <th align="left" scope="col">เอาปุ่ม read more มาใส่ที่นี่</th>
  </tr>
</table>


ไม่ว่า รายละเอียดงาน 1 งานมันจะเยอะมากน้อย หรือไม่เท่ากัน อย่างไร ปุ่ม read more ก็จะเท่ากันโดยไม่สนใจ รายละเอียดงาน เลยครับ ไม่ต้องเขียน css คุมตารางครับ แค่เขียนคุมตัวอักษรก็พอแล้ว


ประวัติการแก้ไข
2011-05-21 16:35:46
2011-05-21 16:36:41
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 16:35:23 By : Dragons_first
 


 

No. 9



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



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

นี้คือโค้ดที่เอารูปมาให้ดูนะครับ
Code
<div class="wrapper wrapper-services">
<div class="col-3">
<h3>ทดสอบ</h3>
<p>Lorem ipsum dolor sit amet, con- sectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul>
<li><a href="#">ทดสอบ1</a></li>
<li><a href="#">ทดสอบ2</a></li>
<li><a href="#">ทดสอบ3</a></li>
<li><a href="#">ทดสอบ4</a></li>
<li><a href="#">ทดสอบ5</a></li>
</ul>
<p><span class="gn_static-link"><a href="#">Read more</a></span></p>
</div>
<div class="col-3">
<h3>Building Strong Relationships</h3>
<p>Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <img src="http://image.ohozaa.com/i/d46/218x100.png" /></p>
<p><span class="gn_static-link"><a href="#">Read more</a></span></p>
</div>
<div class="col-3_1">
<h3>Healing From Trauma</h3>
Dolor sit amet, consectetur adipisicing elit, sed do alarm eiusmod tempor incididunt ut labore et dolore magna aliqua.
<ul>
<ul>
<li><a href="#">Recognize they are not responsible for the abuse they have suffered</a></li>
<li><a href="#">See that they are now safe</a></li>
<li><a href="#">Learn to trust and build healthy relationships</a></li>
<li><a href="#">Help their loved ones understand how to contribute to the healing</a></li>
</ul>
</ul>
<br /><span class="gn_static-link"><a href="#">Read more</a></span></div>
</div>


ส่วนคลาสที่เอามาใช้เป็น 3 column ก็คือแบบนี้
.col-3 {width: 218px; margin-right: 12px;}
.col-3_1 {width: 218px;}


ถ้าจะเขียนใหม่ต้องเขียนประมาณนี้หรือลป่าวครับ
<div class="wrapper wrapper-services">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>

<div class="col-3">
<h3>ทดสอบ</h3>
<p>..........xx.</p>
<ul>
<li><a href="#">ทดสอบ1</a></li>
</ul>

</tr>
<tr><p><span class="gn_static-link"><a href="#">Read more</a></span></p></tr>
</div>

<tr>

<div class="col-3">
<h3>Building Strong Relationships</h3>
<p>......xxxxx....</p>
<p><img src="http://image.ohozaa.com/i/d46/218x100.png" /></p>

</tr>
<tr><p><span class="gn_static-link"><a href="#">Read more</a></span></p></tr>
</div>

<tr>
<div class="col-3_1">
<h3>Healing From Trauma</h3>
...........xxxxxx..............
<ul>
<ul>
<li><a href="#">Recognize they are not responsible for the abuse they have suffered</a></li>
</ul>
</ul>

</tr>
<tr><br /><span class="gn_static-link"><a href="#">Read more</a></span></div></tr>
</div>

</table>

</div>


ประมาณนี้หรือปล่าวครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 16:54:33 By : fogza
 


 

No. 10



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



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

ผมลองแล้วไม่ได้ครับ
เฮ้อ เหนื่อยจริงๆ


ประวัติการแก้ไข
2011-05-21 17:33:43
2011-05-21 17:37:19
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-21 17:33:24 By : fogza
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : อยากให้ปุ่มกด ไปอยู่ตำแหน่งด้านล่างซ้าย เขียนคำสั่ง Css ยังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , pangpond.com , pangpond.co.th , สำนักงานบัญชี.com , รถมือสอง

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