Prev: How to wrap text in <p> tag if the text has no spaces and isvery long
Next: z_index, Icab is odd man out
From: lawpoop on 11 Apr 2008 14:42
On Mar 11, 6:58 pm, Bergamot <berga...(a)visi.com> wrote:
> Post a URL so we can see what you have done. Do not post code.

Berg, thanks for taking the time to look at this. Here is the URL
( sorry for the delay in response):

http://nerdcraft.net/survey.html

I have the grid of 1-5 questions and radio button answers layed out in
a table. I couldn't find a tutorial for a css grid, so I hacked it for
now. Ideally, I would like to have the question layout in css.

Problems with the progress bar:
In IE, the css progress bar is properly center aligned, but the
progress part is also center aligned within the bar , which is a
problem. The progress part should right left-aligned.

In firefox, the progress area is properly left-aligned, but the whole
bar is left-aligned. I want it to be in the center.
Also, in firefox, the 'add comment' part is broken -- it extends the
content area down past the footer.

I'm thinking the progress bar would also be easier to do as a table,
with fixed pixel widths, instead of css.


From: Bergamot on 12 Apr 2008 18:28
lawpoop(a)gmail.com wrote:
> On Mar 11, 6:58 pm, Bergamot <berga...(a)visi.com> wrote:
>> Post a URL so we can see what you have done. Do not post code.
>
> http://nerdcraft.net/survey.html
>
> I have the grid of 1-5 questions and radio button answers layed out in
> a table. I couldn't find a tutorial for a css grid, so I hacked it for
> now. Ideally, I would like to have the question layout in css.

Why? the radio buttons look like tabular data to me. Use a table, except
don't use icky presentational HTML attributes, like align=center. Mixing
HTML and CSS styles will only make a mess, and a real PITA to maintain.
BTW, putting the radio buttons in a table doesn't mean the whole page
needs to be in a table.

And use a better doctype. The one in that test page triggers quirks
mode, which will not give consistent results across browsers as you've
already discovered. Use HTML 4.01 strict if you want the best compatibility.

> In firefox, the progress area is properly left-aligned, but the whole
> bar is left-aligned. I want it to be in the center.

Drop the align=center on that cell - that is for aligning text within
the block, not for aligning blocks themselves. Look up margin:auto

--
Berg
From: lawpoop on 12 Apr 2008 23:51
On Apr 12, 6:28 pm, Bergamot <berga...(a)visi.com> wrote:

> Why? the radio buttons look like tabular data to me. Use a table, except
> don't use icky presentational HTML attributes, like align=center. Mixing
> HTML and CSS styles will only make a mess, and a real PITA to maintain.
> BTW, putting the radio buttons in a table doesn't mean the whole page
> needs to be in a table.

So what exactly is the complaint people make about using table tags
for 'tabular data'? This certainly isn't a train schedule or a chart
in table format.
When they say 'tabular data', do they mean simply 'grid'?

Do the labels for the radio buttons also belong in the table? I'd
assume so; I can't imagine how you get them to line up with their
radio buttons without it.

> And use a better doctype. The one in that test page triggers quirks
> mode, which will not give consistent results across browsers as you've
> already discovered. Use HTML 4.01 strict if you want the best compatibility.
>
> > In firefox, the progress area is properly left-aligned, but the whole
> > bar is left-aligned. I want it to be in the center.
>
> Drop the align=center on that cell - that is for aligning text within
> the block, not for aligning blocks themselves. Look up margin:auto

Awesome! Thanks, Berg!
From: lawpoop on 13 Apr 2008 00:09
Or, let me ask a more general question: Is an html table an
appropriate way to align any set of elements of an HTML page that are
to be in a grid layout?

Or is there a pure css way to do a grid-style layout? Something where
you wanted, say, two rows and four columns of some elements, that all
have the same width and spacing distribution?
From: dorayme on 13 Apr 2008 04:16
In article
<085e9945-c12f-4121-add3-e75cd826d5bd(a)b1g2000hsg.googlegroups.com>,
lawpoop(a)gmail.com wrote:

> Or, let me ask a more general question: Is an html table an
> appropriate way to align any set of elements of an HTML page that are
> to be in a grid layout?
>

There is an idea that a grid does not necessarily imply anything more
than a set of shapes and that you should not use a html table for where
you need no more than a visual arrangement that does not relate
information in rows and columns.

Even though the whole basis of this distinction is not as clear as most
church goers think, best to get the idea first.

The reason you have been advised to use a table is not because of the
purely visual look of a grid but because a cell in which you place a
button is logically related to the information in the cell adjoining it
in the same row (or something like this).

> Or is there a pure css way to do a grid-style layout? Something where
> you wanted, say, two rows and four columns of some elements, that all
> have the same width and spacing distribution?

Yes there is. There are difficulties for some situations that sort of
fit your description, given that not all browsers respect all the CSS
2.1 recommendations or differ amongst themselves for other reasons.

You might read something like:

<http://www.456bereastreet.com/archive/200410/bring_on_the_tables/>

and follow some of the links....

--
dorayme
 |  Next  |  Last
Pages: 1 2 3
Prev: How to wrap text in <p> tag if the text has no spaces and isvery long
Next: z_index, Icab is odd man out