Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

Solved

Suggestions - Search Box look

Posted on 2011-09-13

2 solutions

Medium Priority

211 Views

Last Modified: 2012-05-12

Hi,

Please take a look here - http://tinyurl.com/cityads

Suggest me some html/css stuff to make the search box on the right look

1)ATTRACTIVE

2)NEAT

3)PROPERLY ALIGNED

4) PLACEMENT

I am looking forward for help with implementing some css code - so please provide me some css code/examples that will do the trick.

Many Thanks.

Comment

Question by:ee-itpro

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

5 Comments

LVL 8

Accepted Solution

by:MelMc

MelMc earned 1000 total points

ID: 365297872011-09-13

This is pretty straight forward search box. I would consider putting some padding, maybe about 2px on the search input itself so that the text does not sit directly on the border.
You may want to consider moving the GO button next to the search box.
Also, make sure that your drop downs and search box height are all the same for consistency.

LVL 5

Assisted Solution

by:DerZauberer

DerZauberer earned 1000 total points

ID: 365298722011-09-13

The form could have style "text-align: right;", i think this makes alignment more easy.
Your label-divs could then have "text-align: left;" each.

Author Comment

by:ee-itpro

ID: 365299392011-09-13

Please provide some demo code or some example resources for search box code.

I'm not a designer/css developer so i can't do this on my own.

LVL 30

Expert Comment

by:LZ1

ID: 365301652011-09-13

http://www.designvsart.com/blog/2007/11/01/search-box-design-examples/

http://www.noupe.com/showcases/showcase-of-inspiring-search-box-designs.html - 3rd one down may serve you best

http://www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/

All in all we can't design one for you, however the examples given here by all the experts are pretty good. Use a little bit of padding on the input give it a nice looking button and your good to go.

Author Comment

by:ee-itpro

ID: 365317442011-09-13

Thanks, i'll try out these tricks and let you people know how it goes

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

5 Most Important Things You Need to Know About DevOps

Article by: Anush

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…

Have Questions about DevOps? Get them answered at The Agility Tour 2017.

Article by: xMatters

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…

Adding a Business to Google Maps

Video by: doug

This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

Flexible Layouts

Video by: Mark

Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).