Jump to content

Cre8asiteforums

Web Site Design, Usability, SEO & Marketing Discussion and Support

  • Announcements

    • cre8pc

      20 Years! Cre8asiteforums 1998 - 2018   01/18/2018

      Cre8asiteforums In Its 20th Year In case you didn't know, Internet Marketing Ninjas released many of the online forums they had acquired, such as WebmasterWorld, SEOChat, several DevShed properties and these forums back to their founders. You will notice a new user interface for Cre8asiteforums, the software was upgraded, and it was moved to a new server.  Founder, Kim Krause Berg, who was retained as forums Admin when the forums were sold, is the hotel manager here, with the help of long-time member, "iamlost" as backup. Kim is shouldering the expenses of keeping the place going, so if you have any inclination towards making a donation or putting up a banner, she is most appreciative of your financial support. 
kyao888

How Do I Position An Image Within A Div?

Recommended Posts

Dear all,

I'm running into a problem with the css. I have a series of divs and I need to place an little icon on the right of each div. If I put the icon in the background then when hover it will be overrded by the color #e8f9f9. I want the little icon to be on the right at all times.

 

here is the css:

 

#subnavProdList{

width: 184px;

}

#subnavProdList a{

font: normal 11px Arial;

display: block;

width: 100%;

color: #666666;

text-decoration: none;

border-bottom: 1px solid #cccccc;

text-indent: 5px;

padding-top: 5px;

padding-bottom: 5px;

}

#subnavProdList a:hover{

background-color: #e8f9f9;

color: #000000;

}

 

 

here is the div:

 

<td><div id="subnavProdList"><a href="fabrics.php?coll=Suncloth&fam=Summerhouse">Summerhouse<img src="../products/images/miniswatch/summerhouse.png" border="0" /></a></div></td>

</tr>

<tr>

<td><div id="subnavProdList"><a href="fabrics.php?coll=Suncloth&fam=Southern Cross">Southern Cross<img src="../products/images/miniswatch/summerhouse.png" border="0" /></a></div></td>post-17990-1209487522.gif

post-17990-1209487522.gif

Share this post


Link to post
Share on other sites
Guest Autocrat

Have you tried assigning hte image as a background in the hover state as well as a color?

Share this post


Link to post
Share on other sites

I did but it wont work because when you mouse over the background image shifts a pixel down everytime and I have to define like 10 different divs/a/a:hovers.....

Share this post


Link to post
Share on other sites

Not tested in all browsers.

Try adding:

 

#subnavProdList a img { float: right;  margin-top: -12.5px;}

 

where the negative margin is equal to the height of the image (eg: 10px) plus half the height of the bottom padding for <a> (5px/2=2.5px) so 10+2.5=12.5px.

Share this post


Link to post
Share on other sites

×