Jump to content
  • Checkout
  • Login
  • Get in touch


The e-commerce.

Looking for css numbered boxes


Recommended Posts

I'm sure that this is pretty simple but it's beyond my simple css skills.


I'd like to change the method of navigation between pages in multi-page product listings, search results, etc from:


previous | 1 | 2 | 3 | next


to a series of css boxes.


I know that it should be ul-based and most examples use float:left but they all create a multi-section bar, not individual boxes.


Is there a css-guru out there who could help? Or point me to a contrib?



Link to comment
Share on other sites

I came up with what I needed. Here is what I've got in case anyone is interested or can suggest a better method:




a.splitPageNavigation {
 float: left;
 padding: 10px;
 color: #000000;
 font-style: none;
 text-decoration: none;
 border-color: #000000;
 border-spacing: 1px;
 border-style: solid;
 border-width: 1px;
 background-color: #ffffff;

a.splitPageNavigation:hover {
 background-color: #8080ff;





<div style="float: right;">
 <a class="splitPageNavigation" href="#"><</a>
 <div style="float: left; padding-top: 10px;"> ... </div>
 <a class="splitPageNavigation" href="#">4</a>
 <div style="float: left;"> </div>
 <a class="splitPageNavigation" href="#">5</a>
 <div style="float: left;"> </div>
 <a class="splitPageNavigation" href="#">6</a>
 <div style="float: left; padding-top: 10px;"> ... </div>
 <a class="splitPageNavigation" href="#">></a>


I realize that there's some odd looking code in there but css isn't my forte plus I'm tired and this seems to work. I'd love to see how to improve it though.

Link to comment
Share on other sites


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

  • Create New...