ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: legendaross ที่ 26 พฤษภาคม 2011, 18:08:44


หัวข้อ: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: legendaross ที่ 26 พฤษภาคม 2011, 18:08:44
CSS เขียนยังไงให้มันออกมาเรียงกันเป็น thumbnail

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

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

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


ขอบพระคุณมากครับ
 :wanwan017:

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: vii ที่ 26 พฤษภาคม 2011, 18:10:38
จะให้มันออกมาเป็นแบบไหนละครับ

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

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: legendaross ที่ 26 พฤษภาคม 2011, 18:16:42
อ้างจาก: vii ที่ 26 พฤษภาคม 2011, 18:10:38
จะให้มันออกมาเป็นแบบไหนละครับ

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

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

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


ขอบคุณมากนะครับผม
 :wanwan017:

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: legendaross ที่ 26 พฤษภาคม 2011, 19:27:16
ขออนุญาติดันครับ

สอบถามเพิ่มเติมครับ
(http://www.up4thai.com/img.php?1xr5fw0d13jbwk2420osic2741t7x955tr30a03p)

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

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: bonshington ที่ 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>

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: legendaross ที่ 26 พฤษภาคม 2011, 19:46:06
อ้างจาก: bonshington ที่ 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>



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

ขอบคุณมากนะครับ
 :wanwan017:

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: senseword ที่ 26 พฤษภาคม 2011, 19:49:34
ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: legendaross ที่ 26 พฤษภาคม 2011, 19:57:49
อ้างจาก: senseword ที่ 26 พฤษภาคม 2011, 19:49:34
ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ


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

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: senseword ที่ 26 พฤษภาคม 2011, 20:02:02
อ้างจาก: legendaross ที่ 26 พฤษภาคม 2011, 19:57:49
อ้างจาก: senseword ที่ 26 พฤษภาคม 2011, 19:49:34
ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ


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


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

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: dilok ที่ 26 พฤษภาคม 2011, 20:03:30
เก็บความรู้  :wanwan020:

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: legendaross ที่ 26 พฤษภาคม 2011, 20:10:39
อ้างจาก: senseword ที่ 26 พฤษภาคม 2011, 20:02:02
อ้างจาก: legendaross ที่ 26 พฤษภาคม 2011, 19:57:49
อ้างจาก: senseword ที่ 26 พฤษภาคม 2011, 19:49:34
ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ


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


ครับงมมาแล้วครับในโพสขึ้นอยู่ครับแต่อยากให้มันดึงออกมาเป็น 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>

หัวข้อ: Re: [สอบถาม] วิธีทำ Thumbnail
เริ่มหัวข้อโดย: senseword ที่ 26 พฤษภาคม 2011, 20:27:16
อ้างจาก: legendaross ที่ 26 พฤษภาคม 2011, 20:10:39
อ้างจาก: senseword ที่ 26 พฤษภาคม 2011, 20:02:02
อ้างจาก: legendaross ที่ 26 พฤษภาคม 2011, 19:57:49
อ้างจาก: senseword ที่ 26 พฤษภาคม 2011, 19:49:34
ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน legendaross ครับภาพสินค้าท่านดึงจากภาพที่เก็บในโฮสตัวเองหรือดึง link จาก amazon ครับ


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


ครับงมมาแล้วครับในโพสขึ้นอยู่ครับแต่อยากให้มันดึงออกมาเป็น 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: ขอบคุณครับ ตอนนี้บวกไม่ได้เดี๋ยววันหลังมาบวกให้ครับ เดี๋ยวไปลองก่อนครับ


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com