Hello list,
my problem is a bit of a theoretical nature and requires quite some
explanation, so there's a quite verbose explanation of what I seek.
First of all, let me tell you that I am one of _them_. I'm a programmer, not
a graphic wizard, nor a designer. And conversely, what I do and put on the
web would only serve to show how it's not to be done. Lucky me, few things I
do have a visual appearance. But my current work does, and it's what leads
me here.
I have a quite complex piece of software, that takes models (database
schemas, workflows, mask descriptions) and creates a web application out of
it. These applications are generally company-internal webapps and nothing
that is served to a potentially huge crowd. Still it is, from the point of
view of an user, a normal web site/application. The significant part of this
software is, that the application developer building the web application,
has fewer control over the appearance of the web application. The html code
is generated, not written by a human. It must be styled by CSS and CSS
alone, influencing the html is not possible.
Good you may say, that's how you should use CSS - HTML for structure, CSS
for style. Alas, as it is the fault of many, I excessively used invisible
tables to layout the elements, because I simply didn't knew better at the
time. It works all fine, it layouts fine, but if you want to start applying
styles, the problem begins. The place where the relevant objects lie is
probably somewhere between 12 and 20 levels deep down the DOM tree. There's
basically a invisible table for everything, and in order to not move stuff
ahead, lots of border-collapses in the default CSS to prevent those 1px
indentations the invisible tables create.
Now, the system works, as I said and lots of applications have successfully
been developed with it. However now I am in the process of redesigning it,
make it easier to work with, and one of the shortcomings is this excessive
use of tables. So I went out to see if and how I can do it better. And I
quickly realized that the amount of css I knew was less than the tip of the
iceberg. I want to get rid of these structural, invisible tables. So I
stumbled upon the zen garden, bought a book or two and am currently
converting to css-ism.
However, I don't see a solution to a particular problem I have already
solved with the table, but cannot see a solution with css. Basically the
problem of how to replace the equivalent of a "colspan".
You see, I have structural elements called "sections" and "rows". Any object
(mostly form-input elements in these business applications) just placed on a
"mask" appear one below the other. If you put a row into the mask and then
the objects into the row, these objects are layouted horizontally (instead
of vertically). So far so good, I can do that. Now enter sections. Sections
don't do anything different, unless they contain rows. If so, they align the
objects within the rows according to each other. That is to say, they
enforce that for example the labels of the second object in the first row is
on the same column as the label of the second object in the second column.
It also creates a colspan, for example if the first row contains 2 objects
and the second only one, the second row's object is given a colspan, so it
can take all of the space.
Example:
Labels of objects are always in the same column:
Row1: | label 1: | [input1 ] | label 2: | [input2 ]
|
Row2: | Biglabel that | [input3 ] | some other thing: | [input4 ]
|
| breaks line:
Row3: ....
Rows with different number of elements are layouted like this:
Row1: | label1: | [input1 ] | label2: | [input2 ] | label3: | [input3 ]
|
Row2: | label4: | [input4 ]
|
Now I've been searching a bit of course and I've seen all the layouts for 3
Column CSS designs and such. But remember, all these pages are generated by
the system. No human touch involved. I don't know that I can put the second
column 100px left because I don't know in the first place that the first
column is 100px wide. So I can never use absolute pixel offsets.
At the moment I process the rows, I do know how big the span is going to be,
so I could emit different css-style names for different behaviour. But how
do I go on in the CSS to make this right ? How do I ensure that the label
parts are always below each other for all rows within one section, when I
don't know in advance wheter I'll have at most 2 or 3 or 6 columns? Is this
actually possible to obtain currently with the CSS available in the
currently used browsers (without the use of some javascript in CSS hackery ?
) ?
I've seen the variant for a thumbnail photoalbum that is liquid and flows
around if the browser window is smaller. This I cannot do. If I have 4
objects in a row, I have to have 4 objects rendered in a row. I cannot break
around after 3 because space ran out. The structure is preset and I have to
realize it.
Anything I've come up on so far has dealt with a webpage you have and can
control, but not with such a scenario where you simply don't really know in
advance what the output is, how many columns there will be and so forth.
So the main question is, can I remove my structural table that lies around
each "row" and replace this with a CSS neatly wrapping some div's, or should
I better keep using the table until CSS2/3 and better tools become usable ?
Note that I have far more invisible structural tables, not just this one.
But this is the only one I don't see a way of easily replacing and it is
very central because it controls the main layout of the masks displayed to
the user.
Hopefully my explanation is sufficent to describe what I seek, if not, just
ask for a clarification. I could also provide a sample page, though believe
me, you really don't want to take a close look at that HTML.
In any case, thanks for any pointers and hints
--
C U
- -- ---- ----- -----/\/ Rene \/\---- ----- --- -- -
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
