Results 1 to 4 of 4

Thread: Can't Align Search Bar

  1. #1
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can't Align Search Bar

    First off, please forgive my tremendous stupidity when it comes to coding. I am pretty bad at it. In fact, I don't even know for sure I'm posting this in the right category.

    Anyway, I'm trying to get my custom google search bar to fit on one line, but it's showing with the search button much higher and off to the left of the text box. Here's the code I've pasted from Google:


    Code:
    <div id='cse-search-form' style='width: 100%;'>Loading</div>
    <script src='//www.google.com/jsapi' type='text/javascript'></script>
    <script type='text/javascript'>
    google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
    google.setOnLoadCallback(function() {
      var customSearchOptions = {};
      var imageSearchOptions = {};
      imageSearchOptions['layout'] = 'google.search.ImageSearch.LAYOUT_COLUMN';
      customSearchOptions['enableImageSearch'] = true;
      var customSearchControl =   new google.search.CustomSearchControl('partner-pub-8870927593772580:6899994551', customSearchOptions);
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
      var options = new google.search.DrawOptions();
      options.enableSearchboxOnly('www.slocyclist.com/search-results', 'q');
      customSearchControl.draw('cse-search-form', options);
    }, true);
    </script>
    <style type='text/css'>
      input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
        border-color: #3C4154;
      }
      input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
        vertical-align: bottom;
        border-color: #3C4154;
        background-color: #3C4154;
        background-image: none;
        filter: none;
      }
    </style>


    Can anyone help me out with this? I would be eternally grateful! My blog is at:

    www.slocyclist.com

    Incidentally, if you're feeling really helpful, you could tell me how to fit my stupid ads in the sidebar . . . LOL
    Last edited by jscheuer1; 08-16-2013 at 09:31 AM. Reason: Format

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    It looks like the input is inheriting some unneeded margin from somewhere. Just set it to 0:

    Code:
    input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
        margin: 0;
        /* other styles ... */
    }
    As for the ads, it looks like you need to select a different size (from Google)... or you could really just make the whole sidebar a tad bigger.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,074
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    That will get them in line with each other vertically. but there will still be a gap between them horizontally, and it will shift the layout of the page slightly.

    You could skip that and instead add this to the stylesheet:

    Code:
    input.gsc-search-button {
    	position: relative;
    	top: 9px;
    	left: -25px;
    }
    That will get them lined up and right next to each other without shifting the layout of the page. If you want a horizontal gap between them, use -20px instead of -25px for the left coordinate, or whatever number makes them look the way you want them to.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post

    You could skip that and instead add this to the stylesheet:

    Code:
    input.gsc-search-button {
    	position: relative;
    	top: 9px;
    	left: -25px;
    }
    That will get them lined up and right next to each other without shifting the layout of the page. If you want a horizontal gap between them, use -20px instead of -25px for the left coordinate, or whatever number makes them look the way you want them to.

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    Thanks both of you so much! It worked! I really appreciate the help.

Similar Threads

  1. Replies: 0
    Last Post: 12-28-2009, 08:14 AM
  2. Resolved Vertical Middle align with search box
    By Ryan Fitton in forum CSS
    Replies: 0
    Last Post: 03-10-2009, 09:45 PM
  3. Replies: 0
    Last Post: 04-06-2008, 07:57 PM
  4. Search next/Search previouse
    By shumbora in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-18-2007, 12:53 AM
  5. DIV tag won't align to top in FF
    By gblasko in forum CSS
    Replies: 1
    Last Post: 05-02-2006, 05:27 PM

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
  •