473,327 Members | 1,952 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Grouping without tables

Hi all,
I'm trying to lay out 3 text boxes with associated labels horizontally,
as in the following pseudocode:

<form>
TITLE
label1 label2
label3
edit1 edit2
edit3
</form>

Specifically, I want the three text boxes spaced evenly horizontally
with their associated labels aligned on top of each.

How do I do this without tables?

Sean D.

May 11 '06 #1
7 1369
On Thu, 11 May 2006 16:29:06 +0200, lo*******@yahoo.com
<lo*******@yahoo.com> wrote:
<form>
TITLE
label1 label2
label3
edit1 edit2
edit3
</form>

Specifically, I want the three text boxes spaced evenly horizontally
with their associated labels aligned on top of each.


Hard to say without having the actual code, but maybe this mockup give you
a direction to find an answer:

form, label3, edit3 {
width:$formwidth; }

label1, label2, edit1, edit2 {
width:1/2*$formwidth; }

label3,edit3 {
text-align:center; }

label1, edit1 {
text-align:left; }

label2, edit2 {
text-align:right; }
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
May 11 '06 #2
lo*******@yahoo.com wrote:
How do I do this without tables?


Well you could do it with tables. If what you want more than anything
is a grid-based layout, then tables are where it's at.

If you think about how you'd like it to re-size for narrow windows, and
if you'd like the "columns" to keep their reasonable width and for one
to drop down below the others (rather than squeezing all the columns
narrower and narrower) then you could use a typical CSS 3-column
layout. Each vertical pair goes into a <div>, and each <div> gets
float:left; applied to it. The subtleties aren't trivial, so read a
good example first of how to code this (bluerobot, glish and brainjar
sites should all be read first).

What I wouldn't do is to apply float styles to the items on each row
independently. This will make them appear side-by-side, but it won't
preserve alignment of the vertical groups very well.

May 11 '06 #3
lo*******@yahoo.com wrote:
I'm trying to lay out 3 text boxes with associated labels horizontally,


Wrong idea, since it greatly reduces accessibility. Consider how awkward
it is when a browser reads all labels first and the user then has to
remember which field is for which data. Using <label> elements would
solve this problem only partially, so it is better not to create it in
the first place.
May 11 '06 #4
On 11 May 2006 07:49:53 -0700 di*****@codesmiths.com wrote:

| float:left; applied to it. The subtleties aren't trivial, so read a
| good example first of how to code this (bluerobot, glish and brainjar
| sites should all be read first).

It would be nice, IMHO, to have a site which gave examples for each of
the common questions asked. Bluerobot has too few examples. Glish is
just too much of a blog. And Brainjar is more oriented to tutorials.
How about a genuince direct resource. It would list the various things
people ask, such as in FAQ style, and for each, both explain how it is
done, and give at least one simple example in CSS and HTML (more examples
and complex examples, in addition to the simple one, are fine, too).

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 11 '06 #5
On Thu, 11 May 2006 20:25:06 +0300 Jukka K. Korpela <jk******@cs.tut.fi> wrote:

| lo*******@yahoo.com wrote:
|
|> I'm trying to lay out 3 text boxes with associated labels horizontally,
|
| Wrong idea, since it greatly reduces accessibility. Consider how awkward
| it is when a browser reads all labels first and the user then has to
| remember which field is for which data. Using <label> elements would
| solve this problem only partially, so it is better not to create it in
| the first place.

A better system would provide means to semantically mark things up exactly
for what they are, AND give exactly the desired visual presentation to the
full display capabilities, while still allowing tools that understand the
semantic markups to do the right thing and not confuse the user of limited
accessibility. Maybe one day we'll have that better system. CSS3 seems
to be a step in the right direction. More is needed.

