Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Positioning <form> Input elements ??

Reply
Thread Tools

Positioning <form> Input elements ??

 
 
Mel Smith
Guest
Posts: n/a
 
      02-12-2009
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


 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      02-12-2009
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.


 
Reply With Quote
 
 
 
 
Mel Smith
Guest
Posts: n/a
 
      02-12-2009
rf:

"rf" <(E-Mail Removed)> wrote in message
news:gx1ll.20046$(E-Mail Removed)...

> 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


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-12-2009
In article <(E-Mail Removed)>,
"Mel Smith" <(E-Mail Removed)> 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
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      02-12-2009
Mel Smith wrote:
> rf:
>
> "rf" <(E-Mail Removed)> wrote in message
> news:gx1ll.20046$(E-Mail Removed)...
>
>> 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.


 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-12-2009
In article <(E-Mail Removed)>,
"Mel Smith" <(E-Mail Removed)> 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
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      02-12-2009
dorayme wrote:
> In article <(E-Mail Removed)>,
> "Mel Smith" <(E-Mail Removed)> 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"



 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      02-13-2009
In article <nH2ll.20060$(E-Mail Removed)>,
"rf" <(E-Mail Removed)> wrote:

> dorayme wrote:
> > In article <(E-Mail Removed)>,
> > "Mel Smith" <(E-Mail Removed)> 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
 
Reply With Quote
 
Mel Smith
Guest
Posts: n/a
 
      02-13-2009

"rf" <(E-Mail Removed)> wrote in message
news:qi2ll.20054$(E-Mail Removed)...
> 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


 
Reply With Quote
 
Mel Smith
Guest
Posts: n/a
 
      02-13-2009

"dorayme" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
IE 8 and positioning elements Andrew Poulos Javascript 0 04-06-2009 04:41 AM
Separately Positioning Form Input Elements ? Mel Smith HTML 4 03-01-2009 03:27 AM
positioning & padding in DIV elements ... Ralf HTML 10 09-05-2007 02:25 PM
Positioning a div right under a text input Thierry Lam HTML 5 09-27-2006 02:17 PM
Difficulties positioning form elements using CSS (also with making the code validate) Deryck HTML 3 10-08-2004 02:48 PM



Advertisments