(CSS) Poisitioning elemnts on the page. Resolved

Printable View

Oct 1st, 2002, 01:45 PM
msimmons

(CSS) Poisitioning elemnts on the page. **Resolved**

I seem to have forgotten and it seems that every page I read is incorrect or I am doing something wrong. I have:

Code:

<div name="container" id= "container"> <span name="element1" id= "element1">blah</span> <input type="text" name="element2" id= "element2"> </div>

Normaly I would just not use the container and would absolute position everything but I have a half a million (exageration but it is a lot) elements on the page and I have a feeling my boss is going to be fickle about the placement so I would rather keep certain items 'blocked' so I can move the group rather than each little item.
How would I do this?
Thanks,
Michael
Oct 1st, 2002, 02:41 PM
msimmons

*bump*

;)
Oct 1st, 2002, 02:51 PM
msimmons

are input elements not affected by style at all?
Oct 1st, 2002, 05:08 PM
Rick Bull

I don't really understand what you are trying to do, or what problem you're having.
Oct 1st, 2002, 05:13 PM
msimmons

I seem to have it now but don't like the way it is.
You know how position:absolute {top:10px; left:10px;} is from the top left corner of the page and they are unaffected by other elemts right? Well I have the elements in a div and I want to count my px's from the top left corner of that div and be unaffected by the other elemnts in that div. that way I can arrange them how I want but then move the div around later w/o disturbing the objects inside.
Michael
Oct 2nd, 2002, 09:12 AM
punkpie_uk

Quote:

are input elements not affected by style at all?

yes

Quote:

I seem to have it now but don't like the way it is.
You know how position:absolute {top:10px; left:10px;}...

I'm still a bit confused to be honest. Do you want to move the Div but the leave the elements in the same position on the screen? Or do you want to move the contained elements as well as the Div?
Oct 2nd, 2002, 09:23 AM
msimmons

I have them in the container so that I can move the whole block around but the elements stay in the same place within the container. That way when my boss decides he wants everything 5 pixels to the right I can just move the container rather than every single element because I do know how I want the elements relative to each other but not sure where on the page (this is like a information form).

as for the input type text question... I am just a moron ;) I had ( instead of { but my eysight is not what it used to be and I didn't see it.

Michael
Oct 2nd, 2002, 09:37 AM
Rick Bull

I could be wrong here, but I seem to remember that absolute positioned elements should be relative to their parent, maybe only if the parent is relative, I'm not sure:

Code:

<div style="position:relative; left:0px; top:0px;"> <div style="position:absolute; top:0px; left:0px;" This div should be at the top left of the parent DIV, not the top left of the page. </div> </div>

I think that's right, but maybe not. Maybe that's what you have?
Oct 2nd, 2002, 09:43 AM
msimmons

Quote:

Originally posted by Rick Bull
I could be wrong here, but I seem to remember that absolute positioned elements should be relative to their parent, maybe only if the parent is relative, I'm not sure:

Everything I read seems to remember that too but it dosent work. It positions them from the top left of the page.
Michael
Oct 2nd, 2002, 09:47 AM
msimmons

I don't know what changed between yesterday and today but it seems to work now ? (or atleast in my test page... let me try in my project and see)
Michael
Oct 2nd, 2002, 09:59 AM
msimmons

arrgh!
Ok. It works in my test page.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/css"> #container {position:absolute; top:50px; left:100px; background-color:yellow; width:300px; height:500px;} #element1 {position:absolute; top:10px; left:10px; background-color:blue;} </style> </HEAD> <BODY> <div name="container" id= "container"> <span name="element1" id= "element1">blah</span> <input type="text" name="element2" id= "element2"> </div> </BODY> </HTML>

but in my actual project it goes to the container's containing div... So, i created a new test w/two containers (one inside the other... and that works fine too! *** is wrong w/my project?!?

michael
Oct 2nd, 2002, 11:03 AM
msimmons

I GOT IT!!!!

Can you believe that the container has to be positioned for it to work? That is where my test data and real data differed and I did not see it until it was the very last thing.

So to recap.

position absolute DOES mean from the top left of the container IF the container is absolute positioned.

thank you both for all your help :)
Michael
Oct 2nd, 2002, 11:11 AM
punkpie_uk

Thats ok. It was going to be my next suggestion but you seemed to have figuired to out yourself ;)

(CSS) Poisitioning elemnts on the page. **Resolved**

(CSS) Poisitioning elemnts on the page. Resolved