473,840 Members | 1,479 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

table-less layout & forms

Hi all

Are there any good solutions to aligning form field names and input boxes
without resorting to tables? I am struggling to do this nicely at the
moment.

Thanks
Ciao

Zak

--
=============== =============== =============== =============== ============
http://www.carfolio.com/ Searchable database of 10 000+ car specs
=============== =============== =============== =============== ============
Jul 20 '05 #1
39 5697
Zak McGregor wrote:

Are there any good solutions to aligning form field names and input
boxes without resorting to tables?


Assuming you have marked up the form with <label> for each form element:

assign a width to the label, and float it left. See
< http://www.julietremblay.com/site/contact.html >
not a table in site. I did this page, so ask if you have questions
about what's there.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #2
On Wed, 09 Jul 2003 07:09:15 +0200, Brian <"Brian"
<br***@wfcr.org .invalid-remove-this-part>> wrote:
Zak McGregor wrote:

Are there any good solutions to aligning form field names and input
boxes without resorting to tables?


Assuming you have marked up the form with <label> for each form element:

assign a width to the label, and float it left. See <
http://www.julietremblay.com/site/contact.html > not a table in site. I
did this page, so ask if you have questions about what's there.


Thanks, but label support[1] is not great and in some browsers it displays
buggily when given a display: css rule. Mozilla springs to mind for
example.

I have subsequently found this:
http://studioid.com/cgi-bin/links/jump.cgi?ID=444

which goes some way to sorting me out.

Ciao

Zak
[1] I'm not sure that the label tag is meant for this either, which may
explain some bugginess wrt the displaying of it.
--
=============== =============== =============== =============== ============
http://www.carfolio.com/ Searchable database of 10 000+ car specs
=============== =============== =============== =============== ============
Jul 20 '05 #3
[snip]

Right, I'm going to be flambed for this, but IMHO css is unable to handle
laying out something as simple as a form. Why on earth did css end up
being so absolutely crap at placing elements on an html page? You can
place elements, sure, I do not dispute that, but you've got a choice between
liquid design _or_ reasonable positioning.

</grumble>

--
=============== =============== =============== =============== ============
http://www.carfolio.com/ Searchable database of 10 000+ car specs
=============== =============== =============== =============== ============
Jul 20 '05 #4
Zak McGregor <za*@mighty.co. za> wrote in news:beg6a8$mge $1@ctb-
nnrp2.saix.net:
Are there any good solutions to aligning form field names and input boxes
without resorting to tables? I am struggling to do this nicely at the
moment.


Does this help?
http://www.webweaver.org/dan/css/cssforms.html

--
Kayode Okeyode
Jul 20 '05 #5
In article <be**********@c tb-nnrp2.saix.net> , Zak McGregor wrote:
Hi all

Are there any good solutions to aligning form field names and input boxes
without resorting to tables?
Yes.
I am struggling to do this nicely at the moment.


And your form is where? URL?. And your description of how it should look?

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #6
Zak McGregor wrote:
Are there any good solutions to aligning form field names and input
boxes without resorting to tables?
Assuming you have marked up the form with <label> for each form element:

assign a width to the label, and float it left. See
http://www.julietremblay.com/site/contact.html


Thanks, but label support[1] is not great and in some browsers it displays
buggily when given a display: css rule. Mozilla springs to mind for
example.


The form I designed (url above) looks quite nice in Mozilla, thank you
very much. :) Also works on O7/Win, IE5-5.5-6.0/Win, IE5.x/Mac,
N7/Mac, N7/Win.

I just tested display: block, inline, and none in Moz 1.3/Win on the
form in question. All 3 worked. Do you have any examples where it
does not work?
I have subsequently found this:
http://studioid.com/cgi-bin/links/jump.cgi?ID=444
which recommends using the <label> element.
I'm not sure that the label tag is meant for this either, which may
explain some bugginess wrt the displaying of it.


Pardon? That's what the label element is for. Why else would you use it?

http://www.w3.org/TR/html401/interac...tml#edef-LABEL
--
Brian
follow the directions in my address to email me

Jul 20 '05 #7
Zak McGregor wrote:

Right, I'm going to be flambed for this
No flames here. But I am going to correct you where I believe you are
wrong.
but IMHO css is unable to handle laying out something as simple as
a form.
Here's the url (again):
http://www.julietremblay.com/site/contact.html

