473,548 Members | 2,636 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Displaying List Items in a Circle

Frinavale
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
  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 10636
drhowarddrfine
7,435 Recognized Expert Expert
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 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: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
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
  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 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...limitati ons!
Dec 16 '09 #10

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

Similar topics

7
3639
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 chooses one of the circles and returns that circle. The circles with the biggest areas should be the most likely to be chosen, but there
3
1928
by: Macca | last post by:
Hi, I am writing a C# application that needs a lot of calibration data. In a previous C++ application, i used a text file which displayed the various calibration data, between 25 and 40 different items and allowed the user to add/delete/change items. The user changed these setting through notepad.
2
2691
by: Srimadhi | last post by:
Displaying selected items at the top of the listbox Hi, I am having two listboxes - one with ids and second with the related names. When user selects an item in one listbox, the corresponding item will be selected in the second listbox too. The problem is, when the user selects an item and it is in the middle of the list, the user is not...
2
1620
by: tshad | last post by:
I am trying to add a different color to some of the rows in my dropdown list and this is how it is suggested to do this in a couple of articles. I have a DropDownList call PayDates and I was going to set any row not in my DataSet to Red. PayDates.Items.Attributes.Add("style", "color:red"); for(ktr=1;ktr<= PayDates.Items.Count -...
3
2174
by: hali | last post by:
Hi all I'm working on jsf & I have a problem displaying a list of Items via hand set my code is: <wap:dataTable value="#{predefinedESP.esps}" var="esp" > <wap:column > <wap:outputText value="{esp.currentText}"/> </wap:column> <wap:dataTable> my problem is that the list of Items...
0
1129
by: hali | last post by:
Hi all I'm working on jsf & I have a problem displaying a list of Items via hand set my code is: <wap:dataTable value="#{predefinedESP.esps}" var="esp" > <wap:column > <waputputText value="{esp.currentText}"/> </wap:column> <wap:dataTable> my problem is that the list of Items displayed in one long line and I need it to display each...
10
5725
by: gnewsgroup | last post by:
I've googled and tried various approaches, but could not resolve this problem. The article at MSDN: Displaying Images in a GridView Column only presents a simple case where all data (including the images) of the gridview come from a single table/datasource. Here is my situation. In my web application, I need to display customer bills info...
5
9836
by: Roy Smith | last post by:
Be kind to me, I'm a CSS newbie... I've been playing with drupal, building a web site (hyc-test.org). I started with the "sky" theme, but didn't like the way it rendered list items in menus. Spcifically, it started with: list-style-image: url(../../misc/menu-expanded.png);
10
3214
by: Aurora88 | last post by:
Hi guys. I have had this problem for so long now it's making me feel so depressed. :x I am trying to display 42 ovals (connect 4) on JPanel but it seems to display a huge white box at the top of the panel and the tips os 7 ovals and the rest of the JPanel is blue (the background colour is set to blue). My CircleGrid class: public class...
0
7510
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7437
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7947
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7463
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6032
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5081
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3473
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1050
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
748
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.