SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css links AND image in one a href

    Hi, question from a css-dummie:

    I've seen this on many sites: you have a textlink with an image behind it (eg. an arrow). When you hover the arrow, the hover effect you specified in the css-style appears on the text aswell.

    I have set up an example: http://www.twiztedimagebuilding.be/n...ex.php?lang=nl (page not finished and in Dutch), look at the left bottom corner to the link 'ontdek Twizted Newz'. When you hover the arrow, the dotted line under the textlink appears just fine, but it also underlines the arrow-image.

    This is the css-class:

    Code:
     
    a.orange:hover {
    	color: #F2AA30;
    	text-decoration: none;
    	border-bottom: 1px dotted #F2AA30
    }
    This is the code in the php page:

    Code:
     
    <a href="<?php trans_link("index.php?id=newzinfo");?>" class="orange"><?php print($lan[4]);?> <img src="../gui/arrow_right.gif" width="12" height="9" border="0"></a>
    Any ideas on how to remove the line under the arrow?
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    One way to do it would be to float the image to the right. It would have to come first in the source though.

    Code:
    											<a href="index.php?id=newzinfo&amp;lang=nl" class="orange"><img src="http://www.twiztedimagebuilding.be/gui/arrow_right.gif" width="12" height="9" border="0">ontdek 
    											Twizted Newz </a></div></td>
    and then add this css:
    Code:
    a.orange img {float:right;margin:2px 10px 0  0}
    Change positioning to suit.

    Paul

  3. #3
    reputation consultant ThaVincy's Avatar
    Join Date
    Mar 2003
    Location
    Flanders
    Posts
    523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot man, exactly what I was looking for! Works just fine now.
    ThaVincy | redesigning your image
    Twizted Imagebuilding personal and corporate reputation solutions


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
  •