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

**msimmons** · Oct 1st, 2002, 01:45 PM

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

**msimmons** · Oct 1st, 2002, 02:41 PM

**msimmons** · Oct 1st, 2002, 02:51 PM

are input elements not affected by style at all?

**Rick Bull** · Oct 1st, 2002, 05:08 PM

I don't really understand what you are trying to do, or what problem you're having.

**msimmons** · Oct 1st, 2002, 05:13 PM

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

**punkpie_uk** · Oct 2nd, 2002, 09:12 AM

are input elements not affected by style at all?

yes

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?

**msimmons** · Oct 2nd, 2002, 09:23 AM

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

**Rick Bull** · Oct 2nd, 2002, 09:37 AM

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?

**msimmons** · Oct 2nd, 2002, 09:43 AM

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

**msimmons** · Oct 2nd, 2002, 09:47 AM

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

**msimmons** · Oct 2nd, 2002, 09:59 AM

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

**msimmons** · Oct 2nd, 2002, 11:03 AM

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

**punkpie_uk** · Oct 2nd, 2002, 11:11 AM

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

Thread: (CSS) Poisitioning elemnts on the page. Resolved

Thread Tools

Display