Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 175
  • Last Modified:

Create clinks which looks like a button on mouse hover

I'm trying to create links similar to Yahoo, Bing, or Excite page index numbers.
page index links
I can't figure out the HTML/CSS code being used to implement this.
Can someone please provide some example code for this?

<div class="ResultPageIndexTableOuter" id="ResultPageIndexBottom"><table class="ResultPageIndexTable"><tr class="ResultPageIndexTableRow" ><td class="ResultPageIndexTableData">1</td>
<td class="ResultPageIndexTableData"><a target="_self" href="?SearchCriteria=test&start=10&max=10" > 2 </a></td>
<td class="ResultPageIndexTableData"><a target="_self" href="?SearchCriteria=test&start=20&max=10" > 3 </a></td>

<td class="ResultPageIndexTableData"><a target="_self" href="?SearchCriteria=test&start=30&max=10" > 4 </a></td>
<td class="ResultPageIndexTableData" id="ResultPageIndexTableDataNext"><a target="_self" href="?SearchCriteria=test&start=10&max=10">Next<em id="ResultPageIndexArrowNext"> &gt;</em></a></td>
</tr></table></div></div></tbody></td></tr></table>

Open in new window

0
Axter
Asked:
Axter
  • 2
1 Solution
 
LZ1Commented:
It's pretty simple to do, however there are ready made solutions out there that you can customize to your liking. See below:

http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html 
http://www.thewebhelp.com/css/pagination-style-template/ 

0
 
AxterAuthor Commented:
I couldn't use the exact code listed in those links, which were using span and ul, because they wouldn't center right on FF, and didn't work right on IE.

But I was able to copy the parts that added the border to my table CSS code, and it works great.

Thanks
0
 
AxterAuthor Commented:
For anyone interested, here's the code I used, which also includes rounded corners for FF, Chrome, and Opera.
The CSS code:
 
/* ****************************************************** */
/* ****************************************************** */
/* - Pagination Style --- ******************************* */
/* ****************************************************** */
/* The Pagination is a list of index numbers allowing user to jump from one set of results to the next. */
/* Example: <Prev  1  2   3  4  5  6  7  8  9  10  Next> */

.PaginationTableData td {
	border: solid 1px #9aafe5 margin-right :   2px;
	margin: 0;
	padding: 0;
	font-size: 11px;
	list-style: none;
	margin-right: 2px;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	-khtml-border-radius: .3em;
	border-radius: .3em;
}

.PaginationTableData a {
	border: solid 1px #9aafe5
}

/* To have active page highlighted, uncomment below lines */
.PaginationTableData .active {
/* 	background: #2e6ab1; */
/* 	color: #FFFFFF; */
/* 	font-weight: bold; */
/* 	display: block; */
/* 	float: left; */
/* 	padding: 4px 6px; */
}

.PaginationTableData a:link,.PaginationTableData a:visited {
	color: #0e509e display :   block;
	float: left;
	padding: 3px 6px;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	-khtml-border-radius: .3em;
	border-radius: .3em;
}

/* To stop background from changing color on hover, comment out below lines, and uncomment the commented line */
.PaginationTableData a:hover {
	background: #2e6ab1;
	color: #FFFFFF;
	font-weight: bold;
	display: block;
	float: left;
	padding: 4px 6px;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	-khtml-border-radius: .3em;
	border-radius: .3em;
/* 	border: solid 1px #0e509e */
}


/*  Used to center Pagination for IE */
.PaginationTableOuter {
	text-align: center;
	align: center;
	margin-left: auto;
	margin-right: auto;
}

#PaginationBottom {
	text-align: center;
	align: center;
	margin-left: auto;
	margin-right: auto;
}

/*  Used to center Pagination for FF and other browsers except IE */
.PaginationTable {
	text-align: center;
	align: center;
	margin-left: auto;
	margin-right: auto;
}

.PaginationTableData {
	padding:8px;
	white-space:nowrap; 
}


/* Used to only format the Next link */
#PaginationTableDataNext a:link {
/* 	text-decoration: underline; */
}

/* Used to only format the Prev link */
#PaginationTableDataPrev a:link {
/* 	text-decoration: underline; */
}

/* To hide Previous Arrow character uncomment the two lines below */
#PaginationArrowPrev { 
	/* display: none; */
	/* visibility:hidden; */	
}

/* To hide Next Arrow character uncomment the two lines below */
#PaginationArrowNext { 
	/* display: none; */
	/* visibility:hidden; */	
}

/* To fully spell out word Previous, comment out below two lines */
#PaginationPrevious {
	display: none;
	visibility: hidden;
}

/* To hide the Pagination numbers, uncommented below lines */
.PaginationNumbers {
/* 	display: none; */
/* 	visibility:hidden; */
}

Open in new window


HTML code.
 
<div class="PaginationTableOuter" id="PaginationBottom">
<table class="PaginationTable">
<tr class="PaginationTableRow" >
<td class="PaginationTableData" id="PaginationTableDataPrev"><a target="_self" href="?SearchCriteria=test&start=0&max=100"><em id="PaginationArrowPrev">&#171; </em>Prev<em id="PaginationPrevious">ious</em></a></td>

<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=0&max=100" > 1 </a></td>
<td class="PaginationTableData" id="PaginationTableDataActive"><em class="PaginationNumbers"><em class="active"> 2</em></em></td>
<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=200&max=100" > 3 </a></td>
<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=300&max=100" > 4 </a></td>
<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=400&max=100" > 5 </a></td>
<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=500&max=100" > 6 </a></td>
<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=600&max=100" > 7 </a></td>
<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=700&max=100" > 8 </a></td>
<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=800&max=100" > 9 </a></td>
<td class="PaginationTableData"><a class="PaginationNumbers" target="_self" href="?SearchCriteria=test&start=900&max=100" > 10 </a></td>
<td class="PaginationTableData" id="PaginationTableDataNext"><a target="_self" href="?SearchCriteria=test&start=200&max=100">Next<em id="PaginationArrowNext"> &#187;</em></a></td>
</tr>
</table>
</div>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now