Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Looking for css numbered boxes


php_Guy

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?

 

tia!

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:

 

CSS:

 

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;
}

 

 

HTML:

 

<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>
</div>

 

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

Archived

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

×
×
  • Create New...