Joe Blow wrote:
>I was trying to research an alternative to using tables for a 3X3 layout grid.
>As an example, I've posted this page: http://earthday.ca/temp/index.html. The
>middle-center slice (r3_c2.jpg) is where the content would go, and it should
>expand vertically to accomodate any height of content. Therefore, r3_c1.jpg
>and r3_c3.jpg slices should scale vertically as well.
>
>I've looked at 3-column CSS alternatives to tables (most notably on glish),
>but they don't accomodate a top and bottom row, which causes mess-ups: at
>least in IE, there's padding below the images in these rows that leave an ugly
>space -- I need all the images to butt up seamlessly against each other in all
>browsers for a design like this to work. I can't seem to use float to remedy
>the situation either.
>
>I can't find a solution in CSS. Can any of you suggest one? Thanks for the
>help.
>
>
Joe (though I'm guessing that's not your real name...),
The key to creating this layout is to stop thinking in terms of tables.
Banish them from your mind. Think in terms of the logical divisions of
your page. Mockup the content that will go inside the shell you have
shown us. Take a look at that content. Maybe you will see that it's
grouped like this:
name of site/branding
main navigation menu
primary content
secondary content
copyright and credits info
For each of these areas of content, create a div.
<div id="branding">
<div id="main-nav">
<div id="main-content">
<div id="secondary-content">
<div id="footer">
Throw your content in each of those areas with the proper semantic
markup. Your page won't look like anything yet, but that's ok -- you're
working on structure.
Now, in the interest of easier CSS styling, add a few extra divs.
<div id="wrap">
<div id="branding"></div>
<div id="container">
<div id="main-nav"></div>
<div id="main-content"></div>
<div id="secondary-content"></div>
</div>
<div id="footer"></div>
</div>
Now you can set the width of #wrap (I assume this is a fixed-width
design, based on your header graphic), which will determine the width of
all the nested divs that hold your content. Now all you need are three
graphic slices: the header one, plopped into the #branding div
(recommended) or set as its background; the content area one, set as a
repeat-y background on #container; and the footer one, set as the
background on #footer. Then float the three divs inside #container, add
a float containment method, and you're done with the structure. Now go
ahead and style the content inside your divs.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
