Stylesheets - table recreated using css

Author

table recreated using css

Aljosa Mohorovic

2007-03-05, 6:18 pm

i would like to recreate table displayed at http://fakanana.com/test/layout_1-3-1.html
using css with doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

i've found resources describing how to implement 3 columns with 100%
height but when i introduce header and footer i can't apply 3 columns
solutions because height is then = 100% - header.height -
footer.height.

main problem here is that footer should always be at browser bottom
(not content bottom), left and right columns always at maximum
possible height even if content, center column, is empty or if center
column is filled with 3 screens of content.

any ideas/solutions/tips/tricks?

Ben C

2007-03-05, 6:18 pm

On 2007-03-05, Aljosa Mohorovic <aljosa.mohorovic@XXXXXXXXXX> wrote:
> i would like to recreate table displayed at http://fakanana.com/test/layout_1-3-1.html
> using css with doctype:
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
> i've found resources describing how to implement 3 columns with 100%
> height but when i introduce header and footer i can't apply 3 columns
> solutions because height is then = 100% - header.height -
> footer.height.
>
> main problem here is that footer should always be at browser bottom
> (not content bottom), left and right columns always at maximum
> possible height even if content, center column, is empty or if center
> column is filled with 3 screens of content.
>
> any ideas/solutions/tips/tricks?

You could use absolute positioning instead, e.g.:

#header
{
position: absolute;
top: 0;
height: 4em;
...
}

#footer
{
position: absolute;
bottom: 0;
height: 4em;
...
}

#column1
{
position: absolute;
top: 4em;
bottom: 4em;
...
}

etc.

Aljosa Mohorovic

2007-03-06, 6:22 pm

using absolute positioning if content of column1 is larger then
available space it goes over footer and footer si no longer on browser
bottom.
any solutions for this?

Ben C

2007-03-06, 6:22 pm

On 2007-03-06, Aljosa Mohorovic <aljosa.mohorovic@XXXXXXXXXX> wrote:
> using absolute positioning if content of column1 is larger then
> available space it goes over footer and footer si no longer on browser
> bottom.
> any solutions for this?

overflow: scroll

Bergamot

2007-03-06, 6:22 pm

Aljosa Mohorovic wrote:
> i would like to recreate table displayed at http://fakanana.com/test/layout_1-3-1.html
> using css

Peruse http://webhost.bridgew.edu/etribou/layouts/

> with doctype:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
> www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Don't bother with XHTML, use HTML 4.01 Strict. Google the archives if
you want to read more about why. That subject has come up repeatedly in
HTML newsgroups (this is a CSS group, so is off-topic here).

> main problem here is that footer should always be at browser bottom
> (not content bottom)

This is achievable but a PITA, so don't harp on it. It's not that important.

--
Berg

Aljosa Mohorovic

2007-03-06, 6:22 pm

On Mar 6, 1:14 pm, Ben C <spams...@spam.eggs> wrote:
> On 2007-03-06, Aljosa Mohorovic <aljosa.mohoro...@XXXXXXXXXX> wrote:
>
>
> overflow: scroll

if column1 has width:750px; and margin:0px auto; scroll is somewhere
on page and it doesn't actually recreate table from first post.
so there is no way to recreate table using only divs and css?

Ben C

2007-03-06, 6:22 pm

On 2007-03-06, Aljosa Mohorovic <aljosa.mohorovic@XXXXXXXXXX> wrote:
> On Mar 6, 1:14 pm, Ben C <spams...@spam.eggs> wrote:
>
> if column1 has width:750px; and margin:0px auto; scroll is somewhere
> on page and it doesn't actually recreate table from first post.
> so there is no way to recreate table using only divs and css?

Sorry I don't understand the question, you will need to spell it out
more. Is this the table you're talking about :
http://fakanana.com/test/layout_1-3-1.html?

Aljosa Mohorovic

2007-03-09, 6:17 pm

On Mar 7, 12:13 am, Ben C <spams...@spam.eggs> wrote:
> Sorry I don't understand the question, you will need to spell it out
> more. Is this the table you're talking about :http://fakanana.com/test/layout_1-3-1.html?

i'm trying to recreate this table using divs and css and if it has
scrollbars they should be on browser right end, standard position for
scrollbars.

