1 reply [Last post]
Cronjob
Offline
newbie
Last seen: 17 years 21 weeks ago
Joined: 2003-12-19
Posts: 1
Points: 0

My site makes extensive use of tables to achieve the complex layouts within it. I'm a software engineer, not a web-designer, so this is my first foray into CSS.

I've read through Cascading Style Sheets: The Definitive Guide, as well as many tutorials at alistapart.com, glish.com, csszengarden.com and elsewhere. Still, my attempts at reproducing my pages exactly in table-less CSS as they appeared in HTML with tables give terrible results.

A static copy of the dynamic index page for my site is available at http://gothicauctions.com/test.html

I want the page to look like the layout below. I want to define the width of each box, but not the height. I want them to dynamically assume as much space as the content within them requires. I'm having a hard time doing this, though.

If LOGIN has enough content within it to dynamically stretch to 300px high, then I want 'CATEGORIES' to stretch to 300px, too. But I want 'HOT-AUCTIONS' to be as tall as CATEGORIES/FORUMS or LOGIN/SERVICES combined, so that they all meet evenly at the NEW/USERS and NEWS sections.

Also, whether LOGIN takes 200px in height or 2000px, I want SERVICES to appear directly underneath. If you looked at the example page I linked to above, you will see exactly what I want.

I've tried multiple shots with absolute positioning, relative positioning, auto width/height and floating. I just can't seem to do what I need.

I could really use some guidance as I've spent the past week trying to put together this one page, with no satisfactory results. I only have so much time to spend working on the interface rather than writing the software, so I'm nearing the edge of "screw it, I'll stick with complex nested tables".

I hope I have explained my situation clearly enough. If I have not, I'll try to clarify anything requested in your replied.

Thank you.

+-------------------------------------+
|banner/mast                          |
|                                     |
|                                     |
+-------------------------------------+
|search bar                           |
+---------+----------------+----------+
|login    |categories      |hot       |
|         |                |auctions  |
|         |                |          |
|         |                |          |
|         |                |          |
|         |                |          |
+---------+----------------+          |
|services |forums          |          |
|         |                |          |
|         |                |          |
|         |                |          |
|         |                |          |
|         |                |          |
+---------+----------------+----------+
|new      |news                       |
|users    |                           |
|         |                           |
|         |                           |
|         |                           |
|         |                           |
|         |                           |
|         |                           |
|         |                           |
+---------+---------------------------+
|footer                               |
+-------------------------------------+

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 6 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Difficulty replacing complex table layout with CSS.

Hi Cronjob,
Yes it is a fairly complex design and to replicate it exactly without tables would be very difficult.
If you have the design that you like already in tables is it worth the effort to remove them :?:
Basically you have a header then three columns followed by two columns and a footer fixed width and centered.

I just quickly used the layout generator to create to layouts one with a header and three columns and another with two columns and a footer.
Then All I had to do was copy some code from one to the other rename a couple of ids and change the ids in the css.
So the basic structure is there I also copied some of the text from your page but will leave you to fix it up and format.

Hope that helps