473,226 Members | 1,639 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,226 software developers and data experts.

Re: css for centering a 'table' in a layout

On Mar 11, 6:58 pm, Bergamot <berga...@visi.comwrote:
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.
Jun 27 '08 #1
7 2239
la*****@gmail.com wrote:
On Mar 11, 6:58 pm, Bergamot <berga...@visi.comwrote:
>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
Jun 27 '08 #2
On Apr 12, 6:28 pm, Bergamot <berga...@visi.comwrote:
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!
Jun 27 '08 #3
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?
Jun 27 '08 #4
In article
<08**********************************@b1g2000hsg.g ooglegroups.com>,
la*****@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
Jun 27 '08 #5
On 2008-04-13, la*****@gmail.com <la*****@gmail.comwrote:
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?
Supposedly not. You're only meant to use an HTML table if there's
something abstractly tabular about the data independently of how it
might be displayed.

"Abstractly tabular" is a contrived idea since really a table is a kind
of presentation.

Perhaps a better criterion is whether the table layout is part of the
meaning of the data.
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, you just put display: table, display: table-row, display:
table-cell etc. on the elements you want to be tables, rows and cells.
It should all work exactly the same (but with the added feature that you
can leave out bits of the structure and have it filled in for you in a
defined way). It doesn't work in IE.
Jun 27 '08 #6
la*****@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?
It depends on what you mean by "grid". A data grid has relationships
between rows and columns, and is tabular. If you're thinking of the
general design principle of grid layouts, that's not tabular. In your
case there was a direct relationship between the radio button and its
corresponding label, as well as the buttons as a group. Granted, it
could have been laid out various ways, but a table is not wrong for
this, IMO.
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?
There are plenty of CSS templates with varying numbers of columns.

--
Berg
Jun 27 '08 #7
On 13 Apr, 05:09, lawp...@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?
Yes!
Or is there a pure css way to do a grid-style layout?
No.

To get "grid like" behaviour (the grid relations between cells take
precedence over other size or positioning constraints applied to
cells) you must apply the CSS "table-*" property values and behaviours
to the CSS display property. You can do this most easily by using the
default CSS properties for <table>.

You may also do this by applying these same CSS values to a <div(or
any suitable element) through a stylesheet. However this isn't
recommended - it's not supported by all browsers, and as it was
originally added to the CSS specification as a means of working with
CSS + XML rather than HTML, there's no pressing need why its support
should ever be extended for HTML in general.
Jun 27 '08 #8

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

Similar topics

19
by: George Ziniewicz | last post by:
.. I try to use CSS when possible, though I am still learning and don't maximize its use. In particular, I still use a table to provide for a centered image in a few slideshows (though table...
4
by: Justin Archie | last post by:
The subject says it all my friends. I have searched google to death about centering problems and for some reason no one seems to have the error I have. For the past few days I have been working on...
1
by: Kenneth | last post by:
Okay, I've been scouring Google for hours looking for a solution to this problem, but as of yet I can't find one. XHTML Transitional seems to specify that I can no longer set a table's height to...
2
by: kevinC | last post by:
Hello, I know most of you are probably going seeing positioning:absolute; and centering in the title and saying, oh no! not again! Do a google search! Actually, I've found many helpful...
6
by: Simon Wigzell | last post by:
I have the following funciton that centers my website content for any size window and will center it in real time as the window is expanded or shrunk. It is activated by a onresize="CenterIt();"...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
2
by: rudicheow | last post by:
SHORT VERSION ============= I have a bunch of identical fixed-size single-celled tables that rest against each other horizontally thanks to "float:left". These tables are dynamically generated...
9
by: Neal | last post by:
http://www.brassattackofspringfield.com/gigs.html CSS at http://www.brassattackofspringfield.com/default.css Opera and IE render caption as desired. Firefox does not. Why? And is there a fix?
4
by: harryusa | last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.