Page 1 of 1

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

Posted: Mon May 30, 2005 7:12 am
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

Posted: Mon May 30, 2005 11:07 am
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.

Posted: Mon May 30, 2005 11:34 am
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.

Posted: Mon May 30, 2005 4:52 pm
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.

Posted: Mon May 30, 2005 4:58 pm
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.

Posted: Mon May 30, 2005 5:05 pm
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...

Posted: Mon May 30, 2005 7:41 pm
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?

Posted: Mon May 30, 2005 7:53 pm
by andre_c
maybe you could try floating the small text to the right,
i would try playing around with the float property

Posted: Mon May 30, 2005 7:59 pm
by Skara
An imbedded table still looks like the most viable solution. It's not that much more code you have to enter.

Posted: Mon May 30, 2005 11:49 pm
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)