php search bar question
- Started
- Last post
- 7 Responses
- sem
Hi guys,
I know this is a stupid problem to be stuck on, but I'm trying to get my submit button on the same level as the search bar, but at the moment my search is UNDER the submit?
Any clues?
This is in my styles.css
input.searchinput {
width: 150px;
height: 30px;
padding-left: 10px;
border: 0px;
color: #999999;
background-color: #f8f8f8;
margin: 0;
font-size: 9px;
text-transform: uppercase;
}
input.searchsubmit {
width: 40px;
height: 30px;
background-image:url(images/srch...
font-size: 9px;
color: #fff;
}And this my searchform
<form method="get" action="<?php bloginfo('url'); ?>/"><input type="submit" value="" class="searchsubmit"/><input type="text" class="searchinput" value="Search Vanvelson..." onfocus="if (this.value == 'Search Vanvelson...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search Vanvelson...';}" name="s" />
</form>Also, does anyone have any nice codes for a nice looking Search Bar?
:)
Thanks in advance for your genius time.
- uan0
sounds like there is not enough space there to put them on the same line. make sure the container is wide enough.
- mikotondria30
display: inline-block ?
Don't form elements act all pissy and blocky ?
If all fails, put them in a position: relative div, and make them position: absolute and place them 'manually'. Bit of a hack, but sometimes you just have one of those days. Come back tomorrow, it'll work no problem :)- Ha, I like your attitude, i'll try that if all else fails. Thankssem
- sem0
I tried the float left thing in the style.ss and it didn't make a difference :(
Also Uan, there is enough space as both boxes are tiny for now just so I can figure it out, tis a weird one eh? ha.
- sem0
Am using UberMenu 2.1 also if that matters, its as a widget in the top menu.
Would like the search they use on the demo but they didn't provide the files.
- dbloc0
#searchBarHolder {
width:200px;
height: 30px;
overflow:hidden;
}input.searchinput {
float: left;
width: 150px;
height: 30px;
padding-left: 10px;
border: 0px;
color: #999999;
background-color: #f8f8f8;
margin: 0;
font-size: 9px;
text-transform: uppercase;
}
input.searchsubmit {
float: right;
width: 40px;
height: 30px;
background-image:url(images/srch...
font-size: 9px;
color: #fff;
}
- sem0
Thanks, the above plus a minor change worked
#searchBarHolder {
width:200px;
height: 30px;
overflow:hidden;
}
input.searchinput {
position: absolute;
float: left;
width: 150px;
height: 30px;
padding-left: 10px;
border: 0px;
color: #999999;
background-color: #f8f8f8;
margin: 0;
font-size: 9px;
text-transform: uppercase;
}
input.searchsubmit {
float: left;
width: 40px;
height: 30px;
background-image:url(images/srch...
font-size: 9px;
color: #fff;
}