467,161 Members | 1,041 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,161 developers. It's quick & easy.

absolute positioning

iam_clint
Expert 1GB
Expand|Select|Wrap|Line Numbers
  1. <div id="commonsearch" style="cursor: pointer; position: relative; visibility: hidden; display: none; top=186; left=287"></div>
Ok so I don't normally ask questions but heres my question.


How can I get this div to be in that position on my page no matter if the window is not maximized and on different resolutions. position relative doesn't seem to work for me because it adds extra space when this becomes visible and i don't want that so any thoughts would help out thanks.

Its a drop down that shows up under search box but when screen reso changes it moves on the page ... i think you get what i mean yes its still at 186 from the top and 287 from the left but the rest of my crap on my page isn't right there anymore cause resolution changed or the window size changed.
Apr 24 '07 #1
  • viewed: 1757
Share:
13 Replies
drhowarddrfine
Expert 4TB
Without seeing the rest of the markup I don't know if this will work for you but let me know:
Expand|Select|Wrap|Line Numbers
  1. <div id="commonsearch" style="cursor: pointer; position: absolute; visibility: hidden; display: none; top:186px; left:287px"></div>
You need units on the sizes such as 'px' and I changed your positioning to absolute. That may do what you want but it can be tricky depending on the rest of the markup.
Apr 24 '07 #2
iam_clint
Expert 1GB
this does not work, when i change the resolution on my computer or unmaximize the window it moves the div from where its supposed to be because from the top left corner of the browser it is not the same PX as before to where the div should be.

you don't want to see the rest of the markup :P

I just need a way other than position absolute to get this div not to shift things around on the page and overlay everything where i put it.
Apr 25 '07 #3
iam_clint
Expert 1GB
Heres a link to the test page - [link removed at posters request]
at resolution 1280/1024 with browser maximized

in the search on the left start typing monkey the div will popup with some autocomplete options. Looks fine at this reslution? right.... change resolutions or unmaximize the window.

-- edit: The page has not yet been tested in firefox, Will fix it for firefox if anything is wrong after i get the positioning to work correctly --
Apr 25 '07 #4
iam_clint
Expert 1GB
i tried to write some javascript to overcome this problem but its a pain..
Apr 25 '07 #5
drhowarddrfine
Expert 4TB
You mean the autocomplete isn't popping up in the right place? Everything else seems right in FF and IE7. In any case, you have 95 html errors and 10 or more CSS errors including no doctype which is required. Validate both for that list of errors but I'm not sure I understand the problem.
Apr 26 '07 #6
drhowarddrfine
Expert 4TB
I think I understand now. Assuming you are talking of the autocomplete popup, you would need to move that <div> inside the div or table cell where the search box is. Then position #commonsearch relative to the inside of that div or table cell. Now, that requires the div/table cell to be "position:relative" which will force #commonsearch to use it as its parent element for positioning.

Does that make sense?
Apr 26 '07 #7
iam_clint
Expert 1GB
it does make sense but even when i do this when the div becomes visible when i do it without using position absolute it pops up and pushes everything else down and to the right.
Apr 26 '07 #8
drhowarddrfine
Expert 4TB
Which browser? I don't see this "pushing around" problem in FF or IE7.
Apr 26 '07 #9
iam_clint
Expert 1GB
Well i wrote some javascript to position it with absolute in about the same area on every resolution, i'm talking about for example here

you can put this code in [link removed as posters request]
paste it in there and click update and down at the bottom click the test button.
[HTML]
<table>
<tr><td>This will stay in the correct place</td></tr>
<tr><td><div id="test" style="position: relative; top: -5px; width: 50px; height: 50px; visibility: hidden; display: none;">Example</div></td></tr>
<tr><td>This is going to be pushed down</td></tr>
</table>
<input type="button" onclick="document.getElementById('test').style.dis play = 'block'; document.getElementById('test').style.visibility = 'visible';" value="Test">
[/HTML]
Apr 26 '07 #10
drhowarddrfine
Expert 4TB
That test page is unviewable in Firefox and doesn't work in Opera. I don't have a Windows box available right now.
Apr 26 '07 #11
iam_clint
Expert 1GB
That test page is unviewable in Firefox and doesn't work in Opera. I don't have a Windows box available right now.
well paste it an .html document and open it in firefox
Apr 26 '07 #12
drhowarddrfine
Expert 4TB
So maybe I'm losing touch with the problem but just change relative to absolute.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style type="text/css">
  7.  
  8. </style>
  9.  
  10. </head>
  11.  
  12. <body>
  13. <table> 
  14.     <tr>
  15.         <td>
  16.             This will stay in the correct place
  17.         </td>
  18.     </tr> 
  19.     <tr>
  20.         <td>
  21.             <div id="test" style="position: absolute; top: 50px; width: 50px; height: 50px; visibility: hidden; display: none;">
  22.                 Example
  23.             </div>
  24.         </td>
  25.     </tr> 
  26.     <tr>
  27.         <td>
  28.             This is going to be pushed down
  29.         </td>
  30.     </tr> 
  31. </table> 
  32.  
  33. <input type="button" onclick="document.getElementById('test').style.display = 'block'; 
  34.         document.getElementById('test').style.visibility = 'visible';" value="Test">
  35. </body>
  36. </html>
Apr 26 '07 #13
KevinADC
Expert 2GB
it does make sense but even when i do this when the div becomes visible when i do it without using position absolute it pops up and pushes everything else down and to the right.

Works fine for me too, IE6, IE7, FF 2 (windows 98 test server)

no change to layout when resoultion is changed, everything stays in position as it should.
Apr 26 '07 #14

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

12 posts views Thread by Tom Szabo | last post: by
6 posts views Thread by Gustaf Liljegren | last post: by
4 posts views Thread by Alan Silver | last post: by
6 posts views Thread by Mark | last post: by
20 posts views Thread by mehstg1319 | last post: by
14 posts views Thread by Fistro | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.