Displaying List Items in a Circle

9,735 Recognized Expert Moderator Expert

What I'd like to do is take a list and display it's items in a circle.
For example (the order of the in the circle doesn't matter..except for Item1, it has to be at the top):

Expand|Select|Wrap|Line Numbers

  
        Item1

   Item2      Item3

        Item4

I am hoping to avoid JavaScript for this solution but I don't know if it's possible without JavaScript. Obviously Googling "List Items Circle CSS" is not helping (it just keeps pulling up how to display the bullet point as a circle)....

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.

I don't know what this technique is called so I'm hoping someone could give me some new keywords to search with...I hope that I can use this technique to position each list item.

Any suggestions as to how to solve this problem would be greatly appreciated.

Thanks

-Frinny

Dec 16 '09 #1

Subscribe Reply

10587

drhowarddrfine

7,435

Recognized Expert Expert

Threw this together:

Expand|Select|Wrap|Line Numbers

 
<!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.

Dec 16 '09 #2

drhowarddrfine

7,435

Recognized Expert Expert

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.

Dec 16 '09 #3

Frinavale

9,735

Recognized Expert Moderator Expert

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

Dec 16 '09 #4

Frinavale

9,735

Recognized Expert Moderator Expert

I was thinking about using the position:relative or the position:absolute 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

Dec 16 '09 #5

drhowarddrfine

7,435

Recognized Expert Expert

Ah, jeez .

Dec 16 '09 #6

Frinavale

9,735

Recognized Expert Moderator Expert

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

Expand|Select|Wrap|Line Numbers

 <!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

Dec 16 '09 #7

drhowarddrfine

7,435

Recognized Expert Expert

With a valid doctype, correct?

Dec 16 '09 #8

Frinavale

9,735

Recognized Expert Moderator Expert

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 :)

Dec 16 '09 #9

Frinavale

9,735

Recognized Expert Moderator Expert

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...limitations!

Dec 16 '09 #10

Dormilich

8,658

Recognized Expert Moderator Expert

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

Dec 16 '09 #11

Frinavale

9,735

Recognized Expert Moderator Expert

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

Dec 16 '09 #12

drhowarddrfine

7,435

Recognized Expert Expert

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">

Dec 16 '09 #13

Dormilich

8,658

Recognized Expert Moderator Expert

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

Dec 16 '09 #14

Marcin Karol

New Member

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

Feb 24 '11 #15

drhowarddrfine

7,435

Recognized Expert Expert

@Marcin - This thread is over a year old. You should start a new thread about javascript on the javascript board.

Feb 24 '11 #16

Frinavale

9,735

Recognized Expert Moderator Expert

Well I checked it out in Chrome and apparently top refers to the Window DOM object...which didn't make any sense to me since I declared a variable with that name in my code.

After changing the variable names from top and left to liTop and liLeft it worked properly:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<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 liLeft=Number(Math.round(circleCenterX+radius*Math.cos(angle)));

    var liTop=Number(Math.round(circleCenterY+radius*Math.sin(angle)));

    element.style.left = liLeft+"px";

    element.style.top = liTop+"px";

    angle+=step;   

  }
 
 </script>

</body>

</html>

Feb 24 '11 #17

by: Matthew Wilson | last post by:

I have a list of very simple circle objects: class Circle: def __init__(self, x,y,r): self.center =(x,y) self.r = r I want to write a function that accepts a list of circle objects and then...

Displaying List Items in a Circle

Similar topics