SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    How to align search box with image?

    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,
    Code:
    #menu_search {
    	width: 289px;
    	height: 40px;
    	padding: 0px;
    	border: 0px solid gray;
    	margin-left: 676px;
    	margin-top: -31px;
    	position: absolute;		
    
    }
    Thanks in advanced.

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I want to align and center the input search box along side the magnifying glass.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    #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.
    Code:
     <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.

  4. #4
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @dresden_phoenix

    Thank you very much.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •