I appreciate this is probably a fairly basic CSS question, but if
anyone is feeling charitable, maybe they would point me in the right
direction:
I'm trying to create a form on a web page and want to have a series of
text boxes for input with an appropriate label to the left of each
box. For a neater appearance, I'd like the left hand edge of each of
the input boxes to line up. If I was doing this in a word processor,
probably I'd just use the Tab key - several times if necessary - to
separate the label from its input box and have the left edge of all
the input boxes aligned.
But I can't readily see how to do this in CSS - at least not without
using say a 2 column or maybe table layout, which is not necessarily
very efficient for presenting and editing paired items on the same
line.
What I had been trying to do was eg:
<p>Name<span class="formbody2"><input type="text" name="Name"
size="50"></span></p>
<p>Address<span class="formbody2"><input type="text" name="Address1"
size="50"></span></p>
and setting a wider left margin in "formbody2", but this seems in
practice to start counting the margin from the end of the label text,
which is obviously on a different position on each line - in IE6 at
least. So this approach fails.
Hmmm, a long explanation for what is actually a very simple
requirement, but hopefully it makes sense. If anyone can help I'd be
much obliged.
JGD 2 3058
On Wed, 28 Apr 2004 15:32:14 +0100, John Dann <ne**@prodata.co.uk> wrote: I appreciate this is probably a fairly basic CSS question, but if anyone is feeling charitable, maybe they would point me in the right direction:
I'm trying to create a form on a web page and want to have a series of text boxes for input with an appropriate label to the left of each box. For a neater appearance, I'd like the left hand edge of each of the input boxes to line up. If I was doing this in a word processor, probably I'd just use the Tab key - several times if necessary - to separate the label from its input box and have the left edge of all the input boxes aligned.
But I can't readily see how to do this in CSS - at least not without using say a 2 column or maybe table layout, which is not necessarily very efficient for presenting and editing paired items on the same line.
What I had been trying to do was eg:
<p>Name<span class="formbody2"><input type="text" name="Name" size="50"></span></p> <p>Address<span class="formbody2"><input type="text" name="Address1" size="50"></span></p>
This HTML won't do well for your needs. I have no time to test this this
morning, but this may work.
<div><label for="name">Name</label><input type="text" name="name"
id="name"></div>
<div><label for="add">Address</label><input type="text" name="add"
id="add"></div>
div {
clear: left;
}
div label {
float: left;
width: 10em;
}
John Dann wrote: I'm trying to create a form on a web page and want to have a series of text boxes for input with an appropriate label to the left of each box. For a neater appearance, I'd like the left hand edge of each of the input boxes to line up.
I can't readily see how to do this in CSS
Float the label left, and give it an assigned width. Example here: http://www.julietremblay.com/contact/
- at least not without using say a 2 column or maybe table layout
What you're doing is arguably a table: one column for label, the other
for input. Example of that approach here: http://www.tsmchughs.com/contact/
Note that on that page, I have a 3rd column for editing messages,
available when js is enabled. You can skip that 3rd column.
What I had been trying to do was eg:
<p>Name<span class="formbody2"><input type="text" name="Name" size="50"></span></p> <p>Address<span class="formbody2"><input type="text" name="Address1" size="50"></span></p>
Well, don't use inappropriate markup. It isn't a paragraph, so don't use
<p> markup.
--
Brian (remove "invalid" from my address to email me) http://www.tsmchughs.com/ This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Jochen Daum |
last post by:
Hi,
I have to emulate a "file upload" to a Java Servlet which is done with
the class URLConnection.
The java source basically does
URLConnection conn =...
|
by: Gordan |
last post by:
mysql> select aes_encrypt('gordan', 'abc');
+------------------------------+
| aes_encrypt('gordan', 'abc') |
+------------------------------+
| p§Èb9??_é?0ö?LIÝ |...
|
by: Kamilche |
last post by:
"""
Emulating Python inheritance manually.
By loading it from disk at run time, you can create new custom types
without programmer intervention, and reload them on demand,
without breaking...
|
by: Anthony Williams |
last post by:
Good morning,
I'm currently designing a site, using CSS, and wish to create a variable
width two-column layout, with header and footer, and one fixed-width column
on the left.
Previously, I...
|
by: Cezar |
last post by:
Hello.
How can simple emulating in IE this class ?
..example:hover{
border: 1px solid #696969;
}
Greets,
Cezar.
|
by: Bart |
last post by:
Hi there,
Since you've all told me that frames ar evil, I'm planning to disguard
frames in favour of CSS "pseudo-frames" for my personal website.
While trying to "emulate frames" (that is I...
|
by: steve |
last post by:
As my other post shows, every once in a while I get MYI corruption
(anyone can help with the other post?).
Now, how do I emulate MYI corruption on the dev machine. Can I
somehow force MYI to...
|
by: Stephan Schaem |
last post by:
How does one write an unmanaged function that perform this functionality?
In short I want to turn off/on visual style in my app...
Thanks,
Stephan
PS: two people have been looking for...
|
by: Peter Lin |
last post by:
hey people,
I don't know about you guys but I find the .net version of printdocument
for printing is a little bit tiresome with much more control than I
want. So I have been attempting to write...
|
by: Ray |
last post by:
Hello,
What do you think about emulating private variables for a class this
way?
function Something() {
var private;
Something.prototype.getPrivate = function() { return private; }...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
| |