ในการปรับแต่ง Template ที่เป็นรูปแบบของหน้าเว็บไซต์หากหน้าเว็บมีการแสดงข้อมูลเนื้อหาที่อยู่ในรูปแบบของ Thumbnail แต่ละช่องของ Description จะมีความยาวของเนื้อหาที่ไม่เท่ากันจึงทำให้ช่อง Thumbnail แต่ละช่องมีขนาดไม่เท่ากัน ส่งผลให้หน้าเว็บนั้นดูไม่เป็นระเบียบ และไม่สวยงาม บทความนี้จึงเป็นการแนะนำวิธีการปรับกำหนดขนาดของ Thumbnail ให้มีขนาดเท่ากันทุกช่อง สามารถทำได้ดังนี้

1.Run หน้า localhost  ที่ต้องการกำหนดขนาดช่อง Description ใน Thumbnail

แนะนำวิธีการปรับกำหนดขนาดของ Thumbnail ให้มีขนาดเท่ากันทุกช่อง
แสดงหน้าที่ต้องการกำหนด Description

 

2.กดปุ่ม F12 ที่คีย์บอร์ดเพื่อดูโครงสร้าง จากนั้นคลิกที่เครื่องมือ "เลือกองค์ประกอบจากหน้า"

แนะนำวิธีการปรับกำหนดขนาดของ Thumbnail ให้มีขนาดเท่ากันทุกช่อง
คลิกที่เครื่องมือ "เลือกองค์ประกอบจากหน้า"

 

3.ใช้เมาส์ชี้ไปที่ส่วน Description ของ Thumbnail และดูขนาดของช่อง

แนะนำวิธีการปรับกำหนดขนาดของ Thumbnail ให้มีขนาดเท่ากันทุกช่อง
ชี้ไปที่ส่วน Description ของ Thumbnail

 

4.Copy ชื่อของคลาส ไปใส่ในไฟล์ user.css ในโปรแกรม Netbeans และกำหนดความสูงของช่อง Description

ตัวอย่างโค้ด ที่นำไปใส่ในไฟล์ user.css

.categories-list .span4 .category-desc {
    height: 70px;
}

 

หน้าเว็บหลังจากการกำหนดขนาดของช่อง Description

แนะนำวิธีการปรับกำหนดขนาดของ Thumbnail ให้มีขนาดเท่ากันทุกช่อง
แสดงหน้าเว็บหลังจากกำหนดขนาดช่อง Description

 

 

 

 

 

 

 

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
หลอด T8 LED วิวัฒนาการของวงการหลอดไฟ
โดย admeadme พฤ 25 ม.ค. 2024 9:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
623
พฤ 25 ม.ค. 2024 9:23 am โดย admeadme View Topic หลอด T8 LED วิวัฒนาการของวงการหลอดไฟ
ปัญหา เร้าเตอร์เน็ต ขึ้น los สีแดง
โดย Thanavat_n พ 24 ม.ค. 2024 4:28 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
374
พ 24 ม.ค. 2024 4:29 pm โดย Thanavat_n View Topic ปัญหา เร้าเตอร์เน็ต ขึ้น los สีแดง
ใช้โปรแกรมอะไรดีสุดครับ จะอัพโค้ด PHP ขึ้นโฮส ทำการเช่าโฮสไว้แล้ว
โดย Anonymous อ 23 ม.ค. 2024 10:46 am บอร์ด Programming - PHP
1
1369
พ 24 ม.ค. 2024 7:47 am โดย mindphp View Topic ใช้โปรแกรมอะไรดีสุดครับ จะอัพโค้ด PHP ขึ้นโฮส ทำการเช่าโฮสไว้แล้ว
ภาษา Lua ตอนที่ 9 : ตัวดำเนินการตรรกะ
โดย worramaitk พฤ 18 ม.ค. 2024 5:17 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
632
พฤ 18 ม.ค. 2024 5:17 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 9 : ตัวดำเนินการตรรกะ
ภาษา Lua ตอนที่ 8 : ตัวดำเนินการ
โดย worramaitk พฤ 18 ม.ค. 2024 4:55 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
483
พฤ 18 ม.ค. 2024 4:55 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 8 : ตัวดำเนินการ
ภาษา Lua ตอนที่ 7 : ชนิดข้อมูล Table (2)
โดย worramaitk พฤ 18 ม.ค. 2024 4:02 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
708
พฤ 18 ม.ค. 2024 4:02 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 7 : ชนิดข้อมูล Table (2)
ภาษา Lua ตอนที่ 6 : ชนิดข้อมูล Table (1)
โดย worramaitk พฤ 18 ม.ค. 2024 3:34 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
296
พฤ 18 ม.ค. 2024 3:34 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 6 : ชนิดข้อมูล Table (1)
การใช้งานโปรแกรมเครื่องคิดเลขโอเพนซอร์ส Qalculate! สำหรับคำนวณสิ่งต่างๆ ในชีวิตประจำวัน
โดย worramaitk พฤ 18 ม.ค. 2024 3:10 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
197
พฤ 18 ม.ค. 2024 3:10 pm โดย worramaitk View Topic การใช้งานโปรแกรมเครื่องคิดเลขโอเพนซอร์ส Qalculate! สำหรับคำนวณสิ่งต่างๆ ในชีวิตประจำวัน