ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programming[สอบถาม] วิธีทำ Thumbnail
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: [สอบถาม] วิธีทำ Thumbnail  (อ่าน 1176 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
legendaross
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 283
ออฟไลน์ ออฟไลน์

กระทู้: 1,002



ดูรายละเอียด
« เมื่อ: 26 พฤษภาคม 2011, 18:08:44 »

CSS เขียนยังไงให้มันออกมาเรียงกันเป็น thumbnail

เพิ่งเคยลอง css ประเภทนี้ล่ะครับ สับสนจริงๆ  Embarrassed

ปัจจุบันมันคือ
   width:200px;
   height:400px;
   float:left;
   border: 1px solid #ccc;
   margin: 5px;
   padding: 5px;
ดูเหมือนว่ามันจะไม่ยอมเป็นตารางเอาซะเลย ยืดตามของที่ใส่เข้าไปซะงั้น


แบบนี้ต้องแก้ไขยังไงครับผม


ขอบพระคุณมากครับ
 wanwan017
บันทึกการเข้า

vii
Verified Seller
สมุนแก๊งเสียว
*

พลังน้ำใจ: 132
ออฟไลน์ ออฟไลน์

กระทู้: 986



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 26 พฤษภาคม 2011, 18:10:38 »

จะให้มันออกมาเป็นแบบไหนละครับ

ลอง max-width: 200px; max-height: 200px; ดูรึยังครับ
บันทึกการเข้า

legendaross
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 283
ออฟไลน์ ออฟไลน์

กระทู้: 1,002



ดูรายละเอียด
« ตอบ #2 เมื่อ: 26 พฤษภาคม 2011, 18:16:42 »

จะให้มันออกมาเป็นแบบไหนละครับ

ลอง max-width: 200px; max-height: 200px; ดูรึยังครับ

ได้จริงๆด้วย!

เพราะผมไม่รู้จัก max-width max-height นี่เอง
ความรู้ใหม่ Tongue


ขอบคุณมากนะครับผม
 wanwan017
บันทึกการเข้า

legendaross
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 283
ออฟไลน์ ออฟไลน์

กระทู้: 1,002



ดูรายละเอียด
« ตอบ #3 เมื่อ: 26 พฤษภาคม 2011, 19:27:16 »

ขออนุญาติดันครับ

สอบถามเพิ่มเติมครับ


ปกติเวลา text มันล้นแบบนี้ ทำให้ตารางเบี้ยวไปด้วย จัดการยังไงดีครับ?  Tongue
บันทึกการเข้า

bonshington
ก๊วนเสียว
*

พลังน้ำใจ: 47
ออฟไลน์ ออฟไลน์

กระทู้: 376



ดูรายละเอียด
« ตอบ #4 เมื่อ: 26 พฤษภาคม 2011, 19:34:14 »

ถ้า control เป็น div ให้ใส่
โค๊ด:
position: inline-block;
และเอา float ออก กรณีที่ไม่ position ไม่ใช่ absolute

ที่ถูกต้อง ถ้าเป็นตารางติดกัน ควรใช้
โค๊ด:
ul.thumbnail
{
  padding: 0px; margin: 0px; overflow-y: visible;
  border: ...
 
}
ul.thumbnail > li
{
   list-style: none outside none;
   width:200px;
   height:400px;
   border: 1px solid #ccc;
   margin: 5px;
   padding: 5px;
   
   position: absolute;
   float: left;
   overflow-y: auto; // หรือ hidden ถ้าไม่ต้องการแสดง
}

โค๊ด:
<ul class="thumbnail">
 <li>...</li><li>...</li><li>...</li>
</ul>
« แก้ไขครั้งสุดท้าย: 26 พฤษภาคม 2011, 19:36:05 โดย bonshington » บันทึกการเข้า
legendaross
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 283
ออฟไลน์ ออฟไลน์

กระทู้: 1,002



ดูรายละเอียด
« ตอบ #5 เมื่อ: 26 พฤษภาคม 2011, 19:46:06 »

ถ้า control เป็น div ให้ใส่
โค๊ด:
position: inline-block;
และเอา float ออก กรณีที่ไม่ position ไม่ใช่ absolute

ที่ถูกต้อง ถ้าเป็นตารางติดกัน ควรใช้
โค๊ด:
ul.thumbnail
{
  padding: 0px; margin: 0px; overflow-y: visible;
  border: ...
 
}
ul.thumbnail > li
{
   list-style: none outside none;
   width:200px;
   height:400px;
   border: 1px solid #ccc;
   margin: 5px;
   padding: 5px;
   
   position: absolute;
   float: left;
   overflow-y: auto; // หรือ hidden ถ้าไม่ต้องการแสดง
}

โค๊ด:
<ul class="thumbnail">
 <li>...</li><li>...</li><li>...</li>
</ul>



ตอนนี้ผมคุมด้วย span ครับ (ไม่ค่อยรู้อะไรซักเท่าไหร่  Embarrassed)
เดี๋ยวจะลองเปลี่ยนดูครับ

ขอบคุณมากนะครับ
 wanwan017
บันทึกการเข้า

senseword
สมุนแก๊งเสียว
*

พลังน้ำใจ: 22
ออฟไลน์ ออฟไลน์

กระทู้: 560



ดูรายละเอียด
« ตอบ #6 เมื่อ: 26 พฤษภาคม 2011, 19:49:34 »

ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ
บันทึกการเข้า
legendaross
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 283
ออฟไลน์ ออฟไลน์

กระทู้: 1,002



ดูรายละเอียด
« ตอบ #7 เมื่อ: 26 พฤษภาคม 2011, 19:57:49 »

ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ


ทั้งสองอย่างครับ ลองงมๆแถวนี้นะครับผม
http://www.thaiseoboard.com/index.php/topic,197109.0.html
บันทึกการเข้า

senseword
สมุนแก๊งเสียว
*

พลังน้ำใจ: 22
ออฟไลน์ ออฟไลน์

กระทู้: 560



ดูรายละเอียด
« ตอบ #8 เมื่อ: 26 พฤษภาคม 2011, 20:02:02 »

ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ


ทั้งสองอย่างครับ ลองงมๆแถวนี้นะครับผม
http://www.thaiseoboard.com/index.php/topic,197109.0.html


ครับงมมาแล้วครับในโพสขึ้นอยู่ครับแต่อยากให้มันดึงออกมาเป็น thumill ในหน้าแรกเหมือนภาพด้านบนเหมือนท่านครับ แต่ถ้าภาพอยู่บน sever มันจะขึ้นแต่แค่โพสใส่แค่ link amazon มันไม่ขึ้นครับ
บันทึกการเข้า
dilok
สมุนแก๊งเสียว
*

พลังน้ำใจ: 39
ออฟไลน์ ออฟไลน์

กระทู้: 836



ดูรายละเอียด
« ตอบ #9 เมื่อ: 26 พฤษภาคม 2011, 20:03:30 »

เก็บความรู้  wanwan020
บันทึกการเข้า

legendaross
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 283
ออฟไลน์ ออฟไลน์

กระทู้: 1,002



ดูรายละเอียด
« ตอบ #10 เมื่อ: 26 พฤษภาคม 2011, 20:10:39 »

ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ


ทั้งสองอย่างครับ ลองงมๆแถวนี้นะครับผม
http://www.thaiseoboard.com/index.php/topic,197109.0.html


ครับงมมาแล้วครับในโพสขึ้นอยู่ครับแต่อยากให้มันดึงออกมาเป็น thumill ในหน้าแรกเหมือนภาพด้านบนเหมือนท่านครับ แต่ถ้าภาพอยู่บน sever มันจะขึ้นแต่แค่โพสใส่แค่ link amazon มันไม่ขึ้นครับ



ของผมแบบนี้อะครับ ดึงได้จากโฮสและจากamazon แต่ต้องใส่โค้ดจากกระทู้โน้นใน function.php ก่อนนะครับ
โค๊ด:
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_post_image(); ?>" alt="<?php the_title(); ?>" width="160" height="160" /></a><br />
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
บันทึกการเข้า

senseword
สมุนแก๊งเสียว
*

พลังน้ำใจ: 22
ออฟไลน์ ออฟไลน์

กระทู้: 560



ดูรายละเอียด
« ตอบ #11 เมื่อ: 26 พฤษภาคม 2011, 20:27:16 »

ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ


ทั้งสองอย่างครับ ลองงมๆแถวนี้นะครับผม
http://www.thaiseoboard.com/index.php/topic,197109.0.html


ครับงมมาแล้วครับในโพสขึ้นอยู่ครับแต่อยากให้มันดึงออกมาเป็น thumill ในหน้าแรกเหมือนภาพด้านบนเหมือนท่านครับ แต่ถ้าภาพอยู่บน sever มันจะขึ้นแต่แค่โพสใส่แค่ link amazon มันไม่ขึ้นครับ



ของผมแบบนี้อะครับ ดึงได้จากโฮสและจากamazon แต่ต้องใส่โค้ดจากกระทู้โน้นใน function.php ก่อนนะครับ
โค๊ด:
		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_post_image(); ?>" alt="<?php the_title(); ?>" width="160" height="160" /></a><br />
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>


 wanwan017 ขอบคุณครับ ตอนนี้บวกไม่ได้เดี๋ยววันหลังมาบวกให้ครับ เดี๋ยวไปลองก่อนครับ
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์