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

Chanc3 · 22 Feb 2012 at 22:29

You could give it to a class and have the ul float left, and the search bar float right.

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?

Tripnologist · 23 Feb 2012 at 00:27

wildest_jjk said:
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?

That's pretty much it. I had 5 minutes to kill before going to bed so whipped up just the basic style for you.

http://jsfiddle.net/nHbtf/

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.

Tripnologist · 23 Feb 2012 at 14:12

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)

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.

Tripnologist · 23 Feb 2012 at 19:46

If you do it in Gimp, you'd still have to put it in with CSS. You'd just have a specific design to go by.

Generally speaking, you should create the entire design in photoshop/gimp first and then create the html/css template.

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

Tripnologist · 24 Feb 2012 at 09:31

Ahh, you have a bit to learn then. You'll just do it using normal HTML and CSS. Here are some tutorials which will help you out.

http://www.smashingbuzz.com/2012/01/30-hands-on-tutorials-for-psd-to-html-conversion/

All the tutorials will be using Photoshop, but the same principles will apply for Gimp.

Also, if you go into the dev tools of your fav browser, you can poke around web pages and see the html and corresponding css that was used to style the page.

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

Tripnologist · 24 Feb 2012 at 14:41

jsfiddle actually uses a CSS reset.
Personally, I base all my templates off of the html5boilerplate. You should check it out.

If you'd rather not use a reset though (you really should though), you'll just have to remove some default styling. Adding the below should sort out a fair bit to start with.

Code:

.navBar ul { list-style: none; margin: 0; padding: 0;}
.navBar li { padding: 0; margin: 0;}

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

Tripnologist · 24 Feb 2012 at 21:30

Why would you not want to show the submit button? How will the user submit the form?

Tripnologist · 24 Feb 2012 at 21:34

I have commented out some unnecessary css for you though.
http://jsfiddle.net/PeR6B/1/

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?

Tripnologist · 25 Feb 2012 at 02:43

Quite similar. You would style it the same way. That's actually the reason I used <input type="button", rather than input type="submit". Button is easier to style.

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