Text aligning

Discussion in 'HTML' started by tshad, May 27, 2005.

  1. tshad

    tshad Guest

    I am curious as to why HTML doesn't line up the objects in a cell the way
    you ask. Each object seems to be dependant on the other.

    For example, in the following code:
    ********************************************************************
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">
    <html>
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>

    <body id="myBody">
    <form name="addForm" method="post" action="resumeSubmit.aspx" id="addForm">
    <table width="612" border="1" >
    <tr>
    <td style="vertical-align:top" nowrap>&nbsp;
    Resume Title: <input name="ResumeTitle" type="text" value="DataBase
    Administrator 3" size="45" id="ResumeTitle" />
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    *******************************************************************

    The way this seems to work is that the text is always in the middle of the
    textbox. So the textbox goes to the top and the text will still be at the
    middle of the textbox. If you delete the textbox, the text moves to the top
    of the cell.

    If you have an image, the bottom of the image will be at the bottom of the
    text (which puts the text at the bottom of the image). The if there is a
    text box, that will be a little bit lower (as the text is always at the
    middle of the textbox).

    Now you can change the valign (or vertical-align) to (top, bottom middle,
    baseline etc) and all will move as one. If you say top, the image will go
    to the top of the box and all the other objects will be in relation to the
    image (as specified before). If you say valign="Bottom", the textbox will
    go to the bottom (as it is the lowest object) and everything will move in
    relation to that.

    The problem is I want to put all all the objects in the middle so that the
    text will be in the middle (but next to) the image and the text box at the
    middle of the text box.

    Is there anyway to do this without putting each in their own cell?

    This is actually part of a data table where I want to put text and an image
    as well as a text box for editing the data.

    Thanks,

    Tom
     
    tshad, May 27, 2005
    #1
    1. Advertising

  2. tshad wrote:

    > I am curious as to why HTML doesn't line up the objects in a cell the way
    > you ask. Each object seems to be dependant on the other.
    >
    > For example, in the following code:
    > ********************************************************************
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">


    4.01 Transitional Doctype with no URL. This will trigger Quirks mode in many
    browsers.

    > <td style="vertical-align:top" nowrap>&nbsp;


    Rather pointless non-breaking space there.

    > Resume Title: <input name="ResumeTitle" type="text" value="DataBase
    > Administrator 3" size="45" id="ResumeTitle" />


    Weird mix of XHTML and HTML style syntax here.

    > The way this seems to work is that the text is always in the middle of the
    > textbox. So the textbox goes to the top and the text will still be at the
    > middle of the textbox. If you delete the textbox, the text moves to the
    > top of the cell.


    The text and the input are set out in a line. That line is an anonymous
    inline box. It is that box which is aligned to the top of the cell.

    The trick is to apply the vertical-align property to the input and position
    it on the line (in that anonymous inline block).

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, May 27, 2005
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Onur Bozkurt

    Re: aligning text in a asp label

    Onur Bozkurt, Jul 25, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    787
    Onur Bozkurt
    Jul 25, 2003
  2. =?Utf-8?B?Sm9l?=

    Aligning text

    =?Utf-8?B?Sm9l?=, Jan 25, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    1,224
    =?Utf-8?B?Sm9l?=
    Jan 25, 2006
  3. Phillip
    Replies:
    2
    Views:
    3,248
  4. BGW
    Replies:
    3
    Views:
    456
  5. Steven Bethard

    aligning text with space-normalized text

    Steven Bethard, Jun 30, 2005, in forum: Python
    Replies:
    6
    Views:
    391
    Steven Bethard
    Jul 1, 2005
Loading...

Share This Page