Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ


HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

Post by pprn » 28/10/2018 5:34 pm

อยากให้ตัวแบ่งหน้า (pagination) อยู่กึ่งกลางหน้าเว็บ ใน Joomla 3.8 แต่ไม่สามารถทำได้ค่ะ

ตอนนี้ที่ทำได้ตัวแบ่งหน้า (pagination) ยังอยู่ฝั่งซ้ายของหน้าเว็บ ดังรูป
pag.jpg
โค้ดหน้า index.php

Code: Select all

<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

Code: Select all

.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 บ้างคะ
ขอบคุณค่ะ

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 20007
Joined: 31/03/2014 10:02 am
Contact:

Re: Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

Post by thatsawan » 28/10/2018 9:32 pm

ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

Re: Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

Post by pprn » 28/10/2018 11:09 pm

thatsawan wrote:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>
ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์

Code: Select all

<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>
ผลลัพธ์
gr1.jpg
เลยลองสร้างเมนูและเรียกใช้ bootstrap ดูก็ทำให้อยู่กึ่งกลางได้ปกติค่ะ

Code: Select all

<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>
ผลลัพธ์
gr2.jpg
อยากรู้ว่าหนูทำอะไรผิดไปหรือเปล่า
ขอบคุณค่ะ

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 20007
Joined: 31/03/2014 10:02 am
Contact:

Re: Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

Post by thatsawan » 28/10/2018 11:32 pm

pprn wrote:
thatsawan wrote:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>
ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์

Code: Select all

<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 ใหม่เข้ามาทับ

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

Re: Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

Post by pprn » 29/10/2018 11:57 am

thatsawan wrote:
pprn wrote:
thatsawan wrote:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>
ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์

Code: Select all

<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 ขึ้นมาดังนี้ค่ะ

Code: Select all

.pagination-toolbar li{
     display: inline;
}
.pagination-toolbar>ul{
    list-style-type: none;
    display: inline-block;
} 
ผลลัพธ์
15.jpg


Post Reply

Return to “HTML CSS”

Users browsing this forum: No registered users and 6 guests