Center an onclick css box

Discussion in 'HTML & Website Design' started by Peuplarchie, Sep 1, 2008.

0
  1. #1
    Good day to you all,
    I'm working on a piece of code which display an image and when you click on it a full size image appears on a css box.

    I was wondering how can I center it on the screen, knowing the size will be different for each....

    
<img src="Web/ThePonder/The Ponder.png" width="160" onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('Ponder').style.display = 'block' " />
<div id='Ponder' class='Ponder' style='display: none;   position: absolute; margin: 0px auto -1px auto;   border: dashed black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; ' onfocus='this.blur();' onclick="document.getElementById('Ponder').style.display = 'none' " onmouseover='this.style.cursor="pointer" '>
<img src="Web/ThePonder/The Ponder.png" width="500" />
<br />
</div>
    Code (markup):

    If someone can help me understand how I can do this.
    Thanks !
     
    Peuplarchie, Sep 1, 2008 IP
  2. Peuplarchie

    Peuplarchie Peon

    Messages:
    37
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Resolved !

    style='display: none; position: absolute; left: 50%; margin: 0px 0 -1px -260px; border: dashed black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px;
    Code (markup):
    '
     
    Peuplarchie, Sep 1, 2008 IP