• Hello

    on http://olivierbaudrydesign.free.fr/?page_id=9/

    I decided to design a search form on my website
    the first searchform is this :

    you can see it on http://olivierbaudrydesign.free.fr/?page_id=29/
    <div id="search">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform">
    <input type="text" name="s" id="s"  value="Rechercher" />
    <input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif"/>
    </form>
    </div>

    and the original css is this `#search {
    position: absolute;
    top: -24px;
    right: -16px;
    margin: 0px;
    margin-top: 0px;
    }

    #s {
    width: 150px;
    height: 17px;
    background-image: url(/wp-content/themes/oupocreanum/images/loupe.gif);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: dotted;
    border-right-style: dotted;
    border-bottom-style: dotted;
    border-left-style: dotted;
    border-top-color: grey;
    border-right-color: grey;
    border-bottom-color: grey;
    border-left-color: grey;
    vertical-align: text-bottom;
    }

    #search label {
    display: none;
    }

    #search h2, #search form {
    display: inline;
    }`

    But i decided to modify code like this :

    http://olivierbaudrydesign.free.fr/?page_id=9/
    <div id="search">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" name="searchform" id="searchform" />
    <input type="text" name="s" id="s" value="Rechercher" maxlength="255" style="" onClick="this.value='';"onblur="if(this.value=='') this.value='Rechercher';" onfocus="if(this.value=='Rechercher') this.value='';" /></div>
    <input type="image" alt="submit" src="/wp-content/themes/oupocreanum/images/return.gif"   />
    </form>
    </div>

    But my purpose is to have two box one for searchform with picture on background and one for text But actually I don’t know,I search to have a separation between searchform background and searchform text like arte.tv search form http://www.arte.tv/fr/70.html

    Can you help me for making good scripting or good css to have a good effect on text position?

  • The topic ‘Design a search form with css my purpose is to have searchform text like arte’ is closed to new replies.