form horizontal alignment

Hello,

I 'm in the process of developing this site http://test.artcut.gr/

I have a problem with #index-login. I want the form to be middled
aligned with the first sentence (I know it's greek and you can't
understand it).

The form is in a left floated div so as not to appear as block element.
I don't know why but putting form {display:inline;float:left} did't do
the trick, so I used the two extra left floated divs.

Any help?

thanks
HK

On 2009-02-05, Harris Kosmidhs <hkosmidi (AT) remove (DOT) me.softnet.tuc.gr> wrote:

Hello,

I 'm in the process of developing this site http://test.artcut.gr/

I have a problem with #index-login. I want the form to be middled
aligned with the first sentence (I know it's greek and you can't
understand it).

The form is in a left floated div so as not to appear as block element.
I don't know why but putting form {display:inline;float:left} did't do
the trick, so I used the two extra left floated divs.

Any help?

Once you float something, it becomes a floated block implicitly, whether
you set display: inline on it or not.

A floated block can't be aligned with vertical-align-- that only applies
to inline elements (and table cells, where it means something
different).

You could use inline-blocks but they are not supported in older versions
of Firefox or IE.

Probably best to keep all that stuff inline and not floated-- the
"Engraphe e eisodos sto sustema:" bit and the form.

Or you could use display: table-cell or a table if you really need
block-like behaviour for the individual things on the line, but looking
at it I can't see why you would.

Harris Kosmidhs wrote:

Hello,

I 'm in the process of developing this site http://test.artcut.gr/

I have a problem with #index-login. I want the form to be middled
aligned with the first sentence (I know it's greek and you can't
understand it).

The form is in a left floated div so as not to appear as block element.
I don't know why but putting form {display:inline;float:left} did't do
the trick, so I used the two extra left floated divs.

Just modifying what you have to give you what you want.
I'm not saying that what you have is the best way.
(i.e. Spans instead of divs and no floats is another way.)

Add .5em top padding to the first sentence div.
Also add 2em (or so) left padding to the form div to separate.
An example:

<div class="grid_12 small" id="index-login">
<div class="left" style="padding-top:.5em;">
<a href="/users/register" title="εγγραφή στο site">Eγγραφή</a>
ή είσοδος στο σύστημα:
</div>
<div class="left" style="padding-left:2em;">
<form id="UserLoginForm" .................

Tested in Firefox only. If other browsers have problems with it, then
use margin instead of padding.

--
Gus

Gus Richter wrote:

Just modifying what you have to give you what you want.
I'm not saying that what you have is the best way.
(i.e. Spans instead of divs and no floats is another way.)

Add .5em top padding to the first sentence div.
Also add 2em (or so) left padding to the form div to separate.
An example:

div class="grid_12 small" id="index-login"
div class="left" style="padding-top:.5em;"
a href="/users/register" title="εγγραφή στο site">Eγγραφή</a
ή είσοδος στο σύστημα:
/div
div class="left" style="padding-left:2em;"
form id="UserLoginForm" .................

Tested in Firefox only. If other browsers have problems with it, then
use margin instead of padding.

Though that does the trick and thank you, I would like to hear your
approach on this.

Harris

Harris Kosmidhs wrote:

Gus Richter wrote:

Just modifying what you have to give you what you want.
I'm not saying that what you have is the best way.
(i.e. Spans instead of divs and no floats is another way.)

Add .5em top padding to the first sentence div.
Also add 2em (or so) left padding to the form div to separate.
An example:

div class="grid_12 small" id="index-login"
div class="left" style="padding-top:.5em;"
a href="/users/register" title="εγγραφή στο site">Eγγραφή</a
ή είσοδος στο σύστημα:
/div
div class="left" style="padding-left:2em;"
form id="UserLoginForm" .................

Tested in Firefox only. If other browsers have problems with it, then
use margin instead of padding.


Though that does the trick and thank you, I would like to hear your
approach on this.

Harris

If attempts to readjust the form's alignment in relation to the text is
problematic, then readjust the text's alignment in relation to the form.

But if you refer to my "another way", then try this:

<div class="grid_12 small" id="index-login">
<p style="display:inline;"><a href="/users/register"
title="εγγραφή στο site">Eγγραφή</a> ή είσοδος στο σύστημα: </p>

<form style="display:inline;padding-left:2em;" id="UserLoginForm"
method="post" action="/users/login">
<fieldset style="display: none;">
<input name="_method" value="POST" type="hidden">
</fieldset>

<label for="UserEmail">Email</label>
<input id="UserEmail" value="" maxlength="100" name="data[User]"
type="text">

<label for="UserPassword">Password</label>
<input id="UserPassword" value="" name="data[User][password]"
type="password">

<input value="είσοδος" type="submit">
</form>
</div>

--
Gus