Positioning <form> Input elements ??

[Mel Smith]

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)

 

[rf]

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.

 

[Mel Smith]

rf:

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

 

[dorayme]

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.

 

[rf]

rf:



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.

 

[dorayme]

(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>

 

[rf]

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"

 

[dorayme]

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.

 

[Mel Smith]

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.


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]

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

 

[dorayme]

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...

 

[Jukka K. Korpela]

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.

 

[Mel Smith]

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

 

[Bergamot]

(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/

 

[Mel Smith]

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

 

[dorayme]

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.

 

[Mel Smith]

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]

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

 

[dorayme]

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!

 

[Mel Smith]

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