Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

How Do I Position An Image Within A Div?


  • Please log in to reply
3 replies to this topic

#1 kyao888

kyao888

    New To Community

  • Members
  • 2 posts

Posted 29 April 2008 - 11:45 AM

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>css.gif

#2 Guest_Autocrat_*

Guest_Autocrat_*
  • Guests

Posted 29 April 2008 - 02:37 PM

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

#3 kyao888

kyao888

    New To Community

  • Members
  • 2 posts

Posted 29 April 2008 - 03:08 PM

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.....

#4 iamlost

iamlost

    The Wind Master

  • Site Administrators
  • 4567 posts

Posted 29 April 2008 - 04:21 PM

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.



RSS Feed

1 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users


    Bing (1)