New CSS standard (if it doesn't exist already)

[bcarl314]

All right, working with CSS positioning in a pain, and I hereby propose the following adjustment to the "position" element of CSS.

Create
position:anchor;
and
anchor-point: [x=position, y-position]

Here's the concept,


You create a div, or other block level element

In the body or other element you define an acnhor-point as follows in your css.

body {
anchor-point: 50, 10;//this value could be pixels, %, and em.

}

This would create an anchor point 50 pixels from the left an 10 pixels from the top.

Now if you want to position another block level element say 100 pixels down and 30 pixels right, (I'll use a div with a class of div 1 in my example) you'd do this...
.div1 {
position:anchor;
top: 100;//this value could be pixels, %, and em.
left:30;//this value could be pixels, %, and em.
}

Of course you ask, what happes if you define multiple acnhors, 1 in the body and another in a table or div? Well, my solution would be that the anchor points are inherited from the closest parent element.

Just my 2-bits on the subject. If something like this exists please let me know. I find the "relative" about as easy to get along with as my own relatives. :D

[justame]

Originally posted by bcarl314
1. New CSS standard

2. I find the "relative" about as easy to get along with as my own relatives. :D

bca...
1. just a whews® n' sooo glad /me didnt bother to just a learn/memorize/use® the ol' ones...lol...

2. just a rotflmao® n' ^5s...hehehe...

[jkd]

I don't see what your "anchor" idea does that:

position: absolute;
left: bla;
top: bla;
right: bla;
bottom: bla;

can't do? Or maybe I didn't understand what you said...

[Sp00kY]

It's not just a positioning thing he's on about I don't think.
More of a reference point on the page that other DIVs can be placed relative to... sort of like changing the left & top margin for a DIV tag. :thumbsup:

Peace \/

[bcarl314]

spOOky, exactly right. absolute positioning is an implementation of this with the reference (anchor-point) of 0,0. And you are allowed only one reference point. What I am proposing is multiple anchor points within a document.

That way you could easily center a document by saying
body {
anchor-point:50%,10;
}
then align all your divs from that anchor point. Saves time in coding by % and I would imagine it should be easier to implement for the borwser.

[jkd]

.anchor {
position: absolute;
left: 30px;
top: 20px;
}

.offsetted {
position: relative;
left: 40px;
top: 20px;
}

........

<div class="anchor">
<div class="offsetter">
bla
</div>
</div>

No?