Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 Community Forums
 Community Discussions (All other subjects)
 <table> tricks and tips needed
 New Topic  Topic Locked
 Printer Friendly
Author Previous Topic Topic Next Topic  

dayve
Forum Moderator

USA
5820 Posts

Posted - 27 November 2003 :  12:59:03  Show Profile  Visit dayve's Homepage
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  Show Profile
try setting the height of the TD containing Program/Agency to 100% and valign to bottom.

The UK MkIVs Forum
Go to Top of Page

dayve
Forum Moderator

USA
5820 Posts

Posted - 27 November 2003 :  14:21:56  Show Profile  Visit dayve's Homepage
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


Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 27 November 2003 :  14:28:58  Show Profile  Visit D3mon's Homepage
Does the word agency or program need to be clickable or is it just a reference?


Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won"
Go to Top of Page

dayve
Forum Moderator

USA
5820 Posts

Posted - 27 November 2003 :  14:33:40  Show Profile  Visit dayve's Homepage
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.

Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 27 November 2003 :  14:41:35  Show Profile  Visit D3mon's Homepage
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
Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 27 November 2003 :  14:51:38  Show Profile  Visit D3mon's Homepage
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
Go to Top of Page

dayve
Forum Moderator

USA
5820 Posts

Posted - 27 November 2003 :  15:02:49  Show Profile  Visit dayve's Homepage
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.

Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 27 November 2003 :  15:11:10  Show Profile  Visit D3mon's Homepage
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
Go to Top of Page

dayve
Forum Moderator

USA
5820 Posts

Posted - 27 November 2003 :  15:33:02  Show Profile  Visit dayve's Homepage
^^^ and I thought I knew everything.... thanks for that tip.

Go to Top of Page

D3mon
Senior Member

United Kingdom
1685 Posts

Posted - 27 November 2003 :  17:39:02  Show Profile  Visit D3mon's Homepage
oddly, thats something that doesn't seem to be as well known as I'd expected. Every day is a school day for all of us


Snitz 'Speedball' : Site Integration Mod : Friendly Registration Mod
"In war, the victorious strategist only seeks battle after the victory has been won"
Go to Top of Page

snaayk
Senior Member

USA
1061 Posts

Posted - 28 November 2003 :  16:54:40  Show Profile  Visit snaayk's Homepage  Send snaayk an AOL message  Send snaayk an ICQ Message  Send snaayk a Yahoo! Message
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 )
Go to Top of Page
  Previous Topic Topic Next Topic  
 New Topic  Topic Locked
 Printer Friendly
Jump To:
Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.45 seconds. Powered By: Snitz Forums 2000 Version 3.4.07