Creating a list using HTML or SVG that looks like the attached image -

how can create this:

i don't want use absolute positioning, need modular , easy use. googled have no clue search for.

before down voting, attempt see if that's possible create using html. searched clueless

i don't have time work out, figured point right way. disclaimers: have errors in - haven't tested or , i've been working in other languages recently. , first post.

anyway, i'd use javascript make this. jquery, can make them move little. make simple link list in html:

<ul class="radiallinks">     <li class="firefox"><a href="firefox.com">firefox.com</a></li>     <li><a href="#">link2</a></li>     <li><a href="#">link3</a></li>     <li><a href="#">link4</a></li>     <li class="active"><a href="#">link5</a></li>     <li><a href="#">link6</a></li> </ul> 

in css, style links , use image replacement sprites. said no absolute links, i'd guess beef relative page. anyway, i'd this:

.radiallinks { position: relative; height: 200px; width: 200px; } .radiallinks { position: absolute; height: 24px; width: 24px; text-indent: -9999px; background: transparent url('sprite.png') no-repeat 0 0; } .radiallinks .active { background-position: 0 -24px; } // specific custom overrides .radiallinks .firefox { background-position: 0 -48px; } .radiallinks .active.firefox { background-position: 0 -72px; } 

ideally you'd use sass more create image replacements , whatnot. i'd use compass creating sprites. position them jquery:

$(function() {         function radiallinks(){             var radiallinks = $('radiallinks'),                 position = radiallinks.position(),                 size = radiallinks.height();              var activechild = radiallinks.find('.active'),                 childsize = activechild.height(),                 children = radiallinks.find('li:not(.active)'),                 childcount = children.length,                 rotate = 360/childcount,                 rotateindex = 0,                 radius = height/2 - childheight/2,                 centerheight = position.top + size/2,                 centerwidth = position.left + size/2;              activechild.position().top = centerheight - childsize/2;             activechild.position().left = centerwidth - childsize/2;              children.each(function( index ) {                 $this = $(this);                 $this.position().top = centerheight + (radius * cos(rotate)) - childsize/2;                 $this.position().left = centerwidth + (radius * sin(rotate)) - childsize/2;                 rotateindex += rotate;             })          }     }); 

i'm out of time, i've got punt lines, hope helps.