...

View Full Version : css image rollover effects displayed inline



Levie
02-25-2011, 04:10 AM
I'm using css to create dynamic rollovers of a gif image
this is my html for that part


<div id="menu2">
<a id ="testi" href="testimonials.html"><span>Testimonials</span></a>
<a id ="testi" href="testimonials.html"><span>Testimonials</span></a>
</div>

and the css


#menu2 {
width:900px;
margin-left:10%;
}

#testi
{
display:block;
width:200px;
height:100px;
background-image:url(testimonials.gif);
background-repeat:no-repeat;

}
#testi:hover
{
background-position: 0 -100px;
}
#testi span
{
display: none;
}

This code makes the rollovers work fine and everything, but I can't get them to sit next to each other horizontally.

I've tried doing

#menu2 a{
display:inline;
}

but that just makes the images disappear.

any advice?

Excavator
02-25-2011, 04:30 AM
Hello Levie,
Would float: left; and display: block; work better for you?

If that doesn't help, link us to the test site so we can see all your code, CSS and images.

Arbitrator
02-25-2011, 04:39 AM
<div id="menu2">
<a id ="testi" href="testimonials.html"><span>Testimonials</span></a>
<a id ="testi" href="testimonials.html"><span>Testimonials</span></a>
</div>A given ID can only appear once in a document. You might want to use class attributes (i.e., class="testi") and selectors (i.e., .testi and .testi:hover).


I've tried doing

#menu2 a{
display:inline;
}

but that just makes the images disappear.

any advice?When you use display: inline, the height and width properties no longer have an effect. You might want to try display: inline-block so that height and width continue to have effect.

Levie
02-25-2011, 05:03 AM
You might want to try display: inline-block so that height and width continue to have effect.
This worked perfectly, thanks!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum