เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป
เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้
CSS (ตัด media query ออก เนื่องจากใช้ flex box ช่วยในการทำ responsive อยู่แล้ว)
.timeline {
position: relative;
/*max-width: 1200px;*/
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: #977c44;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timeline-container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.timeline-container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -12px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.timeline-left {
left: 0;
}
.timeline-right {
left: 50%;
}
.timeline-left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
.timeline-right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
.timeline-right::after {
left: -12px;
}
.timeline-content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง)
/*Include Bootstrap 5*/
<link href="css/bootstrap.min.css" rel="stylesheet" />
<div class="timeline">
<div class="timeline-container timeline-left">
<div class="timeline-content shadow-lg">
<div class="d-flex justify-content-between align-items-baseline">
<img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
<h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
</div>
<p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
</div>
</div>
<div class="timeline-container timeline-right">
<div class="timeline-content shadow-lg">
<div class="d-flex justify-content-between align-items-baseline">
<img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
<h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
</div>
<p>อุทยานประวัติศาสตร์พนมรุ้ง ปราสาทหินพนมรุ้งเป็นโบสถ์พราหมณ์ลัทธิไศวะ มีการบูรณะก่อสร้างต่อเนื่องกันมาหลายสมัย ตั้งแต่ประมาณพุทธศตวรรษที่ 15 ถึงพุทธศตวรรษที่ 17 และในพุทธศตวรรษที่ 18 พระเจ้าชัยวรมันที่ 7 แห่ง...</p>
</div>
</div>
<div class="timeline-container timeline-left">
<div class="timeline-content shadow-lg">
<div class="d-flex justify-content-between align-items-baseline">
<img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
<h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
</div>
<p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
</div>
</div>
<div class="timeline-container timeline-right">
<div class="timeline-content shadow-lg">
<div class="d-flex justify-content-between align-items-baseline">
<img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
<h3 class="text-brown text-shadow">พ.ศ. 1792-2006</h3>
</div>
<p>อุทยานประวัติศาสตร์ศรีสัชนาลัย ศรีสัชนาลัย มีพัฒนาการมาแต่สมัยก่อนประวัติศาสตร์ตอนปลาย ประมาณ ๒,๓๐๐ – ๑,๕๐๐ ปีมาแล้ว โดยปรากฏชื่อควบคู่ไปกับเมืองสุโขทัยที่เป็นราชธานี สันนิษฐานว่าเมืองศรีสัชนาลัยมีความสำคัญในฐาน...</p>
</div>
</div>
</div>ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ สามารถนำไปปรับใช้ โดยการปรับแก้ css และเพิ่มเติมส่วนแสดงผลอื่นๆได้ตามต้องการ
