Looking for css numbered boxes

[php_Guy]

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!

[php_Guy]

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.