×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Adding an image (magnifying glass) to a search field at its right side

Adding an image (magnifying glass) to a search field at its right side

Adding an image (magnifying glass) to a search field at its right side

(OP)
Hi.

I´m trying to add a magnifying glass at the right of a input text field, used for search purposes.

The problem is:

I´m not succeeding trying to put the image at the right side of the input text.

Any idea why?

Thanks.

RE: Adding an image (magnifying glass) to a search field at its right side

CODE

.mag {
	background-image: url(image.jpg);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 30px;
}



<input class="mag" name="" type="text" />


</html> 

Adjust the padding dependent on how wide the image is and add some more for spacing. Of course you can play with padding, border, etc. but this should get you started.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

RE: Adding an image (magnifying glass) to a search field at its right side

(OP)
Sorry. I didn´t mean inside the input text but at its right.

For some reason, the image of the magnifying glass is going down one line in the cell (table cell).
I think it´s because the input text is too large or something like that. And that makes the image goes down one line.

I thought that maybe a solution would be to stylize the width of the input text with css, making space for the image at its right.
But it doesn´t work either.

Here´s a piece of the code:

<code>

<td height="53" valign="middle">Buscar &nbsp;<input name="search" type="text" style="width:60px;" maxlength="37" /><img src="../final/lupa.png" /></td>

</code>

Thanks.

RE: Adding an image (magnifying glass) to a search field at its right side

You've defined the width of the input box but not the width of the cell holding it (unless you have defined all tds with the same specific width elsewhere in your CSS). So it would be no surprise that the image might wrap to a new line.

This might be a good opportunity to switch from table based layout to CSS layout.

RE: Adding an image (magnifying glass) to a search field at its right side

Make sure you aren't setting a width either for the cell or cells around it an for the table that doesn't leave enough room for the image horizontally so it drops a line.


That is for instance if you have a 600px cell, and you;ve defined 2 other cells as being 280px wide then there's only 40px left to accommodate the final cell.

At its simplest with very little styling this should work:

CODE

<table border="2">
<tr>
<td>Search</td>
<td><input type="text" style="width:60px;"><img src="lupa.png" alt="search" style="width:16px; height:16px;"/></td>
</tr>
</table> 

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Adding an image (magnifying glass) to a search field at its right side

then wrap the input in a span and set the bg image of the span with the styles i specified. same thing.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close