div and relative positioning

  • superska

    #3932

    Hi,

    In the left sidebar of my homepage, I want to put links.

    When you click on those links it displays a small box in javascript on the right

    All this works well.

    However, I have difficulty in positioning these little boxes.

    Indeed, when I click on those links, the box is displayed correctly but the link goes down.

    I suppose it is a CSS problem, but frankly I can not find the solution.

    My CSS :

    .box_content {
    position: relative;
    top: 0px;
    left: 300px;
    width: 500px;
    padding: 16px;
    z-index:100112;
    overflow: auto;
    }

    The <div> in the sidebar

    <div style="position: absolute; top: 60px; left: 10px; z-index:2;">
    <div id="grayBG" class="grayBox" style="display:none;"></div>
    <div id="LightBox1" class="box_content" style="display:none;">
    <table cellpadding="3" cellspacing="0" border="0">
    <tr align="left">
    <td colspan="2" bgcolor="#FFFFFF" style="padding:10px;"><div onclick="displayHideBox('1'); return false;" style="cursor:pointer;" align="right">X</div><p><!-- Box content -->1Text of the box!!!</p></td>
    </tr>
    </table>
    </div>
    <a href="#" onclick="displayHideBox('1'); return false;">1Open Box</a>
    </div>

    and the script :

    <script type="text/javascript" language="javascript">
    function displayHideBox(boxNumber)
    {
    if(document.getElementById("LightBox"+boxNumber).style.display=="none") {
    document.getElementById("LightBox"+boxNumber).style.display="block";
    document.getElementById("grayBG").style.display="block";
    } else {
    document.getElementById("LightBox"+boxNumber).style.display="none";
    document.getElementById("grayBG").style.display="none";
    }
    }
    </script>

    Thanks for your help!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!