CSS solution? [ABANDONED - free to a good home]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

CSS solution? [ABANDONED - free to a good home]

Post by Stryks »

Hi all,

Just come across a bit of a problem getting thigs to display correctly.

I have some values displayed in a table, but because of space restrictions, I want to display two parts of a description in a single cell so that there is no wasted space.

Basically, what I want to do is have the first part in the large font, and the second part in the smaller, but if the small text runs longer then the available space, I want it to wrap, but not underneath the larger text.

Any idea on how to get this alignment using CSS?

Cheers
Last edited by Stryks on Mon May 30, 2005 11:50 pm, edited 1 time in total.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Display them in two cells. If you handle the borders correctly, there will be no wasted space.
Basically, what I want to do is have the first part in the large font, and the second part in the smaller, but if the small text runs longer then the available space, I want it to wrap, but not underneath the larger text.

Code: Select all

-------------------------------------------
| |\  | | | |   |   Insert some text that |
| | \ | | | |   |   doesn't wrap around   |
| |  \| |_| |__ |__ here                  |
-------------------------------------------
                   ^                       
                   |                       
                   --- Invisible border here
By the way, this belongs in the Client Side forum. Please post in the correct forums in the future.
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post by JAM »

Ambush Commander wrote:By the way, this belongs in the Client Side forum. Please post in the correct forums in the future.
As mentioned, moved.
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Post by Stryks »

Thanks for the suggestion, but maybe I didnt describe the problem well enough.

Your suggestion works fine if there is just one row of information, but there are many different rows. So if there are 5 first parts, 4 short and 1 long, then that invisible border is at the end of the longest one, padding the short ones with the wasted space.

What I am hoping to do is similar really, but instead of setting a border which applies across the table, setting one that applies on a row by row basis.

I could nest tables, but I really dont think that is the best option. Is there another way to split the cell so that text on one side is vertically centered, and text on the other side wraps underneath itself, and not under the initial text?

Thanks.
User avatar
Ambush Commander
DevNet Master
Posts: 3698
Joined: Mon Oct 25, 2004 9:29 pm
Location: New Jersey, US

Post by Ambush Commander »

Colspan? Rowspan? Could you, like, make an ASCII diagram of what you're trying to achieve? Methinks tables shouldn't be this complicated.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

I don't think you can give a single cell multiple attributes. This would lead to two options:

1)Nested tables (which you already said you didn't want to do)
2)A different element type that can have its own attributes (<p>,<div> etc).

I'm 99% sure you can't split a single cell into having multiple attributes...
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Post by Stryks »

I'm just ... really bad at ascii images, so I just slapped this together to give you an idea of what I mean.

Image

I've sort of come to the conclusion that it cant really be done though. At this point, things dont get to the stage where they reach the end of the line, but it's not impossible, and I was hoping to factor in that eventuality.

Anyhow, the information is still shown, and even though it does look a little ugly, it's not like it aill actually break anything.

But, if someone can still come up with a solution, I'd still love to hear it.

Cheers.

?? That image working?
User avatar
andre_c
Forum Contributor
Posts: 412
Joined: Sun Feb 29, 2004 6:49 pm
Location: Salt Lake City, Utah

Post by andre_c »

maybe you could try floating the small text to the right,
i would try playing around with the float property
User avatar
Skara
Forum Regular
Posts: 703
Joined: Sat Mar 12, 2005 7:13 pm
Location: US

Post by Skara »

An imbedded table still looks like the most viable solution. It's not that much more code you have to enter.
User avatar
Stryks
Forum Regular
Posts: 746
Joined: Wed Jan 14, 2004 5:06 pm

Post by Stryks »

Yeah, I'm kind of coming to the conclusion that that is about the only way I can get that output.

It's not really that I am afraid of nesting tables or anything, its just that I tend to have got in several tables deep at some points, and I'm starting to really think of alternatives before I go ahead and just add another one.

The problem is that I display alot of connected dynamic data and I often find myself getting tied in knots as to where one table ends and another starts. But hey, I guess thats that the <table></table> tags are for, yeah? :lol:

Cheers guys. 8)
Post Reply