SitePoint Sponsor

User Tag List

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

    Image icon align vertically?

    hello,

    I have a magnifying glass icon on this page,
    http://myonlinesmallgroup.com/warren/

    below [SIGNIN] it is inside a search input box.

    I tried to center it vertically,
    Code:
    icon-search {
    	vertical-align: middle; 
    }
    but no luck.
    any help please.
    thanks in advance.
    Quality codes are optimized and tested...
    Click here for inspiration..

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,611
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Hi, Warren,

    I'd like to suggest two changes:

    First, in HTML, move the input field below the .searchIcon anchor.
    Code:
    <div class="searchContainer clearfix">
        <a href="#" class="searchIcon">
            <span aria-hidden="true" class="icon-search"></span>
        </a>
        <input type="text" class="searchInput">
    </div>
    Then, in CSS:
    Code:
    #box4 {
        border: medium none;
        clear: none;
        float: none;
        height: auto;
        left: 0;
        margin-left: auto;
        margin-right: auto;
        margin-top: 25px;
        min-height: 50px;
        position: relative;
        top: 0;
        width: 240px;   /* delete me */
    }
    And comment out or delete all of these styles (start from scratch):
    Code:
    div.searchContainer a.searchIcon {
        color: #303030;
        display: inline-block;
        height: 28px;
        left: 5px;
        margin-left: 0;
        margin-right: -100%;
        padding-left: 10px;
        position: absolute;
        top: 1px;
        width: 50px;
    }
    This will position the magnifying glass outside and to the left of the search field. The clickable area of the box can be enlarged, but I would first like to find out if this is going in the right direction. Oh, and with these changes, the magnifying glass icon should be middle aligned.

    Cheers

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

    So far this is the modified version.
    http://myonlinesmallgroup.com/warren/

    Just don't mind the <div> border it's temporary, the purpose is I can see it properly while aligning the icon magnifying glass.
    Quality codes are optimized and tested...
    Click here for inspiration..

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Looks to me like you are going about this in the wrong way completely.

    Firstly, a search form has two essential parts: an input field (which you have) and the input for submitting the form, which you don't have. Don't replace this with an <a>. That's no use at all.

    So, firstly set your HTML right with a proper search form. E.g.

    Code:
    <form method="get" action="" role="search">
      <label for="q">Search this Site</label> 
      <input class="text" type="text" name="q" id="q" value="Search">
      <input type="image" class="submit" src="mag-icon.png" alt="Go">
    </form>
    Using an input type of image, you can nicely add in the magnifying image that way. You can hide the label if you like, but it's good to have it there for screen readers anyway.

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

    Thanks again dude, the HTML/CSS codes are not from me.
    He suggested me that search box.
    So i copied it from my co-designer.
    I'm just tweaking the icon to position it properly.

    Anyway I'll follow your suggestion.
    Quality codes are optimized and tested...
    Click here for inspiration..

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by solidcodes View Post
    i copied it from my co-designer.
    I'm just tweaking the icon to position it properly.

    Anyway I'll follow your suggestion.
    Yep, no problem. It's best to get the HTML right first, then style it all. Getting that link positioned wouldn't have helped much anyhow, as you'd have to replace it. It's looking good now. Are you happy with the placement of the mag glass? Most people would expect it to be on the right.

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

    Yes that was the original design suggested by my co-designer.
    yup mag must be on the left.

    I agree with you it should be on the right, but I'm only following orders above.
    Anyway this thread is solved.
    Quality codes are optimized and tested...
    Click here for inspiration..

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    No problems. Glad it helped. It'll be fine on the left.


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
  •