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

table recreated using css

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?

Mar 5 '07 #1
11 2643
On 2007-03-05, Aljosa Mohorovic <al**************@gmail.comwrote:
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.
Mar 5 '07 #2
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?

Mar 6 '07 #3
On 2007-03-06, Aljosa Mohorovic <al**************@gmail.comwrote:
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
Mar 6 '07 #4
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
Mar 6 '07 #5
On Mar 6, 1:14 pm, Ben C <spams...@spam.eggswrote:
On 2007-03-06, Aljosa Mohorovic <aljosa.mohoro...@gmail.comwrote:
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
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?

Mar 6 '07 #6
On 2007-03-06, Aljosa Mohorovic <al**************@gmail.comwrote:
On Mar 6, 1:14 pm, Ben C <spams...@spam.eggswrote:
>On 2007-03-06, Aljosa Mohorovic <aljosa.mohoro...@gmail.comwrote:
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

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?
Mar 6 '07 #7
On Mar 7, 12:13 am, Ben C <spams...@spam.eggswrote:
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>

Mar 9 '07 #8
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/

Mar 9 '07 #9
On Mar 9, 3:40 pm, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
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).
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.

Mar 10 '07 #10
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")?
- -
no, but it's easier to use modern javascript libraries with divs then
with tables.
Hardly. There's not much difference between a <tdand a <divin that
respect.
>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-)
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/

Mar 10 '07 #11
On 2007-03-09, Aljosa Mohorovic <al**************@gmail.comwrote:
On Mar 7, 12:13 am, Ben C <spams...@spam.eggswrote:
>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>
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.
Mar 10 '07 #12

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

Similar topics

4
by: Larry Rekow | last post by:
In Access I have a macro that, each night, takes a table with a primary key defined in it, and deletes all the rows. Then it imports/appends records from a fixed width text file. In this way,...
1
by: Jon Earle | last post by:
Hi, Had a problem with PsotgreSQL v7.3.4. I had a table that, after a while, decided to give me a fit: db=> insert into blocklist values ('2', 'km4n7s28ehiFizeYupm93Q', '1','2','3'); ERROR:...
4
by: Oreo Bomb | last post by:
I have a secured database that contains a Read-Only group. This group has permissions to view reports, but cannot add, edit, or delete any DB objects. One of the reports the group needs access to...
8
by: John Smith Jr. | last post by:
I am looking for some way to persist a table web control so when page_load event comes up, i can display the table as it was. I tried using ViewState with the rows collection but that didn't work...
3
by: Nhat Yen | last post by:
Hi everyone, I don't know why all the controls of the Table class (server control) has to be reconstructed for each page load. The MSDN said that it is because the children controls are not the...
2
by: Phil Endecott | last post by:
Dear PostgreSQL experts, I have encountered a problem with temporary tables inside plpgsql functions. I suspect that this is a known issue; if someone could confirm and suggest a workaround I'd...
1
by: Matt | last post by:
I have a parent table that has 2 child tables. I need to drop and recreate the parent table because there has been a change to one of the column types. What should I do prior to dropping the...
12
by: rdemyan via AccessMonster.com | last post by:
I'm having a complicated linking problem. Before I get into the particulars, I'd like to know how Access links to the back-end file at startup, AFTER I've distributed my application to the client....
14
by: Dan | last post by:
Hello, we have an intranet application using Windows Integrated Authentification. When an user starts the application, he gets a form for inputting data. The first time he does that, the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 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 former...

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.