CSS Problem

[andymac]

Hi,
I've got an ASP script that outputs a diary page with various bits overlaid onto it using absoulte positioning using CSS. This is fine because it's running in an IFRAME so I know whereabouts the origin is for the absolute positioning. However, I now need to move this to a site where I'm not using an IFRAME and the page is centered. So the absolute positioning goes out of the window and I have to do everthing with relative positioning.

Now as I see it I could either;
(a) Find some way to respecifiy the origin, I'd like to specify it as relative to another object on the form
(b) Use a load of Javascript resizing - what happens when I resize and I've fixed it absolute to a position on the screen - it doesn't reposition properly
(c) Do everthing relative, but that will require a load of extra code
(d) Do everthing relative and have some bizzare "origin" object that provides the reference point.

Has anybody done stuff like this before ? (somebody must have)

Any advice greatly appreciated !

cheers
Andy

[CiberTHuG]

How about enclosing your entire page in a div. You can keep the old elements absolutely positioned within the div. You can then set the width of the div, and relatively center it on the page.

I haven't tried it, but it should work.

[andymac]

Ok, I'll give it a go.

thanks
Andy

[andymac]

Bad news I'm afraid - doesn't want to play. I think if it's absolute, it's absolute to the top left hand corner of the page. Unless anybody knows how to change the "origin" of the top left hand corner then I'm a bit stuck...

Cheers
Andy

[progressive]

that method should work

but you need to do this

<div id="maindiv" style="position:absolute; width:200px; height:115px; z-index:1; left: 61px; top: 50px"> 
  <div id="child" style="position:absolute; width:200px; height:115px; z-index:1; left: 24px; top: 31px">
    <table width="100%" border="1" cellspacing="5" height="100%">
      <tr>
        <td>i'm inside the maindiv </td>
      </tr>
    </table>
  </div>
  <table width="100%" border="1" cellspacing="5" height="100%">
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

the "maindiv" must surround the rest of the divs, then when you position your other child divs they will not exceed the outer edge of your "maindiv" unless they have a negative position

copy the above into a web page and play around with the "maindiv" top and left attributes. Wherever "maindiv" goes child goes to

[andymac]

Hi,
Got it working. I'd tried the <div> in a few other places and also modified my absolute positioning code to have the correct offset and job done. Then just before the <div> put a blank.gif of a height to push my page footer down to below where I finish drawing and it works fine.

thanks guys

cheers
Andy

[progressive]

The only draw back to this method is that because all the content is contained within a div you just get a blank screen until all the content is renderd by the browser!

The bigger the page and the more graphics it has the longer the blank screen appears for....using this method you've go to optimize the rest of your page for a speedy download!

Just some advice

[andymac]

Seems to work fast enough on my local connection !
I've sent it to my client and we'll see how fast they manage to get.

cheers
Andy