0 Replies - 518 Views - Last Post: 28 June 2016 - 06:43 PM

#1 asasaada   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 28-June 16

How do I prevent the [div] from jumping out of the box when clicked on

Posted 28 June 2016 - 06:43 PM

When you click on the div here it stays in the box http://www.cssdesk.com/DQJFx

When you click on the div here it jumps out of the box. How do I prevent it from jumping out of the box using this code? Also, on this one, how would I move it 2px over to the right cause it's off by that much? http://www.cssdesk.com/GmM8L

<a href="" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0; color:#000000; border-top-left-radius:50px;"></a>

<a href="" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>

<a href="" style="float:left;margin:2px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px"></a>

<div style="width:266px" onclick="myObject=document.getElementById('myObj'); myObject.style.display='block'; this.style.display='none'">
<a style="float:left;margin:2px; width: 88px; height: 24px; cursor: pointer; background-color:#ffffff; color:#000000; 
border-left:89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> </a>
</div>

<div id="myObj" style="display: none;">

</div>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;" onmouseover="this.style.backgroundColor='#abe9f7'" onmouseout="this.style.backgroundColor='#00a0b0'"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;" onmouseover="this.style.backgroundColor='#badac5'" onmouseout="this.style.backgroundColor='#6a4a3c'"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f; color:#000000;" onmouseover="this.style.backgroundColor='#b7ab9d'" onmouseout="this.style.backgroundColor='#cc333f'"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;" onmouseover="this.style.backgroundColor='#4679c7'" onmouseout="this.style.backgroundColor='#eb6841'"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951; color:#000000;" onmouseover="this.style.backgroundColor='#45bf21'" onmouseout="this.style.backgroundColor='#edc951'"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000; clear:left;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0;color:#00a0b0; clear:left;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#00a0b0; color:#000000; clear:left; border-bottom-left-radius:50px;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#6a4a3c;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#eb6841;color:#000000;"></a>

<a href="" target="_blank" style="float:left;margin:2px; width: 50px; height: 50px; background-color:#edc951;color:#000000; border-bottom-right-radius:50px;"></a>


Is This A Good Question/Topic? 0
  • +

Page 1 of 1