SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Belgium
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    colored dots (circles)

    Hi,

    I'm looking for a way to display a colored circle. The problem is that I need these circles with various colours, so I would very much like to avoid making an image for every single colour I need.

    CSS might do the job, but I have no idea where to start
    Hope any of you can help me out here?

    Thanks

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could do it with extremely large, coloured dotted borders on very small divs.

    If you were Tantek.

  3. #3
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Buddy Bradley
    You could do it with extremely large, coloured dotted borders on very small divs.
    Or just extremely large dots
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Colored Circles</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style type="text/css">
    <!-- 
    body { margin: 0; padding: 0; text-align: center; }
    #wrapper {width: 750px; text-align: left; margin: 0 auto;}
    #circles {width: 550px;height: 300px; border: 5px dotted yellow; letter-spacing: 0;}
    .red {color: red; font-size: 400px; line-height: 0.2em;}
    .blue {color: blue; font-size: 400px; line-height: 0.2em;}
    .green {color: green; font-size: 400px; line-height: 0.2em;}
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
    	<div id="circles">
    		<span class="red">.</span>
    		<span class="blue">.</span>
    		<span class="green">.</span>
    		<span class="red">.</span>
    		<span class="blue">.</span>
    	</div><!-- /#circles-->
    </div><!-- /#wrapper -->
    </body>
    </html>

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uhm... You could use SVG - although IE and Safari users (at least those not using the nightlybuilds) need a plugin for that... But Firefox and Opera have native support - at least, enough support to draw a circle.

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Belgium
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I've managed it with a div with a background-color and a background-image that is white in the corners and transparent in the middle (circular).

    However, I just can't get it to display to the left of my text. There is always a newline after the div. I have tried inline, but that doesn't display the dot, and inline-block but that apparently only works in Opera :/

    HTML Code:
    <div class="eventh">
    <div class="edate" style="background-color: rgb(242, 180, 31); width: 12px; height: 12px; background-image: url(images/dot.gif);"></div>
    29.07.1981<b>&nbsp;&nbsp;Fernando Alonso</b>
    </div>
    Nevermind about styling done inline, that is for testing purposes.

  6. #6
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can only assign 'sizes' to block level elements, and by default block level elements do force a CR/LF after them... which is why you need to 'float' it. If you add float:left; it will work just like align="left" does on a image tag. (well, not JUST like, but close enough for government work)... just be sure to add a 'clear:both' to the next element if it 'rides up' on you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •