Hi guys
This is just an update for the search box that I have posted yesterday here.
http://thefml [dot] org [dot] uk/secret/index.php/main/menu_selector/home
How to allign vertically the search box with the magnifying glass icon?
By the way it is inside a <div>
and the css responsible for that ID is,
#menu_search {
width: 289px;
height: 40px;
padding: 0px;
border: 0px solid gray;
margin-left: 676px;
margin-top: -31px;
position: absolute;
}
Thanks in advanced.
I want to align and center the input search box along side the magnifying glass.
#menu_search input, #menu_search img {vertical-align: middle}
Will align all your items ( the loop, the search field and the submit arrow} to each other.
You should put all of those in a block element such as a DIV or or P … just to make the form code valid.
<form action="http://thefml.org.uk/secret/index.php/email/send" method="post" accept-charset="utf-8" id="menu_search">
<p>
<img name="magnify" src="http://thefml.org.uk/secret/imgs/mag.png" width="40" height="40" alt="lock_smiths_magnify">
<input type="text" name="sbox" onfocus="if(this.value == 'search the site') { this.value = ''; }" value="search the site" onblur="if(this.value==''){this.value = 'search the site';}" size="16"/>
<input type="image" src="http://thefml.org.uk/secret/imgs/gthan.jpg" alt="Search">
</p>
</form>
note also that I moved the ID to the form, that way you can eliminate the the DIV that is wrapped around the form … as it is redundant.
Hope that helps.
ralphm
September 13, 2012, 4:53am
5
Just as an aside, the magnify image looks a bit grainy around the outside (with the 1px white outline. You can fix that in Photoshop by adding a “matte” color to the image. Choose the same color as the blue background.