--
-----------------------------------------------------------------------------
| Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
| (first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------
May 12 '06 #6
<lo*******@yahoo.com> wrote in message
news:11*********************@i40g2000cwc.googlegro ups.com...
Hi all,
I'm trying to lay out 3 text boxes with associated labels horizontally,
as in the following pseudocode:

<form>
TITLE
label1 label2
label3
edit1 edit2
edit3
</form>

Specifically, I want the three text boxes spaced evenly horizontally
with their associated labels aligned on top of each.

How do I do this without tables?

Sean D.


This could symantically be a definition list. However, to lay out such you
would have to use absolute positioning (because the dt and dd elements
aren't nicely bundled together in a containing element).

eg.

html

<dl>
<dt id="1">Label 1</dt>
<dd>edit 1</dd>
<dt id="2">Label 2</dt>
<dd>edit 2</dd>
<dt id="3">Label 3</dt>
<dd>edit 3</dd>
</dl>

style

/*relative positioning sets this as the containing block*/
dl {display: block; position: relative; top: 0; left: 0; height: 3em}
/*set the height, width and margin of the blocks for nice spacing*/
dt, dd {display: block; height: 1.3em; width: 32%; margin: 0.1em 0.6%}
/*position the blocks*/
dt {position: absolute; top: 0}
dd {position: absolute; top: 1.5em}
#1, #1 + dd {left: 0}
#2, #2 + dd {left: 33.3%}
#3, #3 + dd {left: 66.7%}
May 16 '06 #7
"Martin Eyles" <ma**********@NOSPAMbytronic.com> wrote:
Specifically, I want the three text boxes spaced evenly horizontally
with their associated labels aligned on top of each.
- - This could symantically be a definition list.
Symantically indeed. I guess "symantic" is a contamination of "syntactic"
and "semantic". If you don't have a list of _terms_ with their _definitions_
(expressions that specify what the terms mean), you don't have a definition
list - semantically.
However, to lay out such you would have to use absolute positioning
(because the dt and dd elements aren't nicely bundled together in a
containing element).


The dl, dt, and dd tags easily lead into problems in styling. That's one
reason to avoid them. But using absolute positioning would be overkill here.

There's no reason not to use a table in a case like this. It falls under any
reasonable interpretation of "tabular data", and it leads into the basic
layout even without CSS, and can easily be tuned in CSS as desired. (The
original _goal_ of making a label appear above its field is wrong, though.
It's bad for accessibility and deviates the sound principle of doing as
everyone else does unless you have a good reason to do otherwise: put the
label and the field on the same line.

May 16 '06 #8

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

Similar topics

0
by: JohnnyOnTheSpot | last post by:
If I select from a table and, for example, group by the month or day to determine how much activity there is day to day or month to month, it will only return months and days with a record and...
3
by: ahaque38 | last post by:
Hello. Using A2K SP3, I am having the following problem with a report using "Sorting and Grouping". I have recently added a grouping in the reports for "Category2<>'CONTRACTS'". I have...
8
by: Mike MacSween | last post by:
tblCourses one to many to tblEvents. A course may have an intro workshop (a type of event), a mid course workshop, a final exam. Or any combination. Or something different in the future. At...
1
by: Megan | last post by:
quick summary: i'm having problems trying to group fields in a report in order to calculate percentages. to calculate percentages, i'm comparing the results from my grouped fields to the totals....
3
by: ChadDiesel | last post by:
I'm new to Access and need some advice. I am trying to setup a database to print labels and reports for our shipments. I have set up a table with fields such as I have taken a snapshot of what...
1
by: Jonathan Woods | last post by:
Hi there, How do i handle grouping same level of data at run time? or any idea? user can view data according to their selection group on the windows form. for example: In customer table,...
0
by: mafandon | last post by:
This seems easy, but can't seem to get past it. Using VB 2005. In my report viewer for a windows forms app not using sql 2005 reporting services. I can get the grouping to work just fine and...
4
by: Chris | last post by:
I tried to retrieve the digit grouping symbol in MSAccess but unfortunately 3;0 is retrieved instead of comma which is my symbol. Function retrieves decimal symbol and list separator without any...
12
kcdoell
by: kcdoell | last post by:
Hello: I just learned how to put crosstabs queries together but this one in particular is adding a new dimension in which I was hoping someone could give me some direction. I have the following...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.