SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add two text boxes side by side

    On this page, in the middle of the text, I'd like to add two text boxes side by side, separated by a vertical line.

    Can someone tell me how to do that? Thanks


    Code:
    <body>
    <table width="770" border="0" cellpadding="0" cellspacing="0" id="maintable">
      <tr>
        <td colspan="2" id="topline">&nbsp; </td>
      </tr>
    Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text Text, text, text
    
      <tr>
        <td id="footer" colspan="2"></td>
      </tr>
    </table>
    </body>

  2. #2
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Can you explain your problem further?
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  3. #3
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I'd like to add

    I'd like to add two text boxes side by side, separated by a vertical line

  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    solution

    <table width="400" cellpadding="2" cellspacing="2" border="0">
    <tr>
    <td>
    <textarea name="text1" cols="24" rows="4" id="text1"></textarea>
    </td>
    <td style="border-left:1px solid #000000;">
    <textarea name="text2" cols="24" rows="4" id="text2"></textarea>
    </td>
    </tr>
    </table>


    The code above gives your a table with two cells both containing a text box. The second cell has a 1 pixel black line along it's left border which will give you that vertical line you wanted. You can change the dimensions of the table and the size of the text boxes.

  5. #5
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    Thanks, I added it and it looks good, except I see faint up and down arrows in a column on the right side of each box, like you see at the very rigjht of your computer to scroll up and down a page. What is that?

    Also, where can change the box borders?

    Thanks again.

  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css

    Those scroll bars will become active once your visitor writes more text than the text box can display. Certain browsers (ie safari) will hide the scroll bars until needed, internet explorer usually just grays them. If your want them hidden in all browsers use the style overflow:hidden; in your textarea tag. Like this

    <textarea name="text" style="overflow:hidden;"></textarea>

    As for the boxes I generally use a border style to give elements a box look. my short hand for that style would be border: width type color;

    <textarea name="text" style="overflow:hidden;border:1px solid #333333;"></textarea>

    Notice how I've combined the styles into one argument, if you have two style variables things won't work.
    Last edited by kweb; Aug 12, 2007 at 18:40. Reason: cut off portion

  7. #7
    Non-Member
    Join Date
    Apr 2007
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    I probably have asked for this all wrong.

    I put text in the boxes like so "<font face="Arial" color="#EE7600" size="3"><b>exercising</b> <br></font><font face="Arial" color="#6B6B6B" size="2">is great for you

    And it just doesn't look right.

    I probably shouldn't have asked for "text boxes".

    I'd just like to split some text up into two short columns, separeated by a vertical line, in the middle of full lines of text like so:


    text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text


    text text text text text text text l text text text text text text
    text text text text text text text l text text text text text text
    text text text text text text text l text text text text text text
    text text text text text text text l text text text text text text


    text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text
    text text text text text text text text text text text text text text text text

    Can you help me with this?

    thanks again.

  8. #8
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Try the web-design forum. This has nothing to do with PHP
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona


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
  •