SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Search box

  1. #1
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Search box

    what should be the right markup and CSS for the attached annotated searchbox.?
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I guess something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    #form1 {
        padding:20px;
        background:#fcf;
        width:520px;
        overflow:hidden;
    }
    #form1 label, #form1 input {
        float:left;
        padding:0 10px 0 0;
    }
    #search{
        width:300px;
        height:35px;
        line-height:35px;
        background:#fff;
        border:1px solid #000;
        margin:0;
        border-right:none;
        font-weight:bold;
    }
    #go{
        text-transform:uppercase;
        width:50px;
        height:37px;
        line-height:27px;
        background:#fcc;
        border:1px solid #000;
        margin:0;
        text-align:center;
    }
    #form1 label {
        width:100px;
        text-align:right;
        padding:0 10px 0 0;
        line-height:37px;
        font-weight:bold;
    }
    </style>
    </head>
    <body>
    <form id="form1" name="form1" method="post" action="">
        <fieldset>
        <legend>Search</legend>
        <label for="Search">Search:</label>
        <input type="text" name="Search" id="search">
        <input type="submit" name="Go" id="go" value="Go">
        </fieldset>
    </form>
    </body>
    </html>
    The measurements should be ems if used in a fluid with layout. However depending on user settings and browsers the alignment is likely to be a few pixels off in various browsers (as with that example you posted).

    If you wanted it perfect than I would wrap a span around each of those elements and style the spans instead of the inputs and they will likely be perfect cross browse. Then just set the borders to none and background to transparent for the inputs and just let them show the text on top of the spans background. In that way a few pixels difference will not notice. It depends on whether you want to add extra markup or not. The best choice would be to separate the input and submit so that size isn't critical.

  3. #3
    SitePoint Addict
    Join Date
    May 2008
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot!


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
  •