Displaying List Items in a Circle

**drhowarddrfine** · Dec 16 '09, 04:23 PM

Threw this together:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#one,#four{text-align:center}
#two{float:left}
#three{text-align:right}
</style>
<body>
<ul>
        <li id="one">one</li>
        <li id="two">two</li>
        <li id="three">three</li>
        <li id="four">four</li>
</ul>
</body>
</html>

I don't like floating things like that but it works. I'd prefer relative or absolute positioning, perhaps placing the ul inside a div.

**drhowarddrfine** · Dec 16 '09, 04:25 PM

I remember reading a post about positioning something in the middle of the page (here). The post used CSS and some variables (H and W) to position the element in the middle of the page.

Didn't read this thoroughly. There is no such thing as a CSS variable.

**Frinavale** · Dec 16 '09, 04:31 PM

I guess I should have been a bit more clear.
The list items contain hyperlinks which are the menu for the site.
The menu is a multi-level menu and I wanted to display the first level in the outter circle, the second level as an inner circle of the outter one, and the thrid level as a circle within the second level.

I'm using a CMS that generates the menu in a list for me.
There are no IDs given to the list items except for the "current" list item (given an ID of "current") It's pretty annoying.

-Frinny

**Frinavale** · Dec 16 '09, 04:38 PM

I was thinking about using the position:relati ve or the position:absolu te style instead of floating the elements...

The more I think about how to do this the more I realize that I'm going to have to use JavaScript....

The "circle" algorithm is a little too complicated for CSS (even if it had variables to use).

Thanks for your help Doc

-Frinny

**drhowarddrfine** · Dec 16 '09, 04:42 PM

Ah, jeez .

**Frinavale** · Dec 16 '09, 05:40 PM

I figured I'd post the solution using JavaScript for anyone else looking to do this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Displaying list items in a circle demo</title>
  <style type="text/css">
  li{
   position:absolute;
   list-style:none;
   width:20%;
   text-align:center;
  }
 </style>
</head>
<body>
<ul>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>1</li>
  <li>2</li>
 </ul>
 <script type="text/javascript">
  var listElements = document.getElementsByTagName("li");
  var step = (2*Math.PI)/listElements.length;
  var angle=0; 
  var circleCenterX = 100;
  var circleCenterY = 100;
  var radius = 90;
  for(var i = 0; i<listElements.length; i++)
  { 
    var element = listElements[i];
    var left=Math.round(circleCenterX+radius*Math.cos(angle));
    var top=Math.round(circleCenterY+radius*Math.sin(angle));
    element.style.left = left+"px";
    element.style.top = top+"px";
    angle+=step;   
  }

 </script>
</body>
</html>

Cheers

-Frinny

**drhowarddrfine** · Dec 16 '09, 05:50 PM

With a valid doctype, correct?

**Frinavale** · Dec 16 '09, 05:55 PM

Hah :)
Yeah sure...funny thing is that I just whipped this up in the "TryIt Editor" on the w3schools site and they don't include a doctype.

Edited the post to add the doctype :)

**Frinavale** · Dec 16 '09, 06:02 PM

The only thing I'm a little worried about is that the menu is going to look aweful if the user has JavaScript disabled...

Gurr...limitati ons!

**Dormilich** · Dec 16 '09, 06:42 PM

can’t you use absolute positioning and calculate all the necessary stuff server side?

**Frinavale** · Dec 16 '09, 06:49 PM

Haha. Dorm, do you remember how long it took me to figure out how to retrieve a parameter from an XML file using the framework for that CMS? I couldn't imagine the mess that is involved with generating the menu!

-Frinny

**drhowarddrfine** · Dec 16 '09, 08:00 PM

Wrong doctype. New pages should never use the transitional doctype. Use this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Or if one insists on using the XHTML one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

**Dormilich** · Dec 16 '09, 08:50 PM

I thought it would be that neat ASP I have no idea about, that you were to use as the back end…

**Marcin Karol** · Feb 24 '11, 07:22 AM

Does any one know why this script does not working in Google Chrome and Opera?

Displaying List Items in a Circle

Displaying List Items in a Circle

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment