Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Layer Positioning Question

Status
Not open for further replies.
sc123

sc123

IS-IT--Management
Feb 13, 2002
89
0
0
US
If I have the following tag and I want it to remain in the same sport althogh the page is centered and the resolution will vary from computer to computer, what do I need to add?:
<div id="Layer1" style="position:absolute; width:200px; height:291px; z-index:1; left: 221px; top: 216px;">

Thanks,
SC
 
Sort by date Sort by votes
Umm.. maybe use a table instead of div's?

:)

-----------------------------------------------
"The night sky over the planet Krikkit is the least interesting sight in the entire universe."
-Hitch Hiker's Guide To The Galaxy
 
Upvote 0 Downvote
If I could I would. The file is an exported Illustrator file with offset tables all of the place. It's not an option.
Sincerely,
SC
 
Upvote 0 Downvote
Have you tried relative positioning instead of absolute?

I'm actually a little rusty with positioning elements with CSS, but it would be my first guess...

-----------------------------------------------
"The night sky over the planet Krikkit is the least interesting sight in the entire universe."
-Hitch Hiker's Guide To The Galaxy
 
Upvote 0 Downvote
Yes, that did not work.
-SC
 
Upvote 0 Downvote
I don't follow. Do you want your element to remain at that position regardless of what is happening on the page? Then what you have right now will work. As long as that div is not nested in any other positioned element, it will be positioned relative to the browser window:

221px from the left edge
216px from the top edge

If that is what you want, then it should be working for you. If not, please be more specific what you are after.
 
Upvote 0 Downvote
Vr:
That's exactly the problem. It is positioning itself from 0px 0px, so if the page is viewed at 1024x768 it's perfect, but at 1280x024 it's misaligned. I need it to stay on the same point on the page regardless of the resolution it's viewed in.
-SC
 
Upvote 0 Downvote
You were asking the wrong question. You do not want the element to be at the same spot regardless of the resolution. Because with this code it will be. It will always be 221px from the left and 216px from the top. With 640x480, that will put it nearly at the center and with 1280x1024 it will be at the top left corner. If you want the element to follow your page when you resize, make sure the element which moves (is centered) is positioned (absolute or relative) and this element lies inside of it. In this case, it will move with the other element.
 
Upvote 0 Downvote
No. I stated above exactly what I want. I want the image to stay in the same part of the page no matter what res the user is using. I don't want it to always be x pixels from the top left corner. That doesn't do any good. I do not understand what you're talking about in your last sentence. Can you post example code?
-SC
 
Upvote 0 Downvote
Require more code. Like I said, your element already is always in the same place on the screen, but your page is moving. I need to see how the rest of your page is constructed to be able to give you advice on how to do it. Basically it works like this:
Code: 
<div style="position: relative;">
  The rest of the page
  <div id="Layer1" style="position:absolute; width:200px; height:291px; z-index:1; left: 221px; top: 216px;"></div>
</div>
With this, your Layer1 will follow its div parent everywhere the parent will go.
 
Upvote 0 Downvote
Here is an example of the code:

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onLoad="MM_preloadImages('images/HubsWeb.freems_03.gif','images/HubsWeb.freems_07.gif','images/HubsWeb.freems_09.gif','images/HubsWeb.freems_11.gif','images/HubsWeb.freems_21.gif','images/HubsWeb.freems_23.gif','images/HubsWeb.freems_25.gif')">
<TABLE WIDTH=1003 BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center">
<TR>
<div style="position: relative;"><div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 196px; top: 200px;">Test</div></div>


Table Content

</TR>
</TABLE>


Yet the content does not center with the table.
-SC
 
Upvote 0 Downvote
Code: 
<table width="1003" border="1" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td>
      <div style="position: relative;">
        <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 196px; top: 200px;">Test</div>
      </div>
      Table Content
    </td>
  </tr>
</table>
This moves the Layer along with the table in different resolutions for me.
 
Upvote 0 Downvote
VR:
That worked! The only problem is in IE it aligns about 50 px to the right of where it is in standards comp browsers. Any idea why that may be?
-SC
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
38
jason.lex
jason.lex
lupidol
  • Locked
  • Question
What does a question mark (?) stands for in ancho tag ? 1
Replies
2
Views
134
lupidol
lupidol
lupidol
  • Locked
  • Question
Positioning elements, how do I do it ?! 2
Replies
2
Views
52
vacunita
vacunita
ggriffit
  • Locked
  • Question
strange div positioning 1
Replies
9
Views
66
ggriffit
ggriffit
southbeach
  • Locked
  • Question
set css for last div layer based on its class
Replies
3
Views
49
southbeach
southbeach

Part and Inventory Search

Sponsor

Back
Top