Re: Controling structure with CSS

>On Mon, 19 Apr 2004, Anne van Kesteren (fora) wrote:
>>> 
>>> Unfortunately (the awkward bit) this breaks inheritance (the inheritance
>>> has to be done in the original location, so things won't look like they
>>> belong where they were moved to). And it can require an excessive number
>>> of pseudo-elements.
>> 
>> I thought the amount of psuedo-elements was going to be limited in CSS3?
>> [other criticisms about the complexity of the proposed solution]
> 
>I agree. I've been saying all along that I think the current proposal is
>too complicated.
> 
>Unfortunately it's also the only proposal I've seen so far that does
>everything this proposal can do.
> 
>Suggestions are eagerly welcome.

 

My suggestion which is aimed at fixing floats, absolute position, relative
positioning, this particular issue and a host of others is:

 

Allow positioning inside a container. A property would control whether
something was positioned relative to the page or to its container.

Then allow for left/right/center aspect positioning and top/bottom/middle
aspect positioning. In other words when I give lengths or sizes, it
positions them from where I specify.

 

Also allow for positioned elements to be flowed around (left, right, both,
neither and none). This will allow for text to be flowed in many ways around
objects. MS Word allows for this behavior.

 

Deprecate the float and clear properties. They are covered by the above
properties.

 

If you're going to create relative positioning. it really only makes sense
if you can specify what you're making something relative to.

 

Some proposed properties

            position: static | relative | fixed

            flow: (left | right | both | neither | none)

            relative-to: (id(ID-REF) | root | parent) (left | center |
right) (top | middle | bottom) (margin | border | padding | content)

            left: length | <percentage>

            right: length | <percentage>

            top: length | <percentage>

            bottom: length | <percentage>

            center: length | <percentage>

            middle: length | <percentage>

            height: length | <percentage>

            width: length | <percentage>

 

left, right and center may be combined with width.

top, bottom and middle may be combined with height.

left and right may be combined.

top and bottom may be combined.

 

This covers fairly simply every combination of positioning that I can
imagine or have ever come across personally. It doesn't require explicit
sizes anywhere since I can use percentages so I don't have to know the size
of the content before hand. It also is a fairly natural way to look at it.

 

To anchor something to the very bottom, left underneath its parent margin
you would say:

position: relative;

relative-to: parent left bottom margin;

left: 0;

top: 0;

 

If you wanted that same object to appear over it's content (like a menu)
then

flow: none;

 

Basically breaking this all down, you have a few basic constructs. where
you're anchoring to (relative-to), how your own element is sized and
positioned relative to that point (left, right, center, top, bottom, middle,
width and height) and how things flow around it (left, right, both, neither,
none) and potentially top bottom for vertical scripts.

 

One of my favorite parts about this is that it's really simple to calculate
for the UA and really easy to figure out for the user. If queried, I'll show
you how to do a simple header + 3 column content + footer.

 

That's a suggestion. And of course I'm taking suggestions on it.

 

Orion Adrian