HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์
Moderator: mindphp
-
pprn
- PHP Super Hero Member
- โพสต์: 565
- ลงทะเบียนเมื่อ: 02/07/2018 10:45 am
โพสต์ที่ยังไม่ได้อ่าน
โดย pprn »
อยากให้ตัวแบ่งหน้า (pagination) อยู่กึ่งกลางหน้าเว็บ ใน Joomla 3.8 แต่ไม่สามารถทำได้ค่ะ
ตอนนี้ที่ทำได้ตัวแบ่งหน้า (pagination) ยังอยู่ฝั่งซ้ายของหน้าเว็บ ดังรูป
โค้ดหน้า index.php
โค้ด: เลือกทั้งหมด
<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<div class="pagination-toolbar clearfix text-center">
<ul>
<li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
<li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
<li><a href="" class="pagenav">1</a></li>
<li><a href="" class="pagenav">2</a></li>
<li><a href="" class="pagenav">3</a></li>
<li><a href="" class="pagenav">4</a></li>
<li><a href="" class="pagenav">5</a></li>
<li class="pagination-next"><a title="" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
<li class="pagination-end"><a title="" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
</ul>
</div>
<br/><br/>
<p class="counter">
หน้าที่ 1 จาก 2
</p>
โค้ด CSS
โค้ด: เลือกทั้งหมด
.pagination-toolbar ul:not(.pagination-list) li > a, .pagination-toolbar ul:not(.pagination-list) li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: 0px;
line-height: 1.42857143;
color: #000066;
text-decoration: none;
background-color: #fff;
border: 1px solid #000066;
}
.pagination-toolbar>ul{
list-style-type: none;
text-align: center
}
.pagination-toolbar li:not(.pagination-start):not(.pagination-prev):not(.pagination-next):not(.pagination-end) > span {
color: #000066;
background-color: #fff;
}
.counter{
text-align: center
}
อยากรู้ว่าต้องเพิ่มโค้ดตรงไหนใน CSS บ้างคะ
ขอบคุณค่ะ
-
pprn
- PHP Super Hero Member
- โพสต์: 565
- ลงทะเบียนเมื่อ: 02/07/2018 10:45 am
โพสต์ที่ยังไม่ได้อ่าน
โดย pprn »
thatsawan เขียน:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>
ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์
โค้ด: เลือกทั้งหมด
<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<center>
<div class="pagination-toolbar clearfix text-center">
<ul>
<li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
<li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
<li><a href="" class="pagenav">1</a></li>
<li><a href="" class="pagenav">2</a></li>
<li><a href="" class="pagenav">3</a></li>
<li><a href="" class="pagenav">4</a></li>
<li><a href="" class="pagenav">5</a></li>
<li class="pagination-next"><a title="" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
<li class="pagination-end"><a title="" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
</ul>
</div>
</center>
<br/><br/>
<p class="counter">
หน้าที่ 1 จาก 2
</p>
ผลลัพธ์
เลยลองสร้างเมนูและเรียกใช้ bootstrap ดูก็ทำให้อยู่กึ่งกลางได้ปกติค่ะ
โค้ด: เลือกทั้งหมด
<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<center>
<ul class="nav nav-list">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#">Profile</a>
</li>
<li>
<a href="#">Messages</a>
</li>
</ul>
</center>
ผลลัพธ์
อยากรู้ว่าหนูทำอะไรผิดไปหรือเปล่า
ขอบคุณค่ะ
-
thatsawan
- PHP VIP Members
- โพสต์: 28508
- ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
-
ติดต่อ:
โพสต์ที่ยังไม่ได้อ่าน
โดย thatsawan »
pprn เขียน:thatsawan เขียน:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>
ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์
โค้ด: เลือกทั้งหมด
<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<center>
<div class="pagination-toolbar clearfix text-center">
<ul>
<li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
<li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
<li><a href="" class="pagenav">1</a></li>
<li><a href="" class="pagenav">2</a></li>
<li><a href="" class="pagenav">3</a></li>
<li><a href="" class="pagenav">4</a></li>
<li><a href="" class="pagenav">5</a></li>
<li class="pagination-next"><a title="" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
<li class="pagination-end"><a title="" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
</ul>
</div>
</center>
<br/><br/>
<p class="counter">
หน้าที่ 1 จาก 2
</p>
น่าจะมี CSS ตัวอื่นๆ บังคับชิดซ้ายอยู่ อาจจะต้องใช้ การเขียน Class ใหม่เข้ามาทับ
-
pprn
- PHP Super Hero Member
- โพสต์: 565
- ลงทะเบียนเมื่อ: 02/07/2018 10:45 am
โพสต์ที่ยังไม่ได้อ่าน
โดย pprn »
thatsawan เขียน:pprn เขียน:thatsawan เขียน:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>
ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์
โค้ด: เลือกทั้งหมด
<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<center>
<div class="pagination-toolbar clearfix text-center">
<ul>
<li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
<li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
<li><a href="" class="pagenav">1</a></li>
<li><a href="" class="pagenav">2</a></li>
<li><a href="" class="pagenav">3</a></li>
<li><a href="" class="pagenav">4</a></li>
<li><a href="" class="pagenav">5</a></li>
<li class="pagination-next"><a title="" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
<li class="pagination-end"><a title="" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
</ul>
</div>
</center>
<br/><br/>
<p class="counter">
หน้าที่ 1 จาก 2
</p>
น่าจะมี CSS ตัวอื่นๆ บังคับชิดซ้ายอยู่ อาจจะต้องใช้ การเขียน Class ใหม่เข้ามาทับ
เพิ่ม class CSS ขึ้นมาดังนี้ค่ะ
โค้ด: เลือกทั้งหมด
.pagination-toolbar li{
display: inline;
}
.pagination-toolbar>ul{
list-style-type: none;
display: inline-block;
}
ผลลัพธ์
-
-
- 1 ตอบกลับ
- 1140 แสดง
-
โพสต์ล่าสุด โดย eange08
03/02/2022 11:18 am
-
-
- 3 ตอบกลับ
- 430 แสดง
-
โพสต์ล่าสุด โดย mindphp
25/01/2023 12:40 pm
-
-
- 2 ตอบกลับ
- 339 แสดง
-
โพสต์ล่าสุด โดย abdkode
13/02/2019 1:52 pm
-
-
- 0 ตอบกลับ
- 3042 แสดง
-
โพสต์ล่าสุด โดย pprn
29/10/2018 10:51 pm
-
-
- 0 ตอบกลับ
- 3297 แสดง
-
โพสต์ล่าสุด โดย abdkode
15/02/2019 2:33 pm
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 79