[สอบถาม] วิธีทำ Thumbnail

[legendaross]

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

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

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


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


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

[vii]

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

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

[legendaross]

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

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

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

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


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

[legendaross]

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

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


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

[bonshington]

ถ้า 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>


[legendaross]

ถ้า 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 ครับ (ไม่ค่อยรู้อะไรซักเท่าไหร่  )
เดี๋ยวจะลองเปลี่ยนดูครับ

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

[senseword]

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

[legendaross]

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

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

[senseword]

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

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

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

[dilok]

เก็บความรู้ 

[legendaross]

ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน 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]

ขอบคุณครับที่ถามครับผมก็งมทำทีมเหมือนกันครับ
ท่าน 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>


ขอบคุณครับ ตอนนี้บวกไม่ได้เดี๋ยววันหลังมาบวกให้ครับ เดี๋ยวไปลองก่อนครับ