Web page search function

wildest_jjk · 22 Feb 2012 at 21:18

Hey guys,

So I am in the process of planning a website. I am thinking of having just a simple horizontal navigation bar like this:

http://www.cssnewbie.com/example/horizontal-menu/

However I also want to add a search bar which would be made in photoshop and would look something like this:

http://www.puu.sh/hXwy

For that I have just pasted a picture of the search bar in. The thing I would like to ask, is how would you go about placing a search bar that has been made into/onto the navigation bar. Would it be using something like absolute positioning? Or would you add it into the unordered list?

Thanks

wildest_jjk · 22 Feb 2012 at 23:05

Hi there,

Thanks for the response. So would you have a div that would be the main container? Then inside that have a ul and search bar which both have a class to change the float?

wildest_jjk · 23 Feb 2012 at 11:11

Thanks for your response. That's really very kind of you. One thing I was planning on doing for the design was also having two more buttons on the right hand side, so something like this:

http://puu.sh/hYkx

Again that is just pasted in. For the two links on the right would it be better to have them in a seperate ul? Also how do I go about designing the search bar? And is it possible to then go ahead and replace it with a photoshopped one?

This is my extremely poor attempt of trying to get the layout correct:

http://jsfiddle.net/nHbtf/4/

Thanks so much.

wildest_jjk · 23 Feb 2012 at 14:22

Tripnologist said:
You got it right.

As for designing it, you just do it in your fav graphics program, be it photoshop, gimp or paint. You then just add your styles to it with css like so.

http://jsfiddle.net/nHbtf/6/

(It's just a very rough style to look similar to the image you posted. With form elements, you'll need to set heights and whatnot to get them to line up correctly in all browsers. As it is, my example will only line up in Chrome)

You are very good! Thanks

So in fact I don't need to even design it in GIMP I could just use CSS like you have? Or if I design it in gimp would it eliminate browser compatibility issues?

Thanks.

wildest_jjk · 24 Feb 2012 at 00:18

Thanks again for the response. How do you go about using CSS with a search bar made in GIMP? Is it to do with specifying certain parts of the image as the particular input? I have never done this before!

Thanks

wildest_jjk · 24 Feb 2012 at 13:42

Thanks very much, I am trying to following one of the guides. However when I put the original nav into a proper file it does not display properly in the browser:

http://jsfiddle.net/nHbtf/4/

Am I doing something wrong? This is before I even try and use an image as the search bar!

Thanks

wildest_jjk · 24 Feb 2012 at 16:34

Thanks, I have been having a go. But I am stuck again now! I can post the code but unfortunately I don't think I can post the image?

http://jsfiddle.net/PeR6B/

I have uploaded the picture but don't know if that helps:

http://puu.sh/ibBB

Is it something to do with display and float problems?

Thanks

wildest_jjk · 24 Feb 2012 at 20:44

Anyone?

Thanks

wildest_jjk · 24 Feb 2012 at 22:12

Thanks for the response. I have to be honest I thought exactly the same. But I was following one of those guides on the page you linked me!

Thankyou for making those changes for me. So to implement the button would it be similar to linking to the image for the text box?

wildest_jjk · 25 Feb 2012 at 10:41

Brilliant I'll have another go later on.

Thanks again

wildest_jjk · 25 Feb 2012 at 23:19

Hey guys!

Ok so I have made some changes:

http://jsfiddle.net/PeR6B/2/

Can't see it completely how it should be, but this is what it should look like:

http://puu.sh/in9Z

Is that the right kind of thing? I am not particularly happy with it as I would like to make a more advanced search field however it ends up moving my menu everytime!

Also it is possible to have the button actually on the search field like the previous example? Because all it seems like you can do is have them seperate like I have now.

Thanks

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/

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

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

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