SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simplifying link-image prior to link

    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?

    Code:
    /*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:
    Code:
    <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>
    Last edited by datadriven; May 21, 2011 at 19:10. Reason: most titles seem uncapitalized

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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

    Code:
    <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. #3
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    background: url(path/to/image/image.gif) no-repeat 0% 50%;
    Quote Originally Posted by datadriven View Post
    This is for a navigation bar that is horizontal, sorry, should have said. Not a horizontal list style.
    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. #5
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works nice, thanks ralph.m


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •