CODEWITHSUNDEEP
htmlcssimagehyperlink
Angeline
Angeline

Reputation: 2379

How do I place an image after a link?

I need to have a link in my webpage followed by a question mark image, so that a mouse over on the question mark image, shows a tool tip. This is the code I have:

 <p>
  <a class="mainLinks" href="#">Currency Converter</a><a href="#" class="questionIcon">&nbsp;</a>
 </p>

and the corresponding css is:

 .costSummaryBox .questionIcon{
       background:url(../images/static/question2.png) no-repeat;
       text-decoration:none;
}

But in my webpage, I get the image below the link. How do I make them appear in the same line?

Upvotes: 1

Views: 2530

Answers (3)

Hussein
Hussein

Reputation: 42818

You can do this 

<p>
    <a class="mainLinks" href="#">Currency Converter</a>
</p>

.mainLinks{
    padding-right:30px;
    background:#fff url(...) no-repeat right top;
    text-decoration:none;
}

Check working example at http://jsfiddle.net/eMLkS/

Upvotes: 0

Shivkant
Shivkant

Reputation: 4619

Try the following code:

<p>
   <a class="mainLinks" href="#">Currency Converter&nbsp;<img src="../images/static/question2.png" /></a>
</p>

Upvotes: 2

Jay
Jay

Reputation: 1404

You need to use AFTER. This link might help:
http://www.w3schools.com/css/sel_after.asp

Upvotes: 0

Related Questions