By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

Displaying form elements in a block

P: n/a
CJM
I'm adding some extra features to an intranet-based ASP application...

As part of the process, I thought I would give the html a mid-life upgrade,
ie. remove much of the tag-soup, replace with CSS and validate.
I'm not introducing full CSS-P at this stage, but where I can I'm trying
make inprovements.

The page uses a 3 frame layout. The left frame contains a form with a
textbox and a number of buttons (<input type="button">).
[No, I wish it didn't use frames either - but short of re-writing the whole
app, I have no choice]

Rather than bind the form in a table, I'm trying to use CSS-P determine the
layout. I've tried using display:block at various points but cant get the
results I want. [the elements just dont seem to react!]

So how do I get the following to display as a vertical list of elements?

<body>
<form>
<input type="button">
<input type="text">
<input type="button">
<input type="button">
</form>
</body>

Apologies for the pseudo-code - I'm still working on getting the 'real' code
to validate, and I didn't want to cloud the issue.

Thanks

Chris
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
CJM wrote:
...
Rather than bind the form in a table, I'm trying to use CSS-P
...
So how do I get the following to display as a vertical list of
elements?

<body>
<form>
<input type="button">
<input type="text">
<input type="button">
<input type="button">
</form>
</body>
does this help? http://www.williamtasso.com/contact.asp
Apologies for the pseudo-code - I'm still working on getting the
'real' code to validate, and I didn't want to cloud the issue.


ahem: now don't start ;o)

--
William Tasso - http://WilliamTasso.com
Jul 20 '05 #2

P: n/a
CJM
> does this help? http://www.williamtasso.com/contact.asp


Er... not as much as I would like! I'm almost certainly missing a simple but
fundamental point. It's probably a typo somewhere.

I tried to create a cut-down page to demonstrate, but unfortunately I can't
upload it anywhere - a colleague has blocked all ftp traffic!
So instead, I've attached the cut-down code.

Apologies for the pseudo-code - I'm still working on getting the
'real' code to validate, and I didn't want to cloud the issue.


ahem: now don't start ;o)


Hey! Just trying to avoid the usual to-ing and fro-ing! Stop stirring, you
awkward b*gger! lol

Actually, it validates now, courtesy of c.i.w.a.h.

PS. I don't care much for your colour scheme, but I like your logo. Very
topical! Not sure our antipodean friends would approve! lol

Cheers

Chris
>>>>>>>>>>>>>>>>>>>>>>>

Code Snippet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>SND: Options</title>
<STYLE TYPE="text/css">
<!--
#options { display:block; }
-->
</STYLE>
</head>
<body>
<form method="post" id="frmOptions" name="frmOptions" action=""
target="content">
<div id="options">
<input class="btn" onclick="" type="button" value="Home" title="Back to
Homepage" id="Home" name="Home"></span>
<input type="text" id="SerialNo" name="SerialNo" size="9" onkeypress=""
<input size="" type="submit" id="ViewSN" value="View" name="ViewSN"
onclick='' class="btn" title="View Serial No">
<input onclick='' class="btn" type="submit" id="AddEdit"
value="Add/Edit" name="AddEdit" title="Add or Edit Serial No">
<input onclick='' class="btn" type="submit" id="Transfer"
value="Transfer" name="Transfer" title="Transfer Serial No">
<input onclick='' class="btn" type="submit" id="Invoice" value="Invoice"
name="Invoice" title="Invoice Serial No">
<input onclick='' class="btn_sml" type="submit" id="ChPwd" value="Change
Pwd" name="ChPwd" title="Change Password">
<input onclick='' class="btn_sml" type="submit" value="Logout"
name="Logout" title="Logout" id="Logout">
</div>
</form>
</body>
</html>
Jul 20 '05 #3

P: n/a
CJM wrote:
does this help? http://www.williamtasso.com/contact.asp

Er... not as much as I would like! I'm almost certainly missing a
simple but fundamental point. It's probably a typo somewhere.


each input element needs to be (or better contained in) a block level
element to get the effect you want.
...
PS. I don't care much for your colour scheme,
<sulk mode="frankenfurter">I didn't build it for you</sulk>
but I like your logo.
Very topical! Not sure our antipodean friends would approve! lol


he heh - glad to be of service

--
William Tasso - http://WilliamTasso.com
Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.