Author |
Topic |
|
dayve
Forum Moderator
USA
5820 Posts |
Posted - 27 November 2003 : 12:59:03
|
I was wondering what some of you may have done or would recommend when creating tables and laying out content within a table cell. Most of the times this is extremely simple, but then there are those times you want something a little different and you realize that something so simple, can often times drive you nuts.
So here is the scenario. I have a table with 3 columns and multiple rows. I've made it look somewhat like a rolodex system with names, addresses, phone numbers etc. But then I have a category that each falls under. The categories are Agency and Program. Sometimes when an Agency or Program has a long title it wraps within the cell which is fine because I want to keep my symmetry so I will not use nowrap. Here is what is looks like:
==========================================================================
|Turning Point - Transitional Living|Spirit of Woman |
|Center |615 S. Atwood |
|1638 L St. |Visalia, California 93277 |
|Fresno, California 93721 | AGENCY|
| PROGRAM| |
==========================================================================
In the example above, since Turing Point - Transitional Living Center wraps, it prevents the word PROGRAM in Spirit of Woman from aligning with the bottom. Now I have a few ideas on how to approach this, but I wanted some input from the community here on how they would go about handling this.
Here is an actual screen shot:
|
|
|
DavidRhodes
Senior Member
United Kingdom
1222 Posts |
Posted - 27 November 2003 : 13:50:36
|
try setting the height of the TD containing Program/Agency to 100% and valign to bottom. |
The UK MkIVs Forum |
|
|
dayve
Forum Moderator
USA
5820 Posts |
Posted - 27 November 2003 : 14:21:56
|
quote: Originally posted by DavidRhodes
try setting the height of the TD containing Program/Agency to 100% and valign to bottom.
well, I have thought of that, but Agency/Program is in the same cell. I was going to create a separate cell or even it's own table but that would require some restructuring of my CSS and table cells. Not a huge deal and I can eventually try that.
BTW, I remember reading some issues about setting the height of a table cell using percentage, especially with Netscape. Can't remember the specifics and I don't have a problem with any browser I've checked using that method here: http://www.virtualnetdesigns.com
|
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
|
dayve
Forum Moderator
USA
5820 Posts |
Posted - 27 November 2003 : 14:33:40
|
quote: Originally posted by D3mon
Does the word agency or program need to be clickable or is it just a reference?
it does not need to be clickable, I made the whole cell clickable. when clicked it just goes to a page giving more details about the Agency and Program. |
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
Posted - 27 November 2003 : 14:41:35
|
I'm thinking 2 ways, one CSS and one standard HTML:
CSS: give each cell a class="agency" or class="program" and have CSS like:
.agency { background: url(images/agency.gif) bottom right no-repeat; }
.program { background: url(images/program.gif) bottom right no-repeat; } and create an image of the word in each case...
HTML Inside each cell display the address inside a DIV and the word agency inside another DIV with align="bottom" like:<td>
<div style="padding:0px;margin:0px;">Turning Point - Transitional Living Center
1638 L St.
California 93721</div>
<div align="right" style="padding:0px;margin:0px;">Program</div>
</td> (edit: that won't work!) |
Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod "In war, the victorious strategist only seeks battle after the victory has been won" |
Edited by - D3mon on 27 November 2003 14:43:42 |
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
Posted - 27 November 2003 : 14:51:38
|
for a HTML-only solution, I'd probably rework the results into left column (Program) and right column (Agency) and head each column appropriately. Would be easier for reader to 'scan' and find entries this way. |
Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod "In war, the victorious strategist only seeks battle after the victory has been won" |
Edited by - D3mon on 27 November 2003 14:55:34 |
|
|
dayve
Forum Moderator
USA
5820 Posts |
Posted - 27 November 2003 : 15:02:49
|
I've used the CSS mehtod like you demonstrated above for other projects, but considering the cells already have classes on it. I'll probably do some restructuring. I was just looking to see what kind of recommendations I would get.
My client has asked me to keep the cells in alphabetical order. I had initially created it so it was broken up into programs and agencies but they did not want that and I was over-ruled 30 to 1!!! This project involves a lot of political influence throughout 10 counties in my area so it is very tough to tell them differently at times. |
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
Posted - 27 November 2003 : 15:11:10
|
Don't forget you can set more than one class per item, i.e.
<td class="abc def ghi"> It's just a space-delimited list. |
Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod "In war, the victorious strategist only seeks battle after the victory has been won" |
Edited by - D3mon on 27 November 2003 15:12:36 |
|
|
dayve
Forum Moderator
USA
5820 Posts |
Posted - 27 November 2003 : 15:33:02
|
^^^ and I thought I knew everything.... thanks for that tip. |
|
|
|
D3mon
Senior Member
United Kingdom
1685 Posts |
|
snaayk
Senior Member
USA
1061 Posts |
Posted - 28 November 2003 : 16:54:40
|
I'd go with D3mons idea using the bg image or creating a new row in every instance, and place the category in the new row. This shouldn't be too much work (maybe I shouldn't say that ) |
|
|
|
Topic |
|