How do I prevent the [div] when clicked on from pushing the content below down?

HTML & CSS
1

Update:
I was just able to get the 2nd code to the right side to be at margin 0,now it’s just with both of them, after clicking on the [div] keeping the margin at margin 0 so the bottom doesn’t drop down. http://testblogty678.blogspot.com/

Question:
When I click on both codes, the bottom part drops down, how do I fix it so it doesn’t drop down. How do I have 0 margin after the div is clicked?


<a href="" style="display:block; margin: -50px 0px 0 54px;width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" style="display:block; margin: -50px 0px 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000; "></a>

<a href="" style="display:block; margin: -50px 0px 0 162px; width: 50px; height: 50px; background-color:#eb6841;color:#000000; "></a>

<a href="" style="display:block; margin: -50px 0px 0 216px; width: 50px; height: 50px;background-color:#edc951;color:#000000; border-top-right-radius:50px; "></a>

<div style="width:266px;" onclick="myObject=document.getElementById('myObj5'); 
myObject.style.display='block'; this.style.display='none'">

<a style="display:block;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="myObj5" style="display: none;">

</div>

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

<a href="" target="_blank" style="display: block; margin: -50px 0px 0 54px; 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="display:block; margin: -50px 0px 0 108px; 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="display:block; margin: -50px 0px 0 162px; 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="display:block; margin: -50px 0px 0 216px; 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="display:block;margin: 4px 0px 0 0px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 216px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>


<a href="" target="_blank" style="display:block;margin: 4px 0px 0 0px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin:-51px 0px 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 216px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>

<a href="" target="_blank" style="display:block;margin: 4px 0px 0 0px; width: 50px; height: 50px; background-color:#00a0b0;color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin:-51px 0px 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 216px; width: 50px; height: 50px; background-color:#edc951;color:#000000;"></a>

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

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 54px; width: 50px; height: 50px; background-color:#6a4a3c; color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin:-51px 0px 0 108px; width: 50px; height: 50px; background-color:#cc333f;color:#000000;"></a>

<a href="" target="_blank" style="display:block; margin: -50px 0px 0 162px; width: 50px; height: 50px; background-color:#eb6841; color:#000000;"></a>

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

Hi there asasass,

the “object element” is an “inline element” and behaves like text.

So set the “object element” to “display: block”.

coothead

2 Likes
5

What is below the bottom line of the code shown? What comes next that we cannot see because it is not posted. And what comes AFTER that??? Please post it.

Never mind, forget your spaghetti code attempts.

Post the latest float code because it works flawlessly (AFAIK).

6

it happens with the float code also.

7

Your inline float code??? It didn’t when it left here.

8

Take a look at this please. Now click the [div]
http://htmltestfgf6546.blogspot.com/

Do you see that, what has to be adjusted?

9

That is not your inline float code. I asked for your inline float code page.

11

The bottom one in the middle. the second one below.
http://newtest180.blogspot.com/

12

I have one focus right now and that is to make the float code fit your 266px space. Nothing beyond that until it is fixed. Do you understand?

13

There: I labeled them.
http://newtest180.blogspot.com/

15

You have not described the problem as you see it and I will not touch it until the float issue is fixed. I am not stuttering.

16

the issue is getting rid of the white space after you click the div.
After you click the div, white space is created, and I don’t want that to happen.

http://testblogty678.blogspot.com/

17

I just fixed it, but I want you to tell me if this is a good way or not.
http://testblogty678.blogspot.com/

I added line-height: 0px;

<div id="myObj5" style="display: none;line-height: 0px;">

18

Why are you unable to follow @coothead’s very well articulated, concise, and clear instruction? Doing so WILL clear the problem.

19

Rubbish.

20

Why is it rubbish, how come? You find me a better way then, I bet you can’t.

21

Punkt.

22

I did do it that way, can’t you see that? Are you blind? They say BLOCK.

<div style="width:266px;" onclick="myObject=document.getElementById('myObj5'); 
myObject.style.display='block'; this.style.display='none'">

<a style="display:block;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="myObj5" style="display: none;">

</div>
23

No, you have not shown it to me, yet.

Take it word for word and show me how you followed his instructions.

Keep going…

What is between
<div id="myObj5" style="display:none">
and
</div>
???

25 
<object data="" type="application/x-shockwave-flash" id="player1" width="266" height="24">
<param name="movie" value=""/>
<param name="bgcolor" value="#000000"/>
<param name="width" value="266"/>
<param name="height" value="24"/>
<param name="quality" value="high"/>
<param name="menu" value="false"/>
<param name="wmode" value="opaque"/>
<param name="allowfullscreen" value="false"/>
<param name="allowscriptaccess" value="always"/>
<param name="flashvars"
value="file=http://hi5.1980s.fm/;stream.mp3&type=sound&autostart=true&controlbar=bottom&icons=false&duration=999999&volume=100&backcolor=000000&frontcolor=ffffff&lightcolor=0059dd"/></object>