473,846 Members | 1,962 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2259
la*****@gmail.c om 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************ *************** *******@b1g2000 hsg.googlegroup s.com>,
la*****@gmail.c om 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.456bereastr eet.com/archive/200410/bring_on_the_ta bles/>

and follow some of the links....

--
dorayme
Jun 27 '08 #5
On 2008-04-13, la*****@gmail.c om <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.c om 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.c om 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
5761
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 vertical align doesn't work in Mozilla): http://zintel.com/homepics.html I've used combinations of <center>, style align 'center', table cell align, valign and height='100%' to get what I want, but I wonder if CSS can do it by itself.
4
2278
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 a website for a non-profit club and I and they were happy with the design and layout. I did not discover a problem with what I had until I was testing all browsers for compatibility. The following page...
1
7907
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 100% and vertically center content inside of it. Therefore, I'm seeking a way, preferably in CSS to vertically center a site. Here's more of a visual to what I have: /********************************
2
2615
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 resources online and realize that my case may be a bit more challenging. I'm trying to create a table-less layout that looks something like:
6
1397
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();" in the body tag. Works fine for IE. How do I make it compatible with netscape and most browsers? Better yet, is there a good single source that explains how to write javascript to be compatible with all browsers? 766 and 435 are the width and...
5
4833
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 doing this demo with tables. The main problems are the vertical centering of the info area, and of the text inside the squares.
2
3069
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 and the number of them can vary greatly. They are all contained within a parent table cell, which is centred on the page. But I am unable to find a way of centering these table cells within the parent cell.
9
7280
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
5300
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 horizonally and vertically centered within a <TD> </TD> area. No matter what I do the two image just present one above the other, albeit centered, NOT on top of each other. I originally did the entire page layout in TABLES until I found out I.E. 7...
0
9879
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9725
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
10640
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
10330
tracyyun
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7877
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
5714
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...
1
4521
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4111
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3157
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.