Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
- CommentAuthorChuckles66
- CommentTimeSep 3rd 2007
I'm trying to use a backgound image when hovering over some transparent GIFs that are links to other sites.
What I did works fine in ie7, but, Firefox an d Opera drop the background image below the GIFs. Only the the top part shows below the GIF as there is another GIF right below.
I'm prety inexperienced in this and just stumbling around trying to make it work.
Any help would be appreciated. Thanx.
CSS:
.imagespacing {
margin: 4px 8px 4px 8px;
}
#rightcolumnvendors a:hover {
border: 0;
background-image: url(images/vendorhover.gif);
background-repeat: no-repeat;
background-position: center top;
}
HTML:
<div id="rightcolumnvendors">
<p><a href="./http://www.coolinui.com"><img src="images/Vendors/aero.gif" alt="Aero" width="80" height="80" border="0" class="imagespacing" /></a><a href="http://www.coolinui.com"><img src="images/Vendors/amerex.gif" alt="amerex" width="80" height="80" border="0" class="imagespacing" /></a></div> -
put this:
#rightcolumnvendors a {
display:block;
width:80px;
text-align:center;
}
#rightcolumnvendors a img {
position:relative;
border:0px;
}
i'm not try this. this is just what i'm thinking right now.
if you still have a problem with the image position, you can give a left or top property on "#rightcolumnvendors a img" -
- CommentAuthorChuckles66
- CommentTimeSep 6th 2007
Thanx. That worked for geting the background image to view.
Question: what can I add to make this 2 columns?
I'm trying to keep this layout short, so, I want the vendor logos to be in 2 columns.
Thanx for the help and sorry if this question is a "no-brainer".
1 to 3 of 3