Размещение елементов в 'DIV'. [Архив форума]

cinedd

09.06.2011, 19:11

Написал простой ColorPicker :write: , который отображаеться в форме квадрата 10х10. При исполнении кода генерируються buttons і помещяються в 'div' по 10 кнопок на 1 дивку.

http://s2.ipicture.ru/uploads/20110609/thumbs/2ULVf503.png
---
for(var i=0;i<=10;++i) {
if(0 == i%1, ++i) {
var div = document.createElement("div");
div.style.clear = "both";
parent.appendChild(div);
}

var btn = new Button();
btn.render(parent);
---
Теперь хочу чтобы кнопки отображались в виде ромба, а не квадрата, но не знаю как :(

http://s2.ipicture.ru/uploads/20110609/w79UoC06.png

ksa

09.06.2011, 21:38

хочу чтобы кнопки отображались в виде ромба
Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
.box {
float: left;
width: 10px;
height: 10px;
}
.on {
background-color: red;
}
.end {
clear: both;
}
</style>
<script>
function Go() {
var oc=document.getElementById('container')
var n=17
var k=0
var inc=1
var nk=Math.floor(n/2)
var i,j,o
for (i=0; i<n; i++) {
for (j=0; j<n; j++) {
o=document.createElement("div")
o.className=(Math.abs(nk-j))>k? 'box': 'box on'
oc.appendChild(o)
}
o=document.createElement("div")
o.className='end'
oc.appendChild(o)
k=k+inc
if ((k+1)>nk) inc=-1
}
}
</script>
</head>
<body onload='Go()'>
<div id='container'></div>
</body>
</html>