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):
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
16 10751 
Threw this together: -
<!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.
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 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
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
 Frinavale 9,735
Recognized Expert Moderator Expert
I figured I'd post the solution using JavaScript for anyone else looking to do this. - <!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
With a valid doctype, correct?
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 :)
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!
Sign in to post your reply or Sign up for a free account.
Similar topics | |
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
|
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.
|
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 able to know
whether it is selected or not. Is there a way to display all the selected
items...
|
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 - 1;ktr++)//
{
|
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 displayed in one long line and I need it to display each esp.currentText in a new row
| | |
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 esp.currentText in a new row
|
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 in a gridview.
Customer names and contact info are from the Customer table.
|
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);
|
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 CircleGrid extends JPanel implements MouseListener, MouseMotionListener
{
int ifRed;
int...
|
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 usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
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 synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
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 captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
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 most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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 into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
