Forums

goalieman34

Hey everyone,
I am looking to add a button to the end of my search box that is located above my header image. I have tried a few different methods and so far can't get the image to show up.
Here is my website

Thanks for all the help so far as I really appreciate it!

farzadina

You can use something like this:
Add the following html code, right after your input field.

HTML:

<input class="input" type="image" src="http://cdn3.iconfinder.com/data/icons/woothemesiconset/32/search_button_green.png&quot; value="submit">

CSS:

.section .input {
    border: medium none !important;
    padding: 0 !important;
    position: relative;
    right: -27px;
    top: -21px;
}

goalieman34

thanks @farzadina can you take a look real quick. I just need to line the search box with the rest of the line and cant get it to move up.

http://petrowest.squarespace.com/

farzadina

You can first line them up by changing the top: 0px; to top: 6px; in the .section .input. Then add this rule to your stylesheet to bring them up:

.section{
margin-top:-11px;
}

Senff

First, trim the empty areas from the button -- the button itself is 57x24 but the searchbutton.png image as a whole is 74x39. Too much on the outsides.

Second, now that you have an image as a submit button, you can remove the regular input button code, so remove <input type="submit" value="" class="button queryButton">.

That should get you on your way.

(That is, if you really must use a table for this.)

goalieman34

@Senff @farzadina that worked great! thanks. I will also trim the area on the button to fix it up.
Just one last little thing to fix up. When you view the site on an iphone it shows this small bubble in between the text field and button. Any idea how to get rid of that.

Senff

See my second point.

goalieman34

sorry about that... its good now thanks.

treehouse : what would you like to learn today?

Forums

Modify search button