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

HTML & CSS
1

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


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

The script supplied is quite difficult to understand.

Is it possible to create a complete test page without using embedded style and instead include the styles in the header section?

For example the verbose script of 68 lines has float:left;margin:2px; repeated 31 times which could have been replaced with a single class.

1 Like
3

What if the page I want to put it on only accepts html format?

4

What page do you mean that does not accept CSS format in a header?

5

Netvibes: https://www.netvibes.com/en

6

Isn’t that OPML (a “flavor” of XML) and not HTML ?

7

The link at the bottom of the page has UWA tutorials and that does look like it is a flavor of XML and nothing to do with HTML at all. Plus it uses external stylesheets even in the hello world tutorial.

2 Likes
8

They have an html widget / gadget where you can post anything you want in it.

9

But you’d still need to use the external stylesheet to style it - the same as for their UWA code.

Code for an HTML widget is not the same as coding an entire HTML page - for the widget all you have is the CONTENT and a few HTML tags that identify what the content is. To use the widget properly for what you are trying to do the first thing you need to do is delete everything you have done and start over again with the content to be marked up.

10

I assume the above is in response to my question What page do you mean that does not accept CSS format in a header?.

Why not create your own free test website?

I have just created this free website:

http://john-betong.byethost7.com/index.php

Edit:
Changed link from .HTML to .PHP and updated webpage

11

All I want to do is get help with this code using html.

12

So the real reason for using inline styles remains a secret?

1 Like
13

I want to post it on my netvibes page which only accepts html.

14

The link that you posted in your other thread states that this is not the case.

15

It took me about 5 minutes to create the free website i mentioned in post #10.

The site accepts HTML and if you care to click on the link you will notice two free CSS validation test links.

18

Their FAQ’s contain the following on the use of external CSS and JavaScript files. There seems nothing at all unusual about the manner in which this is being done.

1198×390 39.6 KB

19

20

See:

21

I have a feeling you already know how to do it using html, you just don’t want to tell me.

22

I’ve always been holding the blocks together using </br> tags til you showed me the thing with zoom text, and that it can be done a different way. Every row of 5 I would put a </br> tag. I never knew there was a way to keep the blocks in-place without falling.