Forgot Password ??

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

	Registered : 109,037

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

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

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

Guest

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

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

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

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

Tag : PHP, HTML/CSS

Date : 2011-05-21 04:49:37

By : Fogza

View : 19856

Reply : 10

No. 1

grandraft

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

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

Date : 2011-05-21 08:08:36

By : grandraftz

No. 2

Fog

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

ขอบคุณมากครับ

Date : 2011-05-21 14:21:40

By : fogza

No. 3

Fog

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

ยังทำไม่ได้นะครับ
นี่คือส่วนที่เป็นปุ่ม 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;}

ตามต้นฉบับที่ให้มา เค้าจะเอาไปแทรกในบทความเลย คือ

ตามรูปข้างบนนะครับ มันดูไม่เป็นระเบียบเอาซะเลย ผมอยากให้ปุ่ม 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,750 )
บทความ ( 0 )

ล่างซ้ายแล้วตัวอย่างยังไม่ใช่ล่างซ้ายอีกหรอครับ

Date : 2011-05-21 15:32:28

By : Dragons_first

No. 5

Fog

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

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

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

ประวัติการแก้ไข
2011-05-21 15:44:33

Date : 2011-05-21 15:44:01

By : fogza

No. 6

หมาของเซสชั่น

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

ใช่ครับกำหนดความสูงของกล่องให้เท่ากัน และปุ่ม 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

Fog

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

ตอบความคิดเห็นที่ : 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,750 )
บทความ ( 0 )

ไม่ถูกครับ ที่ทำมาให้ดูเป็นตัวอย่างการสร้างตาราง จากตัวอย่างของคุณ ทำให้ผมนึกว่า ถ้าแบ่งตารางเป็น 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

Fog

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

นี้คือโค้ดที่เอารูปมาให้ดูนะครับ
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

Fog

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

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

ประวัติการแก้ไข
2011-05-21 17:33:43
2011-05-21 17:37:19

Date : 2011-05-21 17:33:24

By : fogza

ค้นหาข้อมูล

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

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

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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