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

CSS Float Positioning Question

P: 8
Here is the functional part of my problem

Expand|Select|Wrap|Line Numbers
  1.     <a onmouseover="document.getElementById('PopUp').style.display = 'block';"><img src="http://www.garthbigelow.com/images/Marchsep.gif"></a>
  2.     <div id='PopUp' style='display: none; position: absolute; border: solid black 1px; padding: 10px; 
  3.                            background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
  4.          onfocus='this.blur();'
  5.          onmouseout= "document.getElementById('PopUp').style.display = 'none' ">
  6.     This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.
  7.     </div>

Yes, this does what I want. It creates a float which appears when the mouse points to the image and disappears when the mouse leaves the float.
What I can't get, is that I want the float to be positioned so that the top left corner of the float is the same as the top left corner of image.

I've played with this for hours, but I just barely understand what I've already done, let alone what I'm trying to do.

Thanks
Garth
Mar 21 '07 #1
Share this Question
Share on Google+
10 Replies


Expert 100+
P: 1,892
Here is the functional part of my problem

Expand|Select|Wrap|Line Numbers
  1.     <a onmouseover="document.getElementById('PopUp').style.display = 'block';"><img src="http://www.garthbigelow.com/images/Marchsep.gif"></a>
  2.     <div id='PopUp' style='display: none; position: absolute; border: solid black 1px; padding: 10px; 
  3.                            background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
  4.          onfocus='this.blur();'
  5.          onmouseout= "document.getElementById('PopUp').style.display = 'none' ">
  6.     This is a CSS Popup that can be positioned anywhere you want on the page and can contain any test and images you want.
  7.     </div>

Yes, this does what I want. It creates a float which appears when the mouse points to the image and disappears when the mouse leaves the float.
What I can't get, is that I want the float to be positioned so that the top left corner of the float is the same as the top left corner of image.

I've played with this for hours, but I just barely understand what I've already done, let alone what I'm trying to do.

Thanks
Garth
You got a link to the page? So it's popping up just not where you want it too?

Aric
Mar 21 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
Because the image occupies that space as part of the normal flow. To remove it from the normal flow, you can float the image left.

For fun, float the image left but remove position:absolute from the div and see if you like it.
Mar 21 '07 #3

P: 8
You got a link to the page? So it's popping up just not where you want it too?

Aric
I've been testing it locally, really didn't post it anywhere but I can if that's important.
Yes, it's just not popping up where I want it. I can position it in absolute terms, but I didn't do that in the example, because what I want to do is position it so that the upper top left corner is the same as that of the image.
Mar 21 '07 #4

P: 8
Because the image occupies that space as part of the normal flow. To remove it from the normal flow, you can float the image left.

For fun, float the image left but remove position:absolute from the div and see if you like it.
removed 'position:absolute' added 'float:left'. It caused no noticeable change in the action of the code.
Mar 21 '07 #5

P: 8
Because the image occupies that space as part of the normal flow. To remove it from the normal flow, you can float the image left.

For fun, float the image left but remove position:absolute from the div and see if you like it.
Ah, just understood what you were saying, but the centering of the picture is important to the final product.
Mar 21 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
So what did you do? I assume the "for fun" solution was not what you want so did the first one work? If not, what doctype are you using and which browser?
Mar 22 '07 #7

P: 8
So what did you do? I assume the "for fun" solution was not what you want so did the first one work? If not, what doctype are you using and which browser?
Let me try this again. I've been trying to figure this out in the interim so the code has changed some as I keep trying to remove elements.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5. <title>float test</title>
  6. </head>
  7. <body>
  8.  
  9.     <p align="center">
  10.     <img src="images/Marchsep.gif" onmouseover="document.getElementById('PopUp').style.display = 'block'; 
  11.                                                 document.getElementById('PopUp').style.top = this.top;
  12.                                                 document.getElementById('PopUp').style.left = this.left;">
  13.     <div id='PopUp' style='float: none; display: none; position: absolute; top: 0; left:0; border: solid black 1px; padding: 10px; 
  14.                            background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
  15.          onmouseout= "this.style.display = 'none' ">
  16.     This is a CSS Popup. I would like it to be positioned so that the top left of the pop up is based on the top left of the IMG.
  17.     </div></p>
  18.  
  19. </body>
  20.  
  21. </html>
  22.  
This code produces an error, I suspect that this because img.left and/or img.top are probably not legal elements.
This should hopefully be enough to inform on what I am trying to do, and hopefully a solution will be provided.

Thank you for your time on this so far.
Garth
Mar 22 '07 #8

Expert 100+
P: 1,892
what doctype are you using and which browser?
I don't see a doc type in your code.
Mar 22 '07 #9

drhowarddrfine
Expert 5K+
P: 7,435
You need a doctype. See the sticky at the top of this board.
Change this to utf-8:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
************************************************** ***************
align is deprecated. Use css instead
<p align="center">
************************************************** **************
There is no "float:none" document.getElementById('PopUp').style.left = this.left;">
<div id='PopUp' style='float: none; display: none; position: absolute; top: 0; left:0; border: solid black 1px; padding: 10px;
background-color: rgb(255,255,225); text-align: justify; font-size: 12px; width: 235px;'
Mar 22 '07 #10

drhowarddrfine
Expert 5K+
P: 7,435
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.     <meta http-equiv="content-type" content="text/html;charset=utf-8" >
  7.     <style type="text/css">
  8.  
  9.     </style>
  10.   </head>
  11. <body>
  12. <p>
  13. <a onmouseover="document.getElementById('PopUp').style.display = 'block';">
  14.     <img src="http://www.garthbigelow.com/images/Marchsep.gif" style="float:left">
  15. </a>
  16. </p>
  17. <div id='PopUp' style='display: none; position:absolute; border: solid black 1px; padding: 10px; 
  18.                       background-color: rgb(255,255,225); text-align: justify; font-size: 12px; 
  19.                       width: 235px;'
  20.  
  21.                      onmouseout= "document.getElementById('PopUp').style.display = 'none' ">
  22.     This is a CSS Popup that can be positioned anywhere you want on the page 
  23.     and can contain any test and images you want.
  24. </div>
  25.  
  26. </body>
  27. </html>
Mar 22 '07 #11

Post your reply

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