Jump to content

Pagination Link

Recommended Posts

  • Replies 8
  • Views 1.2k
  • Created
  • Last Reply
On 1/31/2021 at 6:59 PM, FMP said:

I have copy one from this page https://www.w3schools.com/css/css3_pagination.asp

Edit page > Add a Code block > Paste this code

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/6/2021 at 9:39 AM, tuanphan said:

Edit page > Add a Code block > Paste this code


<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>

 

Thank you so much @tuanphan!!! It works great!!! I have tried to add some code to center and put the symbols inside two squares.

I hope can help someone else!

 

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  
}
</style>
</head>
<body>
<div class="center">
<div class="pagination">
  
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  
}
</style>

 

Link to comment
5 minutes ago, FMP said:

Thank you so much @tuanphan!!! It works great!!! I have tried to add some code to center and put the symbols inside two squares.

I hope can help someone else!

 


<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  
}
</style>
</head>
<body>
<div class="center">
<div class="pagination">
  
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  
}
</style>

 

You can shorten code

<div class="pagination"> 
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
  text-align: center;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
18 minutes ago, tuanphan said:

You can shorten code


<div class="pagination"> 
  <a href="#">&laquo;</a>
  <a href="#">&raquo;</a>
</div>
<style>
.pagination {
  display: inline-block;
  text-align: center;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  
}
</style>

 

It doens't work..... the block is still on the left..

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.