Positioning <form> Input elements ??

Discussion in 'HTML' started by Mel Smith, Feb 12, 2009.

  1. Mel Smith

    Mel Smith Guest

    Hi:

    Using CSS Absolute Positioning, I have positioned my <Form> element
    where I want it (and I put a prelim border around it so I can see its
    extent)

    Now, I would like to position (to my own liking) each of the <input>
    elements *inside* that form where I want them to be.

    For example, I have defined a big 'form' box, and now (within that box),
    I'd like to use the #someinputid for positioning that input box somewhere
    inside the 'form' box.

    How do I go about doing that please ??

    Thanks for any insights (and I've got Richard York's Beginning CSS 2nd
    edition for backup)

    --
    Mel Smith
    Mel Smith, Feb 12, 2009
    #1
    1. Advertising

  2. Mel Smith

    rf Guest

    Mel Smith wrote:
    > Hi:
    >
    > Using CSS Absolute Positioning, I have positioned my <Form> element
    > where I want it (and I put a prelim border around it so I can see its
    > extent)


    And then increase your font size and admire the content escaping from that
    box.

    > Now, I would like to position (to my own liking) each of the
    > <input> elements *inside* that form where I want them to be.
    >
    > For example, I have defined a big 'form' box, and now (within that
    > box), I'd like to use the #someinputid for positioning that input box
    > somewhere inside the 'form' box.
    >
    > How do I go about doing that please ??
    >
    > Thanks for any insights (and I've got Richard York's Beginning CSS 2nd
    > edition for backup)


    If the book told you to use absolute positioning like this then throw it
    away.
    rf, Feb 12, 2009
    #2
    1. Advertising

  3. Mel Smith

    Mel Smith Guest

    rf:

    "rf" <> wrote in message
    news:gx1ll.20046$...

    > And then increase your font size and admire the content escaping from that
    > box.
    >


    After I I have finalized the positioning of the <form> box -- then I'll
    eliminate the border

    (In the end I want a vertical column of big submit buttons starting in
    the upper-middle of the page and extending down thru the center toward the
    bottom.)

    > If the book told you to use absolute positioning like this then throw it
    > away.


    No, don't blame it on the book -- blame it on the reader (me !)

    But, then how *does* one position <input> fields to his liking using CSS.

    Thanks.

    -Mel Smith
    Mel Smith, Feb 12, 2009
    #3
  4. Mel Smith

    dorayme Guest

    In article <>,
    "Mel Smith" <> wrote:

    > How do I go about doing that please ??


    First thing maybe is to post a URL of your efforts, then others will
    help improve it.

    --
    dorayme
    dorayme, Feb 12, 2009
    #4
  5. Mel Smith

    rf Guest

    Mel Smith wrote:
    > rf:
    >
    > "rf" <> wrote in message
    > news:gx1ll.20046$...
    >
    >> And then increase your font size and admire the content escaping
    >> from that box.
    >>

    >
    > After I I have finalized the positioning of the <form> box -- then
    > I'll eliminate the border


    That's not what I mean. Any time a bunch of elements are absolutely
    positioned and contain textual content the design becomes so fragile that a
    simple increase of font size will cause the content to escape from those
    boxes and, probably, overwrite the text in the absolutely positioned element
    below. We see this here all the time.

    Don't use absolute positioning unless you a) really have to and b) really
    know what it does and what the ramifications are. The browser is quite
    capable of laying out elements by itself as it knows much more than you do
    about the client side environment, things such as font family, font size and
    canvas size. By using absolute positioning you are restricting the browsers
    options in laying out the page.

    > (In the end I want a vertical column of big submit buttons
    > starting in the upper-middle of the page and extending down thru the
    > center toward the bottom.)


    Ah, that's better. You have stated the real problem, not the trouble you are
    having with some perceived solution.

    Ideas:

    Put each submit button in its own <p> and they will flow down the page.
    Folow each submit button with a <br> and they will flow down the page.

    Then look at centering the form element on the page. Centering stuff is
    mentioned here all the time. Google the archives.

    As dorayme said, show us what you have so far.
    rf, Feb 12, 2009
    #5
  6. Mel Smith

    dorayme Guest

    In article <>,
    "Mel Smith" <> wrote:

    > (In the end I want a vertical column of big submit buttons starting in
    > the upper-middle of the page and extending down thru the center toward the
    > bottom.)

    ....

    > ... how *does* one position <input> fields to his liking using CSS.


    Depends what you like. I like sending Roger Rabbit places:

    <http://dorayme.netweaver.com.au/alt/centredButtons.html>

    --
    dorayme
    dorayme, Feb 12, 2009
    #6
  7. Mel Smith

    rf Guest

    dorayme wrote:
    > In article <>,
    > "Mel Smith" <> wrote:
    >
    >> (In the end I want a vertical column of big submit buttons
    >> starting in the upper-middle of the page and extending down thru the
    >> center toward the bottom.)

    > ...
    >
    >> ... how *does* one position <input> fields to his liking using CSS.

    >
    > Depends what you like. I like sending Roger Rabbit places:
    >
    > <http://dorayme.netweaver.com.au/alt/centredButtons.html>


    Intriguing. The action mentioned in your form is a 404 but if you take out
    the prog/adduser bit you get the domain name owners PHPInfo.

    Of course you don't get nearly as much information with action="example.com"
    :)
    rf, Feb 12, 2009
    #7
  8. Mel Smith

    dorayme Guest

    In article <nH2ll.20060$>,
    "rf" <> wrote:

    > dorayme wrote:
    > > In article <>,
    > > "Mel Smith" <> wrote:
    > >
    > >> (In the end I want a vertical column of big submit buttons
    > >> starting in the upper-middle of the page and extending down thru the
    > >> center toward the bottom.)

    > > ...
    > >
    > >> ... how *does* one position <input> fields to his liking using CSS.

    > >
    > > Depends what you like. I like sending Roger Rabbit places:
    > >
    > > <http://dorayme.netweaver.com.au/alt/centredButtons.html>

    >
    > Intriguing. The action mentioned in your form is a 404 but if you take out
    > the prog/adduser bit you get the domain name owners PHPInfo.
    >
    > Of course you don't get nearly as much information with action="example.com"
    > :)


    ahem... (thanks mate!)

    I have turned to Doris Day for help.

    --
    dorayme
    dorayme, Feb 13, 2009
    #8
  9. Mel Smith

    Mel Smith Guest

    "rf" <> wrote in message
    news:qi2ll.20054$...
    > That's not what I mean. Any time a bunch of elements are absolutely
    > positioned and contain textual content the design becomes so fragile that
    > a simple increase of font size will cause the content to escape from those
    > boxes and, probably, overwrite the text in the absolutely positioned
    > element below. We see this here all the time.


    I understand.

    >
    > Don't use absolute positioning unless you a) really have to and b) really
    > know what it does and what the ramifications are. The browser is quite
    > capable of laying out elements by itself as it knows much more than you do
    > about the client side environment, things such as font family, font size
    > and canvas size. By using absolute positioning you are restricting the
    > browsers options in laying out the page.
    >
    >> (In the end I want a vertical column of big submit buttons
    >> starting in the upper-middle of the page and extending down thru the
    >> center toward the bottom.)

    >
    > Ah, that's better. You have stated the real problem, not the trouble you
    > are having with some perceived solution.
    >
    > Ideas:
    >
    > Put each submit button in its own <p> and they will flow down the page.
    > Folow each submit button with a <br> and they will flow down the page.
    >
    > Then look at centering the form element on the page. Centering stuff is
    > mentioned here all the time. Google the archives.


    Rf:
    I'll place the separate withing <p> elements tomorrow, and show you the
    results later (when I',m not ashamed of them).
    -Mel
    Mel Smith, Feb 13, 2009
    #9
  10. Mel Smith

    Mel Smith Guest

    "dorayme" <> wrote in message
    news:...
    > First thing maybe is to post a URL of your efforts, then others will
    > help improve it.


    Dorayme:

    I'll try to get the resulting url to this group tomorrow afternoon.
    (after I put a brown bag over my head)

    -Mel
    Mel Smith, Feb 13, 2009
    #10
  11. Mel Smith

    dorayme Guest

    In article <>,
    "Mel Smith" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > First thing maybe is to post a URL of your efforts, then others will
    > > help improve it.

    >
    > Dorayme:
    >
    > I'll try to get the resulting url to this group tomorrow afternoon.
    > (after I put a brown bag over my head)
    >
    > -Mel


    Be careful. In pre-terrorist culture in the 40s and 50s, kids would puff
    up brown bags and smash them hard with palms of two hands coordinated to
    make a loud bang. The point is that some of us have not forgotten the
    temptation when seeing brown bags sort of puffed up... Watch out for big
    people wearing shorts or pigtails...

    --
    dorayme
    dorayme, Feb 13, 2009
    #11
  12. rf wrote:

    > Don't use absolute positioning unless you a) really have to and b)
    > really know what it does and what the ramifications are. The browser
    > is quite capable of laying out elements by itself as it knows much
    > more than you do about the client side environment, things such as
    > font family, font size and canvas size. By using absolute positioning
    > you are restricting the browsers options in laying out the page.


    Something like that should really be said first in any tutorial or textbook
    on absolute positioning! And the same basic arguments apply against doing
    layout with tables that have fixed dimension for everything

    > Put each submit button in its own <p> and they will flow down the
    > page. Folow each submit button with a <br> and they will flow down
    > the page.


    Well, a submit button isn't really a paragraph, is it? And <br> is a bit
    unstructured: it's something thrown inside text, as opposite to markup that
    surrounds texts and turns it into styleable, scriptable, and everythingable
    _elements_.

    So I'd suggest

    <div class="..."><input type="submit" ...></div>

    Then you can simply set e.g. the desired top and bottom margins for div
    elements in the class. You won't get the default margins for paragraphs,
    which means that you don't need to worry about switching them off when you
    don't want them.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 13, 2009
    #12
  13. Mel Smith

    Mel Smith Guest

    "Jukka K. Korpela" <> wrote in message
    news:a25ll.1218$...
    > rf wrote:


    [snip ...]
    > So I'd suggest
    >
    > <div class="..."><input type="submit" ...></div>
    >
    > Then you can simply set e.g. the desired top and bottom margins for div
    > elements in the class. You won't get the default margins for paragraphs,
    > which means that you don't need to worry about switching them off when you
    > don't want them.


    Another great idea. I'll try *that* tomorrow too

    (in the meantime, this evening I used the <p>element around my vertical
    column of inputs. It worked pretty good, but the input elements were too
    separated. So, I tried several things to move them tighter together
    (including height: npx; and 0 padding, and 0 margin) but still the spacing
    of my vertical 'buttons' were not adjustable. Will try again tomorrow with
    <div> elements)

    Now its beddy-bye bed.

    Thanks for the alternate method !

    -Mel
    Mel Smith, Feb 13, 2009
    #13
  14. Mel Smith

    Bergamot Guest

    Mel Smith wrote:
    >
    > (In the end I want a vertical column of big submit buttons starting in
    > the upper-middle of the page and extending down thru the center toward the
    > bottom.)


    If it's a list of buttons, use list markup. Some styling ideas can be
    found at
    http://css.maxdesign.com.au/listamatic/

    --
    Berg
    Bergamot, Feb 14, 2009
    #14
  15. Mel Smith

    Mel Smith Guest

    "Bergamot" <> wrote in message
    news:...

    >
    > If it's a list of buttons, use list markup. Some styling ideas can be
    > found at
    > http://css.maxdesign.com.au/listamatic/
    >


    Berg:

    Thanks for the pointer to the list markup.

    I'll study it and try to incorporate it.

    -Mel Smith
    Mel Smith, Feb 14, 2009
    #15
  16. Mel Smith

    dorayme Guest

    In article <>,
    "Mel Smith" <> wrote:

    > "Bergamot" <> wrote in message
    > news:...
    >
    > >
    > > If it's a list of buttons, use list markup. Some styling ideas can be
    > > found at
    > > http://css.maxdesign.com.au/listamatic/
    > >


    >
    > Thanks for the pointer to the list markup.
    >
    > I'll study it and try to incorporate it.
    >


    Where there are buttons, there is often 'cross row tabular information'
    and where there is this, there is often usefully the option of a table.

    Even a one col table is not so wrong an element to use for a list where
    there is a style advantage. A shrink to fit table can centre nicer and
    more exactly than a set of list items.

    --
    dorayme
    dorayme, Feb 14, 2009
    #16
  17. Mel Smith

    Mel Smith Guest

    "dorayme" <> wrote in message
    news:...

    >
    > Where there are buttons, there is often 'cross row tabular information'
    > and where there is this, there is often usefully the option of a table.
    >
    > Even a one col table is not so wrong an element to use for a list where
    > there is a style advantage. A shrink to fit table can centre nicer and
    > more exactly than a set of list items.



    Dorayme:

    O.K., before I try the 'list' suggestion, I'll test later today the
    (easier) 1-col table technique.

    Thanks,

    -Mel Smith
    Mel Smith, Feb 15, 2009
    #17
  18. Mel Smith

    Mel Smith Guest

    "Mel Smith" <> wrote in message
    news:...
    >> Where there are buttons, there is often 'cross row tabular information'
    >> and where there is this, there is often usefully the option of a table.
    >>
    >> Even a one col table is not so wrong an element to use for a list where
    >> there is a style advantage. A shrink to fit table can centre nicer and
    >> more exactly than a set of list items.

    >
    >
    > Dorayme:
    >
    > O.K., before I try the 'list' suggestion, I'll test later today the
    > (easier) 1-col table technique.


    Dorayme:

    O.K. !!

    Finally I've got the <Table> Element used as an array of vertical
    buttons.

    In IE7, it looks great. In Safari and Opera -- not so good :((

    In FF, Looks pretty good ??

    Thanks for the guidance.

    (now I'm reverting to 'content' work for awhile (rather than
    'Presentation') )

    -Mel Smith
    Mel Smith, Feb 15, 2009
    #18
  19. Mel Smith

    dorayme Guest

    In article <>,
    "Mel Smith" <> wrote:

    > "Mel Smith" <> wrote in message
    > news:...


    > > dorayme:
    > >
    > > O.K., before I try the 'list' suggestion, I'll test later today the
    > > (easier) 1-col table technique.

    >
    > dorayme:
    >
    > O.K. !!
    >
    > Finally I've got the <Table> Element used as an array of vertical
    > buttons.
    >
    > In IE7, it looks great. In Safari and Opera -- not so good :((
    >
    > In FF, Looks pretty good ??
    >
    > Thanks for the guidance.


    How about a URL to see what you are doing and why it is not working in
    Safari. Most things done right work in Safari!

    --
    dorayme
    dorayme, Feb 16, 2009
    #19
  20. Mel Smith

    Mel Smith Guest

    "dorayme" <> wrote in message
    news:...
    >> In IE7, it looks great. In Safari and Opera -- not so good :((
    >>
    >> In FF, Looks pretty good ??


    Dorayme:

    > How about a URL to see what you are doing and why it is not working in
    > Safari. Most things done right work in Safari!


    (the operative phrase above is 'done right')

    My developing (barely) website is: www.mesaeastpark.com.

    Please click on the 'Visit' Button to see how I managed the vertical row
    of buttons. Of course, none of the buttons has any substance behind them
    (yet).

    (President Obama will be giving a talk at Dobson High School on Tuesday
    (I golf at Dobson Ranch Golf course each Wednesday -- its aout 400 yards
    north of the High School)

    -Mel Smith
    Mel Smith, Feb 16, 2009
    #20
    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. Deryck
    Replies:
    3
    Views:
    615
    SpaceGirl
    Oct 8, 2004
  2. Ralf
    Replies:
    10
    Views:
    577
    John Hosking
    Sep 5, 2007
  3. Mel Smith
    Replies:
    4
    Views:
    955
    Duende
    Mar 1, 2009
  4. Replies:
    4
    Views:
    178
  5. Andrew Poulos

    IE 8 and positioning elements

    Andrew Poulos, Apr 6, 2009, in forum: Javascript
    Replies:
    0
    Views:
    74
    Andrew Poulos
    Apr 6, 2009
Loading...

Share This Page