By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,676 Members | 1,759 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,676 IT Pros & Developers. It's quick & easy.

absolute positioning

iam_clint
Expert 100+
P: 1,208
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
Share this Question
Share on Google+
13 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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 100+
P: 1,208
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 100+
P: 1,208
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 100+
P: 1,208
i tried to write some javascript to overcome this problem but its a pain..
Apr 25 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
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 5K+
P: 7,435
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 100+
P: 1,208
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 5K+
P: 7,435
Which browser? I don't see this "pushing around" problem in FF or IE7.
Apr 26 '07 #9

iam_clint
Expert 100+
P: 1,208
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 5K+
P: 7,435
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 100+
P: 1,208
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 5K+
P: 7,435
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 2.5K+
P: 4,059
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.