...

View Full Version : HELP!!! - Background Image Rollover Nav



Jakeumms
05-10-2008, 08:20 PM
Okay so I want to put navigation on my site that has image rollovers, except I want HTML text to be on top of them. So it would basically be like a "background image" rollover.

Here's an example:

The one to the left is the hover image and the one to the right is the still one.
http://img229.imageshack.us/img229/9100/example1dt7.jpg

Then I want actual text (not part of the image) to be over these navi tabs.
http://img354.imageshack.us/img354/8369/example2br7.jpg

And I also want to be able to horizontically repeat these navi tabs over and over again.
http://img229.imageshack.us/img229/4126/example3tg4.jpg

--
IMPORTANT: The rollover and normal images are actually going to be combined into a 2 state image using this code that I found.


#menu a {
background: url("tab.jpg") 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}
--

If someone could point me in the direction of a tutorial or just a simple guideline on how to do it that would be great.

THANKS TO ANYONE WHO HELPS!

abduraooft
05-11-2008, 02:14 PM
http://www.alistapart.com/articles/slidingdoors/ may help!

Jakeumms
05-11-2008, 04:02 PM
Well I don't care about the sliding door. The width is going to be the same for each tab.

All I want is a simple set of tabs with a hover effect that uses a two state image that has HTML text over it.

jhaycutexp
05-14-2008, 11:44 AM
i think you should use a list with that..

try this... just fix the width you like.. you probably know this...



<style>
li{
float:left;
display:block;
text-align:center;
background:url(images);
}
a{padding:0;
text-decoration:none;

display:block;
margin:0;
}

a:hover{
text-decoration:none;
color:#FFFFFF;
display:block;
background:url(images);

}

ul{list-style:none;
padding:0;
margin:0;


</style>
<ul>
<li><a>Home</a></li>
<li><a>Real Estate</a></li>
<li><a>Real Estate</a></li>
<li><a>Real Estate</a></li>
<li><a>Real Estate</a></li>
</ul>




and if you don't get this try to google css menu... there are thousands of this tutorial.. but i bet this will do..:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum