Web page search function

Tripnologist · 26 Feb 2012 at 00:45

Float the two and then use negative margin to position the button over the text input. Then apply right padding to the text input equal to the width of your button so that any text entered in won't disappear under the button.

wildest_jjk · 26 Feb 2012 at 10:50

Ah right that makes sense! Also if I create a button in GIMP. It doesn't line up. So how do I go about design one to fit the search field?

Thanks

wildest_jjk · 26 Feb 2012 at 11:01

This is my poor attempt:

http://puu.sh/irHb

And here is the code:

http://jsfiddle.net/PeR6B/3/

HungryHippos · 26 Feb 2012 at 11:43

How's this?

http://jsfiddle.net/PeR6B/5/

Elements floated next to eachother don't need to have padding/margins set on them, they will sit next to eachother anyways.

Edit - read the above from Tripnologist, who is a much better web coder than I am, but I still see the same behaviour between your code and mine, the text does not go under the button in either case.

Tripnologist · 26 Feb 2012 at 12:17

Eulogy said:
I still see the same behaviour between your code and mine, the text does not go under the button in either case.

If he only wanted the two inputs beside each other, I would have done the exact same as you.

I had assumed he wanted to know how to position the button to actually be overtop of the text input in order to achieve this image he posted earlier where the magnifying glass would be the button.
http://puu.sh/ibBB

Though to be fair, that image is not very user friendly as it's not intuitive at all, unless it's a live search.

HungryHippos · 26 Feb 2012 at 12:19

I getcha, yeah for that the other way would be the way to do it for sure. I only read his last post and saw the pic on that.

wildest_jjk · 26 Feb 2012 at 12:41

Thanks for the response. Looking at the research I have been doing, a lot of the sites tend to have the search button next to the text input. As oppose to overlapping.

All I want really is to make a simple text box and a simple button and have them aligned and positioned nicely. I have created both but am having trouble with aligning them.

I have this so far:

http://puu.sh/is7C

http://jsfiddle.net/PeR6B/6/

But I am going to create a much better button. Am I doing the right thing by creating two seperate images, one of the text input and one of the button? Is this the right way of doing things?

Thanks

HungryHippos · 26 Feb 2012 at 14:09

Well I don't see any image at all for the button, so you should really style it with a background color in case the image can't be loaded like I did.Worry about replacing with an image later.

In fact if you just want a button like your picture why even bother with an image at all? I styled one that looks just the same without any image at all. You can style a basic button with just CSS using background color and text color properties.

If you have two elements that are floated next to eachother and you've said they are both 20px high, if one has border-none; and the other has border:1 px solid <color here>; then they are going to be different heights, because one has a border making it taller than the other by 2px (1px for top border, 1px for bottom).

In which case you would need to say one element is 2px shorter than the other for them to remain aligned. Just like I did on my example.

wildest_jjk · 26 Feb 2012 at 14:56

Eulogy said:
How's this?

http://jsfiddle.net/PeR6B/5/

Elements floated next to eachother don't need to have padding/margins set on them, they will sit next to eachother anyways.

Edit - read the above from Tripnologist, who is a much better web coder than I am, but I still see the same behaviour between your code and mine, the text does not go under the button in either case.

Eulogy said:
Well I don't see any image at all for the button, so you should really style it with a background color in case the image can't be loaded like I did.Worry about replacing with an image later.

In fact if you just want a button like your picture why even bother with an image at all? I styled one that looks just the same without any image at all. You can style a basic button with just CSS using background color and text color properties.

If you have two elements that are floated next to eachother and you've said they are both 20px high, if one has border-none; and the other has border:1 px solid <color here>; then they are going to be different heights, because one has a border making it taller than the other by 2px (1px for top border, 1px for bottom).

In which case you would need to say one element is 2px shorter than the other for them to remain aligned. Just like I did on my example.

Ok so I am going to forget using images for it and just create it using CSS. However the above example does not seem to work at all in IE? Also you say you have adjusted the height of it because of the border but it doesn't seem to line up for me in firefox?

EDIT: Do I need some kind of declaration or something?

Thanks

wildest_jjk · 26 Feb 2012 at 15:26

Sorted it I think, it did require a doctype declaration. One other thing, how come with the button, if you have a border around it and still specify it to be the same height as the text box. Why will it still be the same height? Surely you need to make the height less to include the borders?

Thanks

HungryHippos · 26 Feb 2012 at 17:29

works OK for me in IE8/FireFox. Got the latest jsFiddle for me to toy with?

wildest_jjk · 26 Feb 2012 at 19:35

Thanks for the response. Not to worry I have sorted it now! All I had to do was set a line-height equivalent to the height of the box. This was after making changes.

Thanks