SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form won't line up next to text

    I'm simply trying to put a search box (form) on the same line as the word "Search:", but it appears underneath the word Search: instead of to the right of it.
    Any help will be appreciated. Thanks

    Code:
    <font size="6" color="#666666" face="Arial">Search:</font><form method="get" action="search.php"><input type="hidden" name="type" value="images" /><input type="text" name="keyword" size="32" value="Search" id="sbi" onclick="clickclear(this, 'Search')" onblur="clickrecall(this,'Search')" style="font-family: verdana; font-weight:; font-size: 10pt; height: 18px; width:240px; color:#000000; letter-spacing: 1; border: 2px inset #F5F5F5; background-color: #ffffff" /><input type="submit" value="Search" name="B2" style="font-family: verdana; font-weight:; font-size: 10pt; width:88px; color:#FFFFFF; letter-spacing: 1; border: 1px inset #F5F5F5; background-color: #990000" /></form>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    It appears to the right in firefox. Are you talking about a specific browser?

    Hmmm, font tags. Don't see those too often any more!

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    I'm using IE7. Any suggestions would be appreciated.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I tested your code in IE7 and it works fine: search button to the right of the input.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for "search button to the right of the input", but I was trying to get input to the right of the word/text "Search:"

    Yes, when I view it search button is to the right of the input field,
    but I'm trying to get the input field to the right of the word Search:
    all on one line, and when I view it the input field and the search button are on the line below the word "Search:"


    I'm try to get it like this:

    Search: Input Field Search Button

    But when I view it looks like this:

    Search:
    Input Field Search Button


    Thanks. Any help would be appreciated

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because a form is a block-level element which generates a block-level box by default. And a block-level box won't show up next to an inline-box generated by the long deprecated font tag.

    Your messy code should be something like this,
    Code HTML4Strict:
    <form method="get" action="search.php" id="search">
      <div>
        <input type="hidden" name="type" value="images">
        <label for="sbi">Search:</label>
        <input type="text" name="keyword" id="sbi">
        <input type="submit" value="Search" name="B2" id="B2">
      </div>
    </form>
    Code CSS:
    #search label {
      color:#666;
      font:1.4em Arial,sans-serif;
    }
     
    #sbi {
      font:10pt verdana,sans-serif;
      height:1.4em;
      width:18em;
      color:#000;
      letter-spacing:1px;
      border:2px inset #F5F5F5;
      background-color:#fff;
    }
     
    #B2 {
      font:10pt verdana,sans-serif;
      width:7em;
      color:#fff;
      letter-spacing: 1px;
      border: 1px inset #F5F5F5;
      background-color: #900;
    }
    Not that I'd recommend using pt as a unit of measurement for on-screen use, or specifying the height of the input field or the width of the button.

    Also note that letter spacing cannot be specified as '1'. One what? It must have a unit.
    Birnam wood is come to Dunsinane

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you change the font tag to a label for the input and put it inside the form, it will line up. You can use vertical-align on the inputs to level them with the label.
    Code:
    <form method="get" action="search.php">
    	<input type="hidden" name="type" value="images" />
    	<label for="sbi" style="color:#666666; font-family:Arial">Search:</label>
    	<input type="text" name="keyword" size="32" value="Search" id="sbi" onBlur="this.value=(this.value=='') ? 'Search' : this.value;" onFocus="this.value=(this.value=='Search') ? '' : this.value;" style="vertical-align:middle; font: 10pt verdana; height: 18px; width:240px; color:#000000; border: 2px inset #F5F5F5; background-color: #ffffff" />
    	<input type="submit" value="Search" name="B2" style="vertical-align:middle; font: 10pt verdana; width:88px; color:#FFFFFF; border: 1px inset #F5F5F5; background-color: #990000" />
    </form>
    Edit) Hi Tommy! I'm a bit slow apparently. Nice to have you around.
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    737
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all of your help. Much appreciated.


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
  •