<table width="760px" height="100%">
<tr>
<td id="header" height="100px">header - logo and similar</td>
</tr>
<tr>
<td id="left" width="200px">
left width is 200px
left height is 100% - 140px
</td>
<td id="content">
content height is 100% - 140px
</td>
<td id="right" width="160px">
right width is 160px
right height is 100% - 140px
</td>
</tr>
<tr>
<td id="footer" height="40px">copyright</td>
</tr>
</table>

Jukka K. Korpela

2007-03-09, 6:17 pm

Scripsit Aljosa Mohorovic:

> i'm trying to recreate this table using divs and css

Why? Has it magically stopped working (for your definition of "working")?

There's very little point in recreating some rigid table layout in CSS.
Well, your table layout doesn't actually work, but with a few simple fixes
like colspan attributes, it would work better than any CSS recreation
(assuming you invoke quirks mode).

If you want to do something _better_, then you should first consider layout
_design_, not implementation. For example, do you want to ruin your page on
virtually all canvases narrower than about 760 pixels, as you're doing now?

If you really want to achieve something _roughly_ similar to the table
layout, then the first question is how hard you want the total height to be
100% (of something). Playing with heights is tough in CSS. If you accept a
height smaller than the canvas height when there is less content than fits
into the canvas, things will be much easier.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Aljosa Mohorovic

2007-03-10, 6:17 pm

On Mar 9, 3:40 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fi> wrote:
> Scripsit Aljosa Mohorovic:
>
>
> Why? Has it magically stopped working (for your definition of "working")?
>
> There's very little point in recreating some rigid table layout in CSS.
> Well, your table layout doesn't actually work, but with a few simple fixes
> like colspan attributes, it would work better than any CSS recreation
> (assuming you invoke quirks mode).
no, but it's easier to use modern javascript libraries with divs then
with tables.

> If you want to do something _better_, then you should first consider layout
> _design_, not implementation. For example, do you want to ruin your page on
> virtually all canvases narrower than about 760 pixels, as you're doing now?
thanks for advice and i agree with you but designer i work for doesn't
8-)

> If you really want to achieve something _roughly_ similar to the table
> layout, then the first question is how hard you want the total height to be
> 100% (of something). Playing with heights is tough in CSS. If you accept a
> height smaller than the canvas height when there is less content than fits
> into the canvas, things will be much easier.
i'm currently solving this using javascript but i was hoping there is
a better way.

my problem is that i can't change the way designers i work with think
so i'm trying to find a better way.

Jukka K. Korpela

2007-03-10, 6:17 pm

Scripsit Aljosa Mohorovic:

- -[color=darkred]
> no, but it's easier to use modern javascript libraries with divs then
> with tables.

Hardly. There's not much difference between a <td> and a <div> in that
respect.

> thanks for advice and i agree with you but designer i work for doesn't
> 8-)

It is your responsibility to tell the web-ignorant dee-ziner how web pages
work.

> i'm currently solving this using javascript but i was hoping there is
> a better way.

JavaScript for layout is part of creating new problems, not a solution.

> my problem is that i can't change the way designers i work with think
> so i'm trying to find a better way.

I bet you didn't try.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Ben C

2007-03-10, 6:17 pm

On 2007-03-09, Aljosa Mohorovic <aljosa.mohorovic@XXXXXXXXXX> wrote:
> On Mar 7, 12:13 am, Ben C <spams...@spam.eggs> wrote:
>
> i'm trying to recreate this table using divs and css and if it has
> scrollbars they should be on browser right end, standard position for
> scrollbars.
>
><table width="760px" height="100%">
> <tr>
> <td id="header" height="100px">header - logo and similar</td>
> </tr>
> <tr>
> <td id="left" width="200px">
> left width is 200px
> left height is 100% - 140px
> </td>
> <td id="content">
> content height is 100% - 140px
> </td>
> <td id="right" width="160px">
> right width is 160px
> right height is 100% - 140px
> </td>
> </tr>
> <tr>
> <td id="footer" height="40px">copyright</td>
> </tr>
></table>

Absolute positioning looks like the easiest solution. Make each of
"left", "right", etc. position: absolute and set the left, right, top
bottom and width properties on each one to put it where you want it.