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

[mpnzep]

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.

 

[darryncooke]

.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

http://www.darryncooke.com

| Marketing and Creative Services

 

[mpnzep]

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.

 

[spamjim]

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.

 

[vacunita]

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:

[b][COLOR=#0000FF]<table[/color][/b] [COLOR=#009900]border[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"2"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<tr>[/color][/b]
[b][COLOR=#0000FF]<td>[/color][/b]Search[b][COLOR=#0000FF]</td>[/color][/b]
[b][COLOR=#0000FF]<td><input[/color][/b] [COLOR=#009900]type[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"text"[/color] [COLOR=#009900]style[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"width:60px;"[/color][b][COLOR=#0000FF]><img[/color][/b] [COLOR=#009900]src[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"lupa.png"[/color] [COLOR=#009900]alt[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"search"[/color] [COLOR=#009900]style[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"width:16px; height:16px;"[/color][b][COLOR=#0000FF]/></td>[/color][/b]
[b][COLOR=#0000FF]</tr>[/color][/b]
[b][COLOR=#0000FF]</table>[/color][/b]

----------------------------------
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

 

[darryncooke]

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

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services