Simplifying link-image prior to link

HTML & CSS
1

With the image css and link css separated out, is there a way to combine these more efficiently - for one reason, so the arrow gif does not have to be manually placed in each case among the navigation sets?


/*arrow image*/
.arrowR {vertical-align: middle; margin-right: 6px;}

.nav {vertical-align: middle; color:#CCCCCC; text-decoration: none; padding-left: 0px; padding-right: 12px; font-size: 12px; font-weight: heavy; font-family: Arial, Helvetica, sans-serif;}
.nav:link {vertical-align: middle; color: #000000;  text-decoration: none;  font-size: 12px; font-weight: 500; font-family: Arial, Helvetica, sans-serif;}
.nav:visited {vertical-align: middle; color:#333333;  text-decoration: none;  font-size: 12px; font-weight: 500; font-family: Arial, Helvetica, sans-serif;}
.nav:hover {vertical-align: middle; color:#666666;text-decoration: none;  font-size: 12px; font-weight: 500; font-family: Arial, Helvetica, sans-serif;}
.nav:active {vertical-align: middle; color:#999999;text-decoration: none;  font-size: 12px; font-weight: 500; font-family: Arial, Helvetica, sans-serif;}

Placing on page as:

<td height="53" colspan="2" align="center" valign="middle"><img  src="http://www.sitepoint.com/forums/images/arrow.gif" width="5" height="10" border="0"  class="arrowR"><a href="page.php"  class="nav">Link</a></td>
2

It’s not quite clear what you are asking here. Do you want the image to be a part of the link? If so, so something like

<a href="page.php"  class="nav"><img src="http://www.sitepoint.com/forums/images/arrow.gif" width="5" height="10" border="0"  class="arrowR">Link</a>
3

ralph.m,

Trying to integrate the image css with the link css, so the arrow image will not have to be placed manually each time.

This is for a navigation bar that is horizontal, sorry, should have said. Not a horizontal list style.

Thanks

4

If you want the image to be handled with CSS alone, you’d need to place it on the menu item as a background image.

So, give the menu item some left padding, and add in the image like so:

background: url(path/to/image/image.gif) no-repeat 0% 50%;

If it’s for navigation, you should be using a list rather than table cells. Using a list is best practice for navigation. Tables for this purpose quite out of date.

5

works nice, thanks ralph.m