Grow your CSS skills. Land your dream job.

Input box for search

  • # January 27, 2009 at 10:23 pm

    I am working on setting up a search for my new blog layout. I know exactly what I want, I know it can be done, but I’m running into one slight problem. I have set-up a background for the input box, but I have been unable to get the box and background to line up. I have tried just about everything I can think of (I haven’t done a ton with forms and I’m still in the process of learning the finer points of CSS).

    Here’s what I have:

    CSS:

    Code:
    #menu {
    background: #000000;
    height: 35px;
    width: 960px;
    }
    #menu_items {
    float: left;
    width: 650px;
    }
    #search {
    float: right;
    margin-top: 4px;
    width: 217px;
    height: 26px;
    color: #FFFFFF;
    position: static;
    display:inline;
    background:url(../images/search_background.jpg) no-repeat 5px;
    }
    input.swap {
    background-color:transparent !important;
    border:0 solid transparent !important;
    font-size:12px;
    width: 170px;
    }

    HTML:

    Code:

    I haven’t cleaned everything up yet, so the code is still a little messy, but I think you get what I’ve done thus far. I attached the three files I reference in the code. Any help would be appreciated.

    Thanks in advance.

    JD

    # January 28, 2009 at 5:01 am

    check out this code it works

    HTML Code

    <div id="menu">
    <div id="menu_items">menu items</div>
    <div id="search" style="background:url(images/search_background.jpg) no-repeat left top;"><form id="searchform" action="" method="get" name="">
    <div id="rounded" style="float:left;"><img src="images/search_left.jpg" width="9" height="26" /></div>
    <div id="in" style="float:left; padding:5px 0 0 0;"><input id="s" class="swap" type="text" value="Search" size="35" name="s" style="color: #999999;"/></div>
    <div id="se" style="float:left;"><img src="images/serach_right.jpg" width="27" height="26" /></div>
    </form></div>
    </div>

    CSS Code

    #search {
    float: right;
    width: 217px;
    height: 27px;
    color: #FFFFFF;
    border:solid 1px #FF0000;
    }

    # January 28, 2009 at 10:33 am

    Thank you. It works perfectly.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".