473,748 Members | 9,416 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 2668
On 2007-03-05, Aljosa Mohorovic <al************ **@gmail.comwro te:
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.comwro te:
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.comwro te:
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.comwro te:
On Mar 6, 1:14 pm, Ben C <spams...@spam. eggswrote:
>On 2007-03-06, Aljosa Mohorovic <aljosa.mohoro. ..@gmail.comwro te:
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">c opyright</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.tu t.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

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

Similar topics

4
4710
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, since the table is not deleted and recreated, the primary key is kept intact. What would be the equivalent SQL method for doing this in an automated way? I've tried letting DTS import the table from Access, but the primary key is lost. Is there...
1
2695
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: Index idx_blk_id_addr is not a btree When I deleted and recreated the table, it worked fine. Any ideas?
4
2393
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 is generated with a Make-Table Query. Since the Make-Table Query deletes the previous table it created everytime it's ran, this poses a problem since the Read-Only group doesn't have the permission to delete objects. This causes the report...
8
1826
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 to well as I got an error trying to put rows collection in the viewstate. My problem is this: I load a table with rows and controls, then wire events, this is after clearing the rows of the table initially in this function.
3
2570
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 Table properties. But why other controls like ListBox or DataGrid can persist their child controls? I'm very confused about this.
2
4324
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 be grateful. My function creates a couple of temporary tables, uses them, and drops them before returning:
1
2970
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 table to make sure that when recreated and reloaded it will identify the child tables? This may sound like a dumb question. In test, I exported the data out then dropped the table and recreated it and reloaded the data. However, after reloading the...
12
5743
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. Here's the issue. While I'm working on my app, I'm linked to the backend on my computer. When I distribute the app, the backend file is obviously in a different location (on the client server). But the first time my app is started up at...
14
2149
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 application creates in a specific database a table with the name of his account (read with Request.ServerVariables("remote_user") and creates in that table the records he enters. From the second time the user starts the application, still the same form...
0
9530
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9312
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9238
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...
0
8237
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6793
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
6073
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
3300
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
2775
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2206
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.