This site requires JavaScript turned on. Your browser does not support JavaScript, or it has JavaScript disabled. If you want to correctly view all the pages on this site, please upgrade your browser or enable JavaScript support. Thank you for taking the time to visit.

« Links open in new window/tab »

Free Site Search Engine at JRank.org

« Links open in new window/tab »

Web Design & Development

Monitor Page for Changes

Share |

CSS - Fast Rollovers:
Uses Only One Image for Rollover Effect!
PayneLess Designs

Three Steps to Install Fast Rollovers

1.) Copy the following code between the <head> tags of your document:

Code:

<head>
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
/* body {
margin:2em; padding:0;
background: #fff;
background: #007878;
} */

#menu {
height: 25px;
margin: 3em 0; padding:0 1em;
border-bottom: 1px solid #000;
}

div.outer {
float: left;
width: 120px; height: 25px;
margin: 0 3px 0 0;
background: url('bars.gif') 0 -50px no-repeat;
}

div.outer a {
display: block;
margin: 0; padding:0;
width: 100%; height:100%;
overflow: hidden;
font: bold 13px/1 Georgia, serif;
color: #039;
text-decoration: none;
background: url('bars.gif') top left no-repeat;
}

div.outer span {
display: block;
margin: 0; padding: 7px 0 0 13px;
}

div.outer a:hover {
background-image: none;
color: #ff0;
}

div.outer a:active {
color: #000;
}
</style>
</head>

2.) Copy the following code between the <body> tags of your document:

Code:

<body>
<div id="menu">
<div class="outer"><a href="#"><span>First</span></a></div>
<div class="outer"><a href="#"><span>Second</span></a></div>
<div class="outer"><a href="#"><span>Third</span></a></div>
<div class="outer"><a href="#"><span>Fourth</span></a></div>
</div>
</body>

3.) Download the following image (please do NOT HOTLINK). Right-click on image and select "Save Image As":

Tabs

If you have found any services on my site to be beneficial and would like to donate, please feel free to donate ANY amount you want. Thank you very much.

« Links open in new window/tab »

« Links open in new window/tab »

Monitor Page for Changes

CSS - Fast Rollovers:Uses Only One Image for Rollover Effect!PayneLess Designs

Three Steps to Install Fast Rollovers

CSS - Fast Rollovers:
Uses Only One Image for Rollover Effect!
PayneLess Designs