[RESOLVED] Pure CSS Paging Problem - HTML Forums

expinch · 03-22-2006, 03:52 PM

I've writing a paging control using pure css rollovers but I'm running into a few problems (using IE6 and Strict XHTML).

The paging mechanism amounts to an unordered list of links, each link has (or is supposed to have) a background image that changes based on the :hover pseudoclass. The first problem I am having is getting the background images to display (in their entirety) behind their corresponding links. The hover itself works, but the background image only shows up in the area where the contained link resides (which only amounts to a small portion of the image). I've tried to give both the <a> tag and the <li> tag heights and widths equal to the background image, but it still doesn't work.

The second problem I'm having is making the paging mechanism only as big as its contained elements. Because I'm floating each of the <div>s inside the main container, I can only set a background image on the innerContainer if I give it an exact width. But I don't want to have to give it a width as I want it go grow and contract as needed.

Finally, the first box in the paging mechanism is a <span> that should have a border, but only the left and right side borders show up? Works in Firefox.

Here is the html, css, and background images, thanks:

Code:

<div class="pagingContainer">  <!-- for positioning -->
  <div class="pagingInnerContainer">  <!-- for styling -->
    <div class="gotoSelect">
	  <span class="totalPagesBox">324 Pages <img src="images/smalldownarrow.gif" alt="" /></span>
    </div>
	<div class="pageSelect">
	  <ul>
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">&lsaquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#" class="activePage">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&rsaquo;</a></li>
        <li><a href="#">&raquo;</a></li>
      </ul>
	</div>
    <div class="recordSelect">
      <select>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>	
      Records/Page
	</div>
    <div class="clear"></div>
  </div>
</div>

Code:

/* paging styles */
.pagingContainer {margin:10px 0px;}
.pagingInnerContainer {padding:3px 0px 0px 3px;background-color:#93a2bd;border:1px solid #5f6f7f;width:50%;}
/* Go-to styles */
.pagingContainer .gotoSelect {float:left;padding:2px 0px;}
.pagingContainer span.totalPagesBox {vertical-align:middle;background-color:#dadfe6;border:2px solid black;padding:3px;}

/* Paging link styles */
.pagingContainer .pageSelect {float:left;padding:2px;}
.pagingContainer ul {list-style-type:none;margin:0px 10px;padding:0px;}
.pagingContainer ul li {display:inline;padding:0px;margin:0px 5px;text-align:center;vertical-align:middle;}
.pagingContainer ul li a {background-image:url(mages/inactivePageBackground.gif);text-decoration:none;color:black;}
.pagingContainer ul li a:hover {background-image:url(images/activePageBackground.gif);text-decoration:underline;margin:0px;}
.pagingContainer ul li a.activePage {font-weight:bold;background-image:url(images/activePageBackground.gif);margin:0px;text-decoration:underline;}
/* Record Style */
.pagingContainer .recordSelect {float:left;vertical-align:middle;}
.pagingContainer .recordSelect select {background-color:#dadfe6;}

_Aerospace_Eng_ · 03-22-2006, 05:27 PM

The links need to be display:block;
Then you can give them width and height. Its probably wise to get rid of display:inline; in your lis as well and use float:left; instead.

expinch · 03-22-2006, 06:58 PM

Perfecto, that did it, thanks.

kntl · 11-08-2009, 03:34 PM

i have created a paging with css. it has a tooltip for current page's and next-previous pages'. you can download and test it on my blog:

http://kntl.org/css-imageless-but-co...ipt-and-jquery