Vertical alignment of a form

Discussion in 'HTML' started by Jakob Rohde, Jan 8, 2005.

  1. Jakob Rohde

    Jakob Rohde Guest

    Hi,

    I'm working on a website with a search form (a text field and a button).
    I'm having problems placing this form vertically in the center of the
    cell using CSS.

    The form is placed in a table with one cell (within another table).

    Could someone please tell me how to do that?

    Thanks,

    Jakob
    Jakob Rohde, Jan 8, 2005
    #1
    1. Advertising

  2. Jakob Rohde

    Els Guest

    Jakob Rohde wrote:

    > Hi,
    >
    > I'm working on a website with a search form (a text field
    > and a button). I'm having problems placing this form
    > vertically in the center of the cell using CSS.
    >
    > The form is placed in a table with one cell (within another
    > table).
    >
    > Could someone please tell me how to do that?


    It would help if you showed what you've done so far, so people
    here can spot the problem instead of having to guess.
    Do you have a url?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Counting Crows - Mr. Jones
    Els, Jan 8, 2005
    #2
    1. Advertising

  3. Jakob Rohde

    Jakob Rohde Guest

    Els wrote:

    > It would help if you showed what you've done so far, so people
    > here can spot the problem instead of having to guess.
    > Do you have a url?


    Hi,

    Sorry, I'm actually working on whats going to be a template for Typo3.
    Those of you who knows Typo3, would agree, that when you are working on
    a template, you are a long way from publishing anything...

    Jakob
    Jakob Rohde, Jan 8, 2005
    #3
  4. Jakob Rohde

    Els Guest

    Jakob Rohde wrote:

    > Els wrote:


    [vertically centering form element in table cell]

    >> It would help if you showed what you've done so far, so
    >> people here can spot the problem instead of having to
    >> guess. Do you have a url?

    >
    > Sorry, I'm actually working on whats going to be a template
    > for Typo3. Those of you who knows Typo3, would agree, that
    > when you are working on a template, you are a long way from
    > publishing anything...


    I don't know Typo3, but I presume there's HTML output?
    You're saying you can't upload a one celled table with a form
    element in it to show the problem?

    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: Don McLean - American Pie
    Els, Jan 8, 2005
    #4
  5. Jakob Rohde

    Jakob Rohde Guest

    Els wrote:

    > I don't know Typo3, but I presume there's HTML output?
    > You're saying you can't upload a one celled table with a form
    > element in it to show the problem?


    Of cource I can show you the source code...

    This is the part of the HTML-file in question:

    <tr>
    <td>
    <table width="100%" class="searchtable">
    <tr>
    <td valign="middle">
    <form name="formSearch" id="formSearch" method="post" action="">
    <input name="textfield" type="text" size="10" maxlength="50" />
    <input name="Submit" type="submit" class="searchbutton"
    value="Ok" />
    </form>
    </td>
    </tr>
    </table>
    </td>
    </tr>

    And this is the "searchtable" part of the stylesheet:

    ..searchtable {
    text-align: center;
    vertical-align: middle;
    }

    I have tried with other things than this, but nothing works. The form
    keeps aligning to the top.

    At this point everything is happening in Dreamweaver. Typo3 is not used
    until the design is ok.

    TIA,

    Jakob
    Jakob Rohde, Jan 8, 2005
    #5
  6. Jakob Rohde

    Els Guest

    Jakob Rohde wrote:

    > Els wrote:
    >
    >> I don't know Typo3, but I presume there's HTML output?
    >> You're saying you can't upload a one celled table with a
    >> form element in it to show the problem?

    >
    > Of cource I can show you the source code...
    >
    > This is the part of the HTML-file in question:
    >
    > <tr>
    > <td>
    > <table width="100%" class="searchtable">
    > <tr>
    > <td valign="middle">
    > <form name="formSearch" id="formSearch"
    > method="post" action="">
    > <input name="textfield" type="text" size="10"
    > maxlength="50" /> <input name="Submit"
    > type="submit" class="searchbutton"
    > value="Ok" />
    > </form>
    > </td>
    > </tr>
    > </table>
    > </td>
    > </tr>
    >
    > And this is the "searchtable" part of the stylesheet:
    >
    > .searchtable {
    > text-align: center;
    > vertical-align: middle;
    > }
    >
    > I have tried with other things than this, but nothing
    > works. The form keeps aligning to the top.


    No it doesn't.
    Give the table.searchtable a height and you'll see it almost
    vertically center.
    Then add this line:
    ..searchtable form{margin-bottom:0;}
    and it's exactly centered.

    BTW, I copied your code into an html file that I had waiting
    for tests like this, added the <table> and </table> tags
    around the <tr></tr>, started up my local version of Apache,
    renamed the file so I can use the original again for other
    purposes, and then added a *{border:1px solid red} to the
    styles, to see what was happening.

    I wonder, is this what people in Usenet have to do to be able
    to help you, or should /you/ make a sample and upload it to a
    server so others can observe and help?

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jan 8, 2005
    #6
  7. Jakob Rohde

    Dylan Parry Guest

    Els wrote:

    > I wonder, is this what people in Usenet have to do to be able
    > to help you, or should /you/ make a sample and upload it to a
    > server so others can observe and help?


    My general rule of thumb is that if a question contains more code than
    explanatory text, then it is not worth my time and in general does not
    get a second look from me. I refuse point blank to copy n' paste code
    into a new file or create test documents of any sort; if the OP can't be
    bothered, then why should I?

    Obviously, if the question is regarding server-side code, then it might
    get more of my time as an uploaded version would be of little help :)

    --
    Dylan Parry
    http://webpageworkshop.co.uk -- FREE Web tutorials and references
    Dylan Parry, Jan 8, 2005
    #7
  8. Jakob Rohde

    Els Guest

    Dylan Parry wrote:

    > Els wrote:
    >
    >> I wonder, is this what people in Usenet have to do to be
    >> able to help you, or should /you/ make a sample and upload
    >> it to a server so others can observe and help?

    >
    > My general rule of thumb is that if a question contains
    > more code than explanatory text,


    Hmm.. some people use a *lot* of explanatory text to describe
    a simple problem <g>

    > then it is not worth my
    > time and in general does not get a second look from me. I
    > refuse point blank to copy n' paste code into a new file or
    > create test documents of any sort; if the OP can't be
    > bothered, then why should I?


    You're right of course. I just did it this time cause I had
    nothing else to do on the pc, because if I walk away from the
    computer, there's a lot of stuff I have to do that I don't
    feel like doing :\

    > Obviously, if the question is regarding server-side code,
    > then it might get more of my time as an uploaded version
    > would be of little help :)


    That w/shouldn't happen in alt.html though ;-)

    --
    Els
    http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Els, Jan 8, 2005
    #8
  9. Jakob Rohde

    Jakob Rohde Guest

    Els wrote:

    > Give the table.searchtable a height and you'll see it almost
    > vertically center.
    > Then add this line:
    > .searchtable form{margin-bottom:0;}
    > and it's exactly centered.


    Thanks Els! That did the job :)

    Jakob

    Ps. Just received "Designing Without Tables Using CSS" form Amazon
    yesterday. If I wasn't married, I'd have read it by now...
    Jakob Rohde, Jan 8, 2005
    #9
  10. Jakob Rohde

    Toby Inkster Guest

    Toby Inkster, Jan 9, 2005
    #10
  11. Jakob Rohde

    Dylan Parry Guest

    Dylan Parry, Jan 9, 2005
    #11
  12. Jakob Rohde

    Toby Inkster Guest

    Toby Inkster, Jan 9, 2005
    #12
    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. dba56
    Replies:
    0
    Views:
    819
    dba56
    Apr 14, 2005
  2. Luc
    Replies:
    2
    Views:
    402
    Sid Ismail
    Jan 19, 2004
  3. Nik Coughin

    Vertical alignment in a div

    Nik Coughin, Jan 21, 2004, in forum: HTML
    Replies:
    9
    Views:
    5,309
    Nik Coughin
    Jan 28, 2004
  4. Jim Heavey

    Vertical Alignment

    Jim Heavey, Mar 2, 2004, in forum: HTML
    Replies:
    10
    Views:
    763
  5. Arondelle
    Replies:
    12
    Views:
    760
    Spartanicus
    Jul 18, 2004
Loading...

Share This Page