471,579 Members | 1,279 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,579 software developers and data experts.

Displaying List Items in a Circle

Frinavale
9,735 Expert Mod 8TB
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
  1.  
  2.         Item1
  3.    Item2      Item3
  4.         Item4
  5.  
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
16 10166
drhowarddrfine
7,435 Expert 4TB
Threw this together:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type="text/css">
  6. #one,#four{text-align:center}
  7. #two{float:left}
  8. #three{text-align:right}
  9. </style>
  10. <body>
  11. <ul>
  12.         <li id="one">one</li>
  13.         <li id="two">two</li>
  14.         <li id="three">three</li>
  15.         <li id="four">four</li>
  16. </ul>
  17. </body>
  18. </html>
  19.  
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 Expert 4TB
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 Expert Mod 8TB
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 Expert Mod 8TB
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 Expert 4TB
Ah, jeez .
Dec 16 '09 #6
Frinavale
9,735 Expert Mod 8TB
I figured I'd post the solution using JavaScript for anyone else looking to do this.

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.  <title>Displaying list items in a circle demo</title>
  6.   <style type="text/css">
  7.   li{
  8.    position:absolute;
  9.    list-style:none;
  10.    width:20%;
  11.    text-align:center;
  12.   }
  13.  </style>
  14. </head>
  15. <body>
  16. <ul>
  17.   <li>3</li>
  18.   <li>4</li>
  19.   <li>5</li>
  20.   <li>6</li>
  21.   <li>7</li>
  22.   <li>8</li>
  23.   <li>9</li>
  24.   <li>10</li>
  25.   <li>11</li>
  26.   <li>12</li>
  27.   <li>1</li>
  28.   <li>2</li>
  29.  </ul>
  30.  <script type="text/javascript">
  31.   var listElements = document.getElementsByTagName("li");
  32.   var step = (2*Math.PI)/listElements.length;
  33.   var angle=0; 
  34.   var circleCenterX = 100;
  35.   var circleCenterY = 100;
  36.   var radius = 90;
  37.   for(var i = 0; i<listElements.length; i++)
  38.   { 
  39.     var element = listElements[i];
  40.     var left=Math.round(circleCenterX+radius*Math.cos(angle));
  41.     var top=Math.round(circleCenterY+radius*Math.sin(angle));
  42.     element.style.left = left+"px";
  43.     element.style.top = top+"px";
  44.     angle+=step;   
  45.   }
  46.  
  47.  </script>
  48. </body>
  49. </html>
Cheers

-Frinny
Dec 16 '09 #7
drhowarddrfine
7,435 Expert 4TB
With a valid doctype, correct?
Dec 16 '09 #8
Frinavale
9,735 Expert Mod 8TB
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 Expert Mod 8TB
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,656 Expert Mod 8TB
can’t you use absolute positioning and calculate all the necessary stuff server side?
Dec 16 '09 #11
Frinavale
9,735 Expert Mod 8TB
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 Expert 4TB
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,656 Expert Mod 8TB
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
Does any one know why this script does not working in Google Chrome and Opera?
Feb 24 '11 #15
drhowarddrfine
7,435 Expert 4TB
@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 Expert Mod 8TB
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <head>
  4.  <title>Displaying list items in a circle demo</title>
  5.   <style type="text/css">
  6.   li{
  7.    position:absolute;
  8.    list-style:none;
  9.    width:20%;
  10.    text-align:center;
  11.   }
  12.  </style>
  13. </head>
  14. <body>
  15. <ul>
  16.   <li>3</li>
  17.   <li>4</li>
  18.   <li>5</li>
  19.   <li>6</li>
  20.   <li>7</li>
  21.   <li>8</li>
  22.   <li>9</li>
  23.   <li>10</li>
  24.   <li>11</li>
  25.   <li>12</li>
  26.   <li>1</li>
  27.   <li>2</li>
  28.  </ul>
  29.  <script type="text/javascript">
  30.   var listElements = document.getElementsByTagName("li");
  31.   var step = (2*Math.PI)/listElements.length;
  32.   var angle=0; 
  33.   var circleCenterX = 100;
  34.   var circleCenterY = 100;
  35.   var radius = 90;
  36.   for(var i = 0; i<listElements.length; i++)
  37.   { 
  38.     var element = listElements[i];
  39.     var liLeft=Number(Math.round(circleCenterX+radius*Math.cos(angle)));
  40.     var liTop=Number(Math.round(circleCenterY+radius*Math.sin(angle)));
  41.     element.style.left = liLeft+"px";
  42.     element.style.top = liTop+"px";
  43.     angle+=step;   
  44.   }
  45.  
  46.  </script>
  47. </body>
  48. </html>
Feb 24 '11 #17

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

7 posts views Thread by Matthew Wilson | last post: by
2 posts views Thread by tshad | last post: by
10 posts views Thread by gnewsgroup | last post: by
5 posts views Thread by Roy Smith | last post: by
10 posts views Thread by Aurora88 | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by lumer26 | last post: by
reply views Thread by Vinnie | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.