Re: Converting Centered Table Rows to Divs/CSS

I have been reading the discussion on the conversion of centered table rows
to Div/CSS.  It seems an elegant approach and has been very interesting.
The many examples and web site references have been helpful too.

However, I just want to know if anyone can tell me why there is a need to
remove tables from use as a layout tool.  They work.  They are easy.  They
do not give you the problems you may have because of noncompliance to
standards by the many browsers or other issues because someone wants to have
"standards" in lieu of getting the job done.  I am not an evangelical about
these issues because I don't have the time.  But, maybe someone can help me
understand the need to remove tables and any other issues because of
standards or esthetics.

This is one of the best discussion forums I have used; this is not criticism
but intellectual curiosity.  Thanks for your response and keep up the fine
exchange of ideas and information.


----- Original Message -----
From: "Rod Hutson" <rbhutson(at)ieee.org>
To: <hwg-style(at)hwg.org>
Cc: <davida51(at)swbell.net>
Sent: Saturday, January 19, 2002 7:16 PM
Subject: Re: Converting Centered Table Rows to Divs/CSS


> Thanks for the many links, David, but I've visited each of these sites
> (extensively), and they don't speak to the problem I'm having... I've also
> surfed as many CSS-based websites as I could find, and not ONE of them
does
> what I'm looking for using CSS - I did find many embedding tables into
their
> CSS to achieve this affect.  My goal is to elminate tables (as used for
> element positioning) entirely.
>
> I know how to put up three columns using divs and CSS (in fact, I'm using
> the bluerobot layout3 sample as the basis for a new website as I write
> this).  I know how to span a top title bar across all columns, and how to
> include a bottom bar spanning all three columns.  I even know how to make
> the  whole magilla expand and  contract with the browser window without
> breaking it all apart (until the window gets impractically narrow,
anyway).
> It took me a while to sort it all out, but I finally started to see the
> light.
>
> What I don't know how to do is to put, for example, five elements in a
> single row in that bottom bar, evenly spaced across it, so that when the
> window is expanded or contracted, they stay (as a group of five elements)
> centered within the window and self-adjust the distances between
themselves
> and the window borders.  The sort of thing that, using a centered table of
> five cells in one row, is basic HTML.
>
> I started with five divs, but they're block elements, and want to be
stacked
> in a column.  I couldn't figure out how to force them to stay inline
> (display:inline didn't do it), so I went with spans within an enveloping
> div, as follows:
>
> <div id="navfooter">
> <span class="footer"><a href="1990">1990</a></span>
> <span class="footer"><a href="1991">1991</a></span>
> <span class="footer"><a href="1992">1992</a></span>
> <span class="footer"><a href="1993">1993</a></span>
> <span class="footer"><a href="1994">1994</a></span>
> </div>
>
> .footer {
>  padding:2px 6px 2px 6px;
>  margin:2px 2px 2px 2px;
>  border:0px solid black;
>  width:auto;
> text-align:center;
>  }
>
> #navfooter {
>     position:relative;
>     top:10px;
>     padding:4px 0px 4px 0px;
>     margin:4px 4px 1px 4px;
>     border:0px dotted black;
>     text-align:center;
>     width:auto;
>     z-index:2;
>     voice-family: "\"}\"";
>     voice-family:inherit;
>     top:-10px;
>  }
> html body>#navfooter {top:-10px;}
>
> [ I realize I have some superfluous declarations in both .footer and
> #navfooter - I'm using them to troubleshoot problems for now, and will be
> remove or abbreviate them later. ]
>
> This gives me a screen-centered, single-row of spaced elements - but their
> spacing is dependent on the CSS padding and margin declarations, and does
> not vary regardless how expanded the browser window gets. This is similar
to
> using a table with fixed-width cells and a fixed overall row width.
>
> I'd like these elements to space themselves out according to window width,
> without having to use absolute positioning and javascript to provide
> position values. Surely CSS can provide an equivalent to such a basic
tables
> design - but I don't seem to be able to dope it out.  Or am I missing some
> important aspect of CSS that would make this implementation undesireable?
>
> I hope this expresses my problem more specifically - sorry for the length
of
> the message.  And Thanks Again!! for any suggestions you may have.
>
> Rod
> rbhutson(at)ieee.org
>
> ----- Original Message -----
> From: "davida51" <davida51(at)swbell.net>
> To: "Rod Hutson" <rbhutson(at)ieee.org>
> Cc: <hwg-style(at)hwg.org>
> Sent: Saturday, January 19, 2002 1:26 PM
> Subject: Re: Converting Centered Table Rows to Divs/CSS
>
>
> > Rod Hutson wrote:
> >
> > > .... how do you convert a centered, single table row of nicely spaced
> cells
> > > into a set of inline divs in a CSS page?....
> >
> > Rod -
> >
> > You can find info here also
> > http://bluerobot.com/web/layouts/layout3.html
> > --
> > David Andrew
> > davida51(at)swbell.net
>
>
>

HWG hwg-style mailing list archives, maintained by Web Professional Association - IWA