Geek Answers Handbook

Can I scatter divs around a page randomly using only HTML and CSS?

I want to have a box in the center of the page and several boxes scattered around, with different sizes, random positions and no overlap.

I think this cannot be done only with html and css, and a javascript / html DOM is required.

Have you seen examples of this? Do you have a hint or code that might be helpful? Do not mind if this does not solve the whole problem, a solution to one of the problems (for example, without overlapping) will also be useful!

Thanks alt text http://img99.imageshack.us/img99/3563/scattered.jpg

+5
source share
4 answers

, div . :

#centered {
  width: 400px; height: 200px;
  position: absolute; top: 50%; left: 50%;
  margin-left: -200px; margin-top: -100px;
}

, divs div, position: relative.

HTML snippit:

<div id="centered">
  <div id="other"></div>
</div>

, CSS:

#other {
  width: 200px; height: 100px;
  position: relative; top: -150px; left: 180px;
}

, :

div {
  border: 1px solid black;
}

, , Javascript div.

+5

, , . , HTML CSS. CSS , , , .

, CSS. , :

<link rel="stylesheet" type="text/css" href="styles.php"/>

styles.php - PHP, CSS.

+3

: , , HTML CSS.

0

HTML CSS, :

  • , PHP, , .
  • use a basic fixed stylesheet and change the DOM with javascript

as for the non-overlapping part, you need to do a little math / geometry: create the coordinates for the vertices, making sure that they don’t fall into the previously created box (boring, but pretty easy) and use them position: absoluteto place them.

0
source

More articles:


All Articles