The layout was done with css. Not with tables. Now, you were saying?
Why on earth did css end up being so absolutely crap at placing
elements on an html page?
I don't know what you are looking for. I can imagine, but I'd rather
let you state what you are after, keeping in mind the medium(s).
You can place elements, sure, I do not dispute that, but you've got
a choice between liquid design _or_ reasonable positioning.


css is about flexible design, which is what I think you mean by liquid.

You are making bogus generalizations , the sort that trolls commonly
use to start arguments. If you are looking for help, ask for it --
without vague complaints that css is "crap." Then you won't see any
flames.

--
Brian
follow the directions in my address to email me

Jul 20 '05 #8
On Wed, 09 Jul 2003 18:09:56 +0200, Lauri Raittila <"Lauri Raittila"
<la***@raittila .cjb.net>> wrote:
In article <be**********@c tb-nnrp2.saix.net> , Zak McGregor wrote:
[snip]

Right, I'm going to be flambed for this,


For reason.


Or not, possibly.
but IMHO css is unable to handle
laying out something as simple as a form. Why on earth did css end up
being so absolutely crap at placing elements on an html page?


You mean, IE don't support CSS. CSS3 will enable lot more, but there is
no hurry untill even current CSS is supported by _some_ browser.


Nope, I mean even my spiffy Mozilla with better-than-most CSS support
will struggle to do the simplest two-column layout with CSS without
hard-coding things like margin-left or other fixed-width foppery.
You can
place elements, sure, I do not dispute that, but you've got a choice
between liquid design _or_ reasonable positioning.


And with HTML you have? How?


A basic grid made with a table, with % widths on tds.

I have yet to see a reasoned explanation why a simple table (ie no
nesting) is any worse than nested and floated divs in terms of
accessibility. Would you like to try?

Ciao
Zak
--
=============== =============== =============== =============== ============
http://www.carfolio.com/ Searchable database of 10 000+ car specs
=============== =============== =============== =============== ============
Jul 20 '05 #9
On Wed, 09 Jul 2003 20:18:37 +0200, Brian <"Brian"
<br***@wfcr.org .invalid-remove-this-part>> wrote:
Zak McGregor wrote:

Right, I'm going to be flambed for this
No flames here. But I am going to correct you where I believe you are
wrong.


Fine, let's reason this out on that level :)
but IMHO css is unable to handle laying out something as simple as a
form.


Here's the url (again):
http://www.julietremblay.com/site/contact.html

The layout was done with css. Not with tables. Now, you were saying?


I was saying that the <label> element is supported to differnt degrees on
different browsers. I have been convinced that your use of it is perfectly
within the spec from w3.

In terms of label displaying buggily, at least on Mozilla, I *know* that
to be the case as my very first attempt at table-less CSS forms was
exactly your approach. It was scuppered by Mozilla not displaying label
elements correctly even when explicitly given display: directives in the
CSS. I forget the specific Moz version though, sorry. Can't find my
bugzilla entry for that either, even though I'm pretty sure I did file a
bug report.
Why on earth did css end up being so absolutely crap at placing
elements on an html page?


I don't know what you are looking for. I can imagine, but I'd rather
let you state what you are after, keeping in mind the medium(s).


In a nutshell, I want to easily position at least 2 elements side-by-side
on an html page with the following requirements:

- their heights are the same
- they are positioned without hard-coding margins or widths or position. -
their widths are flexible and determined by their content, not by any
specific css values.

A further thing that I would *like* but is not a neccessity is that the
elements are not nested. IE I would prefer to not see <elem>
<nested_elem1 ></nested_elem1>
<nested_elem2 ></nested_elem2>
</elem>

That is it, I think.
You can place elements, sure, I do not dispute that, but you've got a
choice between liquid design _or_ reasonable positioning.


css is about flexible design, which is what I think you mean by liquid.


What I mean by liquid is that it can handle different displays, types of
displays and resolutions without breaking. Using any fixed-width
positioning in particular will break such design instantly. CSS cannot be
used to position elements on a page (assuming you need more than
top-to-bottom positioning) without one of a float: or position: directive,
either of which creates a need for hardcoded margins or positions. Float
because the floated element then is excluded from calculations on
positioning other elements relative to it, the position: directive
obviously also needs hard-coded values in order to place it alongside
another element.

