htmlcoding3456 htmlcoding3456 - 5 months ago 9
HTML Question

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

It was missing this piece of code. [margin:0 0 0 2px; clear:left;]

The 1st Code uses

display:inline-block;vertical-align
the 2nd Code uses
float:left;margin:
Also, the 1st Code uses
</br>
tags which without them it would fall apart.

The 2nd Code doesn't come apart when you zoom text in, the 1st Code does.

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

Image: http://i.imgur.com/d2vrV4I.png

Code 2.) 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

Image: http://i.imgur.com/45BEoL3.png

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

Answer

You should use different margins for your <a> elements.

For the first five, use this: margin: 2px 2px 0 2px;

For the 6th (inside the div): margin: 0;

For the next five: margin: 0 2px 2px 2px;

Margins (and paddings) applied clockwise in the following order: top right bottom left.