3 Replies - 4527 Views - Last Post: 29 June 2010 - 01:19 PM

#1 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Display List Items in a Circle using CSS

Posted 29 June 2010 - 12:49 PM

I have been searching for help with using CSS to display list items in a circle because I have an idea for a menu.

I'm not getting very far because I keep getting search results on how to change the bullet for the list item to a "circle" instead.

I was wondering if this were possible with HTML 4?

I am able to get the elements to display in a circle using Javascript but I was hoping to get away from depending on Javascript in case someone has it disabled.

Here is my current HTML and Javascript (please note that I'm not trying to create a clock using CSS...I kind of got carried away when I was playing with this a while ago...I want to create a menu that is half a circle)
<!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>
 <style type="text/css">
  li{
   position:absolute;
   list-style:none;
   text-align:center;
   color:#CCCCCC;  
  }
 </style>
</head>
<body>
  
 <ul>
  <li>12</li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>1 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>2 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>3 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>4 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>5 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>6 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>7 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>8 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>9 </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>10</li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li>11</li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
  <li> . </li>
 </ul>
 <div id="time" style="position:absolute; top:280px;"></div>
 <script type="text/javascript">

 drawClock();
 drawTime();


 function drawTime(){
  var listElements = document.getElementsByTagName("li");
  for(var i=0; i<listElements.length; i++){
   listElements[i].style.color="#CCCCCC";      
   listElements[i].style.fontWeight="normal";
   listElements[i].style.border="none";
  }
  var d = new Date();
  var second = d.getSeconds();
  var hour = d.getHours();
  var minute = d.getMinutes();

  document.getElementById("time").innerHTML=hour+":"+minute+":"+second;
  if(hour>12){hour -= 12;}
  hour=hour*5;
  
  listElements[hour].style.color="blue";
  listElements[hour].style.fontWeight="bold";
  listElements[hour].style.border="solid 1px blue";
  listElements[minute].style.color="green";
  listElements[minute].style.fontWeight="bold";
  listElements[minute].style.border="solid 1px green";
  listElements[second].style.color="orange";
  listElements[second].style.border="solid 1px orange";


  setTimeout(drawTime,1000);
 }

 function drawClock(){
  var listElements = document.getElementsByTagName("li");
  var step = (2*Math.PI)/listElements.length;
  var angle=1.5*Math.PI;
  var circleCenterX = 120;
  var circleCenterY = 120;
  var radius = 120;
  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>


Thank you for your time!

-Frinny

This post has been edited by Frinavale: 29 June 2010 - 12:50 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Display List Items in a Circle using CSS

#2 moopet  Icon User is offline

  • binary decision maker
  • member icon

Reputation: 339
  • View blog
  • Posts: 1,185
  • Joined: 02-April 09

Re: Display List Items in a Circle using CSS

Posted 29 June 2010 - 01:12 PM

Well, on a case-by-case basis you could just run the above code, spit out the absolute positions of each li and save them to your style sheet for next time. Just hard-code it. Obviously, that wouldn't be much use for a list of unknown length...
I don't believe there is any way to do this without using something to do the evaluation at runtime.
Was This Post Helpful? 1
  • +
  • -

#3 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6213
  • View blog
  • Posts: 10,727
  • Joined: 28-September 07

Re: Display List Items in a Circle using CSS

Posted 29 June 2010 - 01:14 PM

Couldn't you technically set up different classes for the <li>'s? Set the left-margin/padding/etc different for each one until it displays a half circle?

This could work with an inconstant number of items in the list also... depending on how in-depth you want to get with scripting. PHP FTW! :wub:

This post has been edited by BenignDesign: 29 June 2010 - 01:15 PM

Was This Post Helpful? 1
  • +
  • -

#4 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: Display List Items in a Circle using CSS

Posted 29 June 2010 - 01:19 PM

Sounds ugly to me but I'll give it a try :)

Thanks for the speedy replies!

-Frinny
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1