13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

Need help with CSS of search bar

by kevd10
11 replies
  • WEB DESIGN
    • |
I currently have a search bar (badsearchbox.jpg). I need it to look like this (goodsearchbox.jpg). The CSS for each individual element are as follows:

'enter town' field:

#directory-search.regular-search #dir-search-form {
padding: 34px 0;
margin: auto;
}

'search' button:

#directory-search.regular-search .dir-searchsubmit {
width: 150px;
height: 30px;
font-size: 16px;
margin-right: 0;
}


Its really frustrating me!

Any help for a newbie appreciated.
#bar #css #search
  • Profile picture of the author Brandon Tanner
    Most likely, the container div is not wide enough for the submit button to fit on the same line as the search box, so it's forcing it down to the next line. I'd need to see the source code for the whole page to know for sure though.

    What's the URL?
    Signature

    {{ DiscussionBoard.errors[8897054].message }}
    • Profile picture of the author kevd10
      Originally Posted by Brandon Tanner View Post

      Most likely, the container div is not wide enough for the submit button to fit on the same line as the search box, so it's forcing it down to the next line. I'd need to see the source code for the whole page to know for sure though.

      What's the URL?
      Its a wordpress site. Duno if that matters.

      directory.kevindavisondesign.com
      Signature

      Please do not use affiliate links in signatures

      {{ DiscussionBoard.errors[8897077].message }}
      • Profile picture of the author Brandon Tanner
        Your "dir-search-button" div is outside of the <form> tag, but it should be inside of it.

        Put that div right before the closing </form> tag, and you should be good to go.
        Signature

        {{ DiscussionBoard.errors[8897107].message }}
        • Profile picture of the author kevd10
          Originally Posted by Brandon Tanner View Post

          Your "dir-search-button" div is outside of the <form> tag, but it should be inside of it.

          Put that div right before the closing </form> tag, and you should be good to go.
          But I cant find the html code for this. I am using wordpress, so I have no idea which template file this comes from. I have checked header.php where it should pull it from, but its not there.
          Signature

          Please do not use affiliate links in signatures

          {{ DiscussionBoard.errors[8897163].message }}
        • Profile picture of the author kevd10
          Originally Posted by Brandon Tanner View Post

          Your "dir-search-button" div is outside of the <form> tag, but it should be inside of it.

          Put that div right before the closing </form> tag, and you should be good to go.
          Ok just found it. But it is inserted before the </form> tag:

          <div id="dir-search-button">
          <input type="submit" value="{__ 'Search'}" class="dir-searchsubmit">
          </div>
          </div>
          <input type="hidden" name="dir-search" value="yes" />
          </div>
          <div class="advanced-search">

          </div>
          </form>
          Signature

          Please do not use affiliate links in signatures

          {{ DiscussionBoard.errors[8897203].message }}
          • Profile picture of the author pnehal
            Originally Posted by kevd10 View Post

            Ok just found it. But it is inserted before the </form> tag:

            <div id="dir-search-button">
            <input type="submit" value="{__ 'Search'}" class="dir-searchsubmit">
            </div>
            </div>
            <input type="hidden" name="dir-search" value="yes" />
            </div>
            <div class="advanced-search">

            </div>
            </form>
            did you got it working? let me know
            {{ DiscussionBoard.errors[8897300].message }}
            • Profile picture of the author kevd10
              Originally Posted by pnehal View Post

              did you got it working? let me know
              No, this did not solve the issue.
              Signature

              Please do not use affiliate links in signatures

              {{ DiscussionBoard.errors[8897309].message }}
          • Profile picture of the author Brandon Tanner
            Originally Posted by kevd10 View Post

            Ok just found it. But it is inserted before the </form> tag:
            When I checked it last night in Firebug, it was definitely outside of the <form> tag, because I remember copying & pasting that div to inside the form, and that fixed it.

            If your source code shows otherwise, that means that a script is moving that div around as the page is being loaded, for whatever reason. You've got a ton of scripts on that page, so if you don't know which script is doing that, then you're basically looking for a needle in a haystack.
            Signature

            {{ DiscussionBoard.errors[8898484].message }}
  • Profile picture of the author ChantalVanderlaan
    If I had the link to your site, I could probably give you the code that you need.
    Signature
    {{ DiscussionBoard.errors[8898218].message }}

Trending Topics