[Anonymous]

Anonymous

#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!