Obviously CSS loses some meaning especially with respects to any sort of
positioning when certain classes of UA encounter it. That does not mean
(IMHO) that for those classes of UAs that can handle and should respond to
CSS positioning directives that they should have difficulty rendering
liquid designs done in CSS.
You are making bogus generalizations , the sort that trolls commonly use
to start arguments. If you are looking for help, ask for it -- without
vague complaints that css is "crap." Then you won't see any flames.


If I use emotive terms, it is because I am frustrated that a good theory
has been (IMHO) completely fscked up in practice. For whatever reason.

My complaint was not in the slightest bit vague or bogus though. My
statement was "Why on earth did css end up being so absolutely crap at
placing elements on an html page?" which is not vague in the slightest.
Read it again in the original post for even more context for my statement.
In addition, it's not only "crap", but "_absolutel y_ crap".

Ciao

Zak

--
=============== =============== =============== =============== ============
http://www.carfolio.com/ Searchable database of 10 000+ car specs
=============== =============== =============== =============== ============
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

15
2679
by: Xah Lee | last post by:
Here's the belated Java solution. import java.util.List; import java.util.ArrayList; import java.lang.Math; class math { public static List range(double n) { return range(1,n,1); }
4
6599
by: Gaz | last post by:
Hi, I need to have a table nested within another table. The tables are alongside each other visually speaking, and the nested table (on the right) can vary in size. My problem is that when the nested table has more rows than the first table, the first table (on the left) pads out its rows so that the table matches the height of the nested table. I don't want this it happen.. I just want the nested table to be longer than the first...
3
11397
by: Terrence Brannon | last post by:
I don't know what Postgres considers a relation and had no intention of creating one when piping my schema to it... I always DROP TABLE before CREATE TABLE, so here are the ERRORS emitted when building the database: 3:ERROR: table "country" does not exist 6:ERROR: table "customer" does not exist 11:ERROR: table "product" does not exist 15:ERROR: table "license" does not exist 19:ERROR: table "enduser" does not exist 24:ERROR: ...
4
15845
by: maricel | last post by:
I have the following base table structure - DDL: CREATE TABLE "ADMINISTRATOR"."T1" ( "C1" INTEGER NOT NULL ) IN "TEST_TS" ; ALTER TABLE "ADMINISTRATOR"."T1" ADD PRIMARY KEY
4
548
by: Simone Battagliero | last post by:
I wrote a program which inserts and finds elements in an hash table. Each element of the table is a dinamic list, which holds all elements having the same hash value (calculated by an int hashFunction(char *key, int elements) ), so the table is an array of dynamic lists. The version of the program I've attached to this message works fine; but it's the result of an accurate debugging. I discovered that my problems consisted in just 4 lines...
76
272648
MMcCarthy
by: MMcCarthy | last post by:
Normalisation is the term used to describe how you break a file down into tables to create a database. There are 3 or 4 major steps involved known as 1NF (First Normal Form), 2NF (Second Normal Form), 3NF (Third Normal Form) and BCNF (Boyce-Codd Normal Form). There are others but they are rarely if ever used. A database is said to be Normalised if it is in 3NF (or ideally in BCNF). These steps are descibed as follows: Note: When attribute...
7
4830
by: Kamal | last post by:
Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the expandable row, the hidden row is made visible with css. The problem is when i sort the rows, the hidden rows get sorted as well which i don't want and want to be moved (while sorting) relative to their parent rows. The following is my complete html code...
5
3852
by: wugon.net | last post by:
question: db2 LUW V8 UNION ALL with table function month() have bad query performance Env: db2 LUW V8 + FP14 Problem : We have history data from 2005/01/01 ~ 2007/05/xx in single big table, we try separate this big table into twelve tables and create a view
12
9143
by: Michael.Z | last post by:
Anyone who can help: Given a Table.h file I am writing a Table.c file. I keep getting the compile error: previous declaration of Table was here / conflicting types for I think the problem was the result of two pieces of code. First: typedef struct Table; /* in Table.c*/
5
4966
by: jrod11 | last post by:
hi, I found a jquery html table sorting code i have implemented. I am trying to figure out how to edit how many colums there are, but every time i remove code that I think controls how many colums there are, it crashes. There are currently 6 columns, and I only want 4. How do I remove the last two (discount and date)? Here is a link: http://www.jaredmoore.com/tablesorter/docs/salestable.html Here is some jquery js that I think...
0
9698
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10916
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10598
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9436
agi2029
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7836
isladogs
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5684
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5872
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4071
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3136
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.