Vertical alignment of a form

J

Jakob Rohde

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
 
E

Els

Jakob said:
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?
 
J

Jakob Rohde

Els said:
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
 
E

Els

Jakob said:
Els wrote:

[vertically centering form element in table cell]
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?
 
J

Jakob Rohde

Els said:
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
 
E

Els

Jakob said:
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?
 
D

Dylan Parry

Els said:
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 :)
 
E

Els

Dylan said:
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 said:
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 ;-)
 
J

Jakob Rohde

Els said:
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...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top