Adjust layer position according to screen resolution

Forum Moderators: not2easy

Message Too Old, No Replies

Adjust layer position according to screen resolution

Is it possible?

skuba

7:49 pm on May 11, 2004 (gmt 0)

I need to add a layer to a certain position on the page. The problem is that in each different screen resolution the layer appears on different place.

Is there a way to fix that?

Thanks

tedster

10:27 pm on May 11, 2004 (gmt 0)

Sure, it's possible -- using either relative or absolute positioning inside a container div of some sort. You may be running into trouble if you are trying to position it relative to the main window, however.

Sounds like you must be using CSS. Why not post a short snippet of your CSS layout over in our CSS Forum an let the brain trust over there have a look?

skuba

10:41 pm on May 11, 2004 (gmt 0)

The position of the Layer is defined on the CSS.
But the position is absolute. But anyway it moves when the browser is resized or the screen resolution changed.

#divContainer{
position:absolute;
width:115px;
height:82px;
overflow:hidden;
top:162px;
left:596px;
clip:rect(0,115,100,0);
visibility:hidden;
background-color: #FFFFFF;
} 
#divContent{position:absolute; top:153px; left:0px}

Should I have the divcontainer inside another container that will have the size of the page I want?

tedster

10:55 pm on May 11, 2004 (gmt 0)

All of this depends on your intended layout - which of of course depends on your HTML as well as your CSS.

Your top: and left: rules measure from the top and left of the containing element. In some cases, that may be the <body>. In other cases, the div is contained in another div. So if the container block is shifted on a different size screen, then the div nested inside it would also shift.

Also remember, you can position things with percentages as well as pixels and other exact units. So left:50% relative to the <body> would indicate the middle of the window.

Does any of that help you figure things out?

skuba

11:00 pm on May 11, 2004 (gmt 0)

Yes, at this time it's relative to the body of the page. But how should I make it fixed.
Create a bigger layer and put all the other layers inside that one?
How I would make the lication of the bigger layer fixed?

Thanks

skuba

11:19 pm on May 11, 2004 (gmt 0)

I got it. I put them under another layer.
And it worked.
Cool. Thanks.

skuba

11:24 pm on May 11, 2004 (gmt 0)

Just one more thing.
I noticed that layers are always a little off position on netscape.
Is there a way to fix that?

Thanks

tedster

11:52 pm on May 11, 2004 (gmt 0)

You mean that Netscape's position is a bit "off" compared to Explorer, I guess. Depending on your layout, there could be a number of things going on -- but Netscape is usually the more correct of the two according to the W3C standard.

You probably should dig into these related concepts:

Margins and Padding
[webmasterworld.com...]

DTD, Quirks mode and Standards Mode
[webmasterworld.com...]

The "Box Model" and Browsers
[webmasterworld.com...]
[webmasterworld.com...]
[webmasterworld.com...]

skuba

12:01 am on May 12, 2004 (gmt 0)

Thanks for the list.

skuba

1:03 am on May 12, 2004 (gmt 0)

I read all the messages. But I still coudn't fix it.
The thing is that when I try using one of those doc types, it screws my DHTML.
Basically, I am using one of those APScrollableArea, in case you're familiar with that.

I tried a few doc types, but then the layer clipping doesn't work.

I am also not using any padding or margin on the style. Is that the problem?

Here is the code


 <div id="Layer1" style="position:absolute; width:115px; height:96px; z-index:1; overflow: visible; left: 540px; top: 159px;"> 
       <div id="divContainer" style="position:absolute; width:115px; height:82px; overflow:hidden left: 0px; top: 0px; clip:rect(0,100,85,0);"> 
     <div id="divContent" style="position:absolute; left: 0px; top: 0px;">

How can make it work in the same location for NE and IE?

Thanks