Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Input box for search

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #24058
    jweagley
    Member

    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

    #53570
    Ramesh
    Member

    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;
    }

    #53579
    jweagley
    Member

    Thank you. It works perfectly.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.