Расположение элементов HTML по кругу

#html #вёрстка #css

Всем здравствуйте!  

Только начинаю осваиваться с web-программированием, но решил с самого начала делать
все правильно: красиво и по стандартам, а то что у меня пока получилось по моему вопросу
я бы красивым не назвал.  Необходимо сверстать страницу следующего вида:  



В общем-то я все уже сверстал с помощью CSS-свойств position (absolute), top и left
с необходимыми значениями (с футером только беда - он вверх поднимается, но я просто
задал фиксированную высоту тому блоку, в котором все это отображается, и вроде все
нормально). Но что-то мне подсказывает, что это все можно было сделать... красивее
что-ли, по правильному в общем.  Никто никогда не сталкивался с подобной задачей? Или
может теоретически что подскажет?  

P.S. Встречал примеры подобного расположения картинок с помощью javascript (можно
было бы переделать под себя), но хочется справиться только с помощью HTML и CSS.
    

Ответы

Ответ 1

Можно взять готовый плагин jQuery Radmenu.
Можно позиционировать JavaScript'ом.
var divs = document.getElementsByTagName('div');
var delta = Math.PI * 2 / divs.length;
var x = 0, y = 0, angle = 0;

for (var i = 0; i < divs.length; i++) {
    divs[i].style.position = 'absolute';
    divs[i].style.left =  100 * Math.cos(angle) + 'px';
    divs[i].style.top = 100 * Math.sin(angle) + 'px';

    angle += delta;
}

И думаю, можно поисследовать возможности SVG для HTML5.