Web design help on table column headers

[Mind Bridge <mi...@yahoo.com>]

Hi,

As you probably know, currently the column headers in contrib:Table are 
rendered using a table. The reason is that the following behaviour is 
required:

- the column title may be more than one line, as it it may be long and 
may be wrapped by the browser
- the sorting icon needs to be always on right of the column title, even 
if it wraps

An HTML table with two td cells satisfies those two criteria perfectly. 
I have been trying to achieve the same effect with divs and CSS, but I 
am failing.
In almost all cases the picture looks good, but once the browser width 
becomes tight, the second div (the one with the image) is moved 
underneath the first no matter what. I have tried 'float', 'clear: none' 
'display: inline' and other CSS tricks, but none of them seem to resolve 
this issue.

There is another matter: as far as I know, 'style' is of a higher 
priority than generic CSS, and that places additional restrictions on 
what can be done. The goal is to be able to control table columns using 
CSS from outside the contrib:Table component.

At this point I am leaning towards keeping the 'table' structure in the 
columns headers, albeit adding width=100% to ensure it is more easily 
manipulated with an external CSS (moved left or right, for example). If 
you happen to have a suggestion for resolving the above issues and 
making it easier than currently to apply CSS, please do let me know.

-mb

P.S. I am not a web designer, so some of the issues described may be 
quite easy to solve with the right knowledge.


---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-dev-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-dev-help@jakarta.apache.org

Re: Web design help on table column headers

[Jesse Kuhnert <jk...@gmail.com>]

Hey, 

Having recently been forced to do way more css page design than I care
to admit I do have a solution at least to your column header problem.

If you do something like:

<div class="column" >
<span>Text Header</span> <img >Sort image</img>
</div>

You can make the image align to the right of the text by using a
combination of float:left's and display:block. I'm sure I've been
hacking it up horribly, but if you specify that <a>,<span>, and <img>
elements all float:left;display:block; you will get the desired
result. Or, you can say that the img floats right, but that may start
to look weird.

The basic conclusion that I think everyone is coming to is that trying
to create pure css tables is really a fruitless effort, it's just too
damn hard. That doesn't mean that "ajax" style content replacement and
other such things can't still happen, as evidenced by things like
http://openrico.org/rico/livegrid.page.

For your css pleasure though here are a couple good links:
http://www.usability.com.au/resources/tables.cfm
http://www.dezwozhere.com/links.html (this is the best css starting
point, it has links to all of the good sites you'll ever want to
browse for css techniques)

I just recently ran into the same problem with stylesheets and it
drove me insane! Components DO and should be able to define some
default styles, that people can and shuold override, but it would be
nice if it were more of a class/subclass sort of thing, where they can
just tweak a thing here or there...If, like you said, you specify
style="" in your table then there is nothing else to do because that's
as concrete as you can get.

I'm still not sure if I haven't been clever enough to figure it out,
or if it is just an enhancement that is needed in tapestry, but it
would be very nice if components could inline their stylesheets into a
pages header section automatically. This may cause some havoc if they
have conflicting definitions, but it seems like it's worth the effort.
I eventually gave up and just defined all my css style attributes in
the documentation with my component and left the local css file in the
distribution jar file.

I don't think I have enough time to try and attempt a patch for this
sort of feature right now, but it would be ~very~ nice if it were
there. Otherwise the only true local resources a component developer
can hope to use are images and other things like that. It's sort of
confusing..

jesse

On 8/13/05, Mind Bridge <mi...@yahoo.com> wrote:
> Hi,
> 
> As you probably know, currently the column headers in contrib:Table are
> rendered using a table. The reason is that the following behaviour is
> required:
> 
> - the column title may be more than one line, as it it may be long and
> may be wrapped by the browser
> - the sorting icon needs to be always on right of the column title, even
> if it wraps
> 
> An HTML table with two td cells satisfies those two criteria perfectly.
> I have been trying to achieve the same effect with divs and CSS, but I
> am failing.
> In almost all cases the picture looks good, but once the browser width
> becomes tight, the second div (the one with the image) is moved
> underneath the first no matter what. I have tried 'float', 'clear: none'
> 'display: inline' and other CSS tricks, but none of them seem to resolve
> this issue.
> 
> There is another matter: as far as I know, 'style' is of a higher
> priority than generic CSS, and that places additional restrictions on
> what can be done. The goal is to be able to control table columns using
> CSS from outside the contrib:Table component.
> 
> At this point I am leaning towards keeping the 'table' structure in the
> columns headers, albeit adding width=100% to ensure it is more easily
> manipulated with an external CSS (moved left or right, for example). If
> you happen to have a suggestion for resolving the above issues and
> making it easier than currently to apply CSS, please do let me know.
> 
> -mb
> 
> P.S. I am not a web designer, so some of the issues described may be
> quite easy to solve with the right knowledge.
> 
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: tapestry-dev-unsubscribe@jakarta.apache.org
> For additional commands, e-mail: tapestry-dev-help@jakarta.apache.org
> 
>

---------------------------------------------------------------------
To unsubscribe, e-mail: tapestry-dev-unsubscribe@jakarta.apache.org
For additional commands, e-mail: tapestry-dev-help@jakarta.apache.org