SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    finding size of element with border radius

    Hi,
    I am using css's border-raduis to make a circle. However its hard to find height and width of the circle, as i have a psd for the design in which there are these circles, but when i do css, i cannot figure exact measurement of how to define. how can i do that?

    Edit : and how i make text in the circle, be centered from 4 sides?
    All those who wander aren't lost.

  2. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    In a nutshell:
    • For the circle: give the element equal width and height, and a {border-radius: 50%;}.
    • For the horizontal and vertical centering: give the element a {display: table-cell; text-align: center; vertical-align: middle;}

    Test: css3-circle

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    While it works on one, i have many circles. and it doesn't work on others, something like this
    All those who wander aren't lost.

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Yes, the absolute position of the surrounding div's is disturbing the matter.

    • You can migrate all {border-radius: 50%; display: table-cell; text-align: center; vertical-align: middle;} to the inner elements (the links).
    • Also the links (and not the div's) get their different width's and height's.
    • For the div's only the {top: ..px; left: ..px;} is resting for the arranging of the position of the circles.

    Test: bubbles-nw.htm
    (see source code)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Franckys site seems to be down at the moment so I'll re-iterate the problem.

    You can't absolutely position table-cells as that is against the spec and because it makes no sense. You can absolutely position tables but some browsers get a bit picky with it so the best thing to to is to absolutely position the parent and then use display table and display table-cell on 2 inner elements instead. As you have a nested p element and nested anchor already then they will do nicely.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .bubbles {
    	width:370px;
    	float: left;
    	position:relative;
    }
    .round{
    	opacity:0.5;
    	position:absolute;
    	text-align:center;	
    	word-wrap:break-word;
    }
    .bub {
    	height:150px;
    	width:150px;
    	background:#eaf6fe;
    	position:relative;
    	margin-top:100px;
    	color:#35a6f1;
    }
    .bub1 {
    	background-color: #F0FFF6;
    	height: 130px;
    	width: 130px;
    }
    .bub p { color:#fff; }
    .bub2 {
    	background: #FFFCE9;
    	height: 100px;
    	margin: -216px 11px 0 190px;
    	width: 100px;
    }
    .bub3 {
    	background:#fceeff;
    	height:120px;
    	width:120px;
    }
    .bub4 {
    	background:#e8e8e8;
    	height:70px;
    	width:70px;
    }
    .bub5 {
    	background:  #5DF465;
    	height: 120px;
    	left: 566px;
    	top: 56px;
    	width: 120px;
    }
    .bub6 {
    	background:#FF9843;
    	height: 70px;
    	left: 592px;
    	padding: 30px;
    	top: 182px;
    	width: 70px;
    }
    .round {
    	border-radius: 50%;
    	text-align:center;
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:600;
    }
    .round p {
    	display:table;
    	width:100%;
    	height:100%;
    	margin:0;
    	text-align:center;
    	table-layout:fixed;
    }
    .bub1 a {color:#22cc66}
    .bub2 a {color:#ebcf3b}
    .bub3 a {color:#e153ff}
    .bub4 a {color:#b0b0b0}
    .bub6 a {color:#ffa866}
    .round a {
    	display:table-cell;
    	vertical-align:middle;
    	padding:5px;
    	word-wrap:break-word;
    	text-decoration:none;
    }
    </style>
    </head>
    
    <body>
    <div class="bubbles">
    		<div class="round bub"> <p><a href="">aaaa</a></p></div>
    		<div class="round bub1"><p><a href="">aaaaa</a></p></div>
    		<div class="round bub2"><p><a href="">aaaaaaaaaa</a></div>
    		<div class="round bub3"><p><a href="">aaaa</a></p></div>
    		<div class="round bub4"><p><a href="">aaaa</a></p></div>
    		<div class="round bub5"><p><a href="">aaaaa</a></p> </div>
    		<div class="round bub6"><p><a href="">aaa</a></p></div>
    </div>
    <!--bubbles-->
    </body>
    </html>

    You will need to sort out the positions, colours and text color as I didn't take too much care with them. You will also need to adjust the font-size for small circles or at least make them wide enough to hold the text.

    It may also be better to use rgba on the backgrounds rather than opacity to stop the text fading (unless that's what you wanted).

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Ah, indeed the site was down (even FTP). But looking at it, just 2 minutes ago (s)he was back.
    Edit: Hmm, down again now.
    Edit Edit: back again... Don't know what's happening.

    In the testpage bubbles-nw.htm I did this:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>bubbles-nw</title>
    <style type="text/css">
    .bubbles{
    	width: 280px;
    	height: 480px;
    	float: left;
    	border: 1px dotted fuchsia;
    	position:relative;
    	}
    .bubbles div {
    	position: absolute; /* = relative to the .bubbles container! */
    	}
    .bubbles a {
    	border-radius: 50%;
    	display:table-cell;
    	vertical-align:middle;
    	text-align:center;
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:600;
    	text-decoration:none;
    	text-shadow: 1px 1px white;
    	border: 1px dotted transparent;
    	opacity:0.5;
    	transition: opacity .3s ease-in-out;
    	}
    .bubbles a:hover,
    .bubbles a:focus {
    	opacity: .9;
    	border-color: #99CDF1;
    	}
    
    .bub0 {
    	top: 20px;
    	left: 40px;
    	}
    .bub0 a {
    	width:150px;
    	height:150px;
    	background-color: #C7E7FD;
    	color:#1064A4;
    	}
    
    .bub1 {
    	top: 150px;
    	left: 20px;
    	}
    .bub1 a {
    	width: 130px;
    	height: 130px;
    	background-color: #BCFED5;
    	color: #1C8C21;
    	}
    
    .bub2 {
    	top: 110px;
    	left: 130px;
    	}
    .bub2 a {
    	width: 120px;
    	height: 120px;
    	background-color: #FFF3A5;
    	color :#766410;
    	}
    
    .bub3 {
    	top: 260px;
    	left: 40px;
    	}
    .bub3 a {
    	width: 90px;
    	height: 90px;
    	background: #F3B9FF;
    	color: #D619FF;
    	}
    
    .bub4 {
    	top: 210px;
    	left: 120px;
    	}
    .bub4 a {
    	width: 120px;
    	height: 120px;
    	background: #DCDCDC;
    	color: #6E6E6E;
    	}
    
    .bub5 {
    	top: 310px;
    	left: 100px;
    	}
    .bub5 a {
    	width: 110px;
    	height: 110px;
    	background: #5DF465;
    	color: #800080;
    	}
    
    .bub6 {
    	top: 340px;
    	left: 15px;
    	}
    .bub6 a {
    	width: 100px;
    	height: 100px;
       	background: #FF9843;
    	color: #964000;
    	}
    </style>
    </head>
    
    <body>
    <div class="bubbles">
        	<div class="bub0"><a href="#">aaaaa<br />CREAM</a></div>
        	<div class="bub1"><a href="#">aaaaa<br />aaaa</a></div>
        	<div class="bub2"><a href="#">aaa<br />aaaa</a></div>
        	<div class="bub3"><a href="#">aaaa</a></div>
        	<div class="bub4"><a href="#">aaaaa</a></div>
        	<div class="bub5"><a href="#">aaaa</a></div>
        	<div class="bub6"><a href="#">aaa<br />aaaaaaaaaaaa</a></div>
    </div><!--bubbles-->
    </body>
    </html>
    Comparing with Paul's code, I omitted the <p>'s (didn't see why they are needed), added a border around the bubbles at hover, added an opacity transition for smooth hovering, and used <br />'s instead of {word-wrap:break-word;}.

    Assuming you like the opacity of the text, I didn't use rgba colors (and appropriate MS-filters for older IE's) but made a bit text-shadow for better view of the text.

    bubbles.png

    To go around font-sizing problems (scaling by the visitor), the width and height of the bubbles could be given in em's instead of px (has to be figured out for each bubble).
    Last edited by Paul O'B; Nov 6, 2013 at 16:48.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Good work Francky

    Comparing with Paul's code, I omitted the <p>'s (didn't see why they are needed)
    The ps aren't really necessary. It's just an odd bug I've run into a few times but doesn't really seem to be an issue here.

  8. #8
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    I know the function of the <p>'s!

    They can be used as hook to get rid of the hoverable/clickable outside parts of the circles in Firefox.


    • Note: Latest Chrome, Opera and IE10 dont't grab the red outside parts in bubbles-nw.htm, but FF23/FF25 and Safari-Win do!
    • Note: the (blue) overlapping inner parts aren't removable, due to the stacking order (automatic z-indexes) of the circles; I'm afraid there is no escape for that.

    Method I used:
    • The <p>'s get the width and height of the circle (in em's this time, for font-scaling). *)
    • The <a>'s get no width, but a {display: block}, to serve the whole circle area.
    • The {display: table-cell;} is not used anymore, so the vertical height and vertical centering is build by a height in % and a padding-top in % (together 100%) for each circle. In the meantime this has the opportunity to fine tune in a "visual vertical middle" (often different from the "real middle" by a table-cell).


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>bubbles-nw 2</title>
    <style type="text/css">
    .bubbles{
    	width: 280px;
    	height: 480px;
    	float: left;
    	border: 1px dotted fuchsia;
    	position:relative;
    	}
    .bubbles div {
    	position: absolute; /* = relative to the .bubbles container! */
    	}
    .bubbles p {
    	margin: 0;
    	padding:0; 
    	}
    .bubbles a {
    	display: block;
    	border-radius: 50%;
    	text-align:center;
    	font-family: 'Source Sans Pro', sans-serif;
    	font-weight:600;
    	text-decoration:none;
    	text-shadow: 1px 1px white;
    	border: 1px dotted transparent;
    	opacity:0.5;
    	transition: opacity .3s ease-in-out;
    	}
    .bubbles a:hover,
    .bubbles a:focus {
    	opacity: .9;
    	border-color: #99CDF1;
    	}
    
    .bub0 {
    	top: 27px;
    	left: 37px;
    	}
    .bub0 p {
    	width: 8.5em;
    	height: 8.5em;
    	}
    .bub0 a{
    	height: 64%;
    	padding-top: 36%;
    	background-color: #C7E7FD;
    	color:#1064A4;
    	}
    
    .bub1 {
    	top: 150px;
    	left: 20px;
    	}
    .bub1 p {
    	width: 7.5em;
    	height: 7.5em;
    	}
    .bub1 a {
    	height: 63%;
    	padding-top: 37%;
    	background-color: #BCFED5;
    	color: #1C8C21;
    	}
    
    .bub2 {
    	top: 110px;
    	left: 120px;
    	}
    .bub2 p {
    	width: 9em;
    	height: 9em;
    	}
    .bub2 a {
    	height: 66%;
    	padding-top: 34%;
    	background-color: #FFF3A5;
    	color :#766410;
    	}
    
    .bub3 {
    	top: 260px;
    	left: 40px;
    	}
    .bub3 p {
    	width: 5.5em;
    	height: 5.5em;
    	}
    .bub3 a {
    	height: 61%;
    	padding-top: 39%;
    	background: #F3B9FF;
    	color: #D619FF;
    	}
    
    .bub4 {
    	top: 210px;
    	left: 110px;
    	}
    .bub4 p {
    	font-size: .95em;
    	width: 8em;
    	height: 8em;
    	}
    .bub4 a {
    	height: 56.5%;
    	padding-top: 43.5%;
    	background: #DCDCDC;
    	color: #6E6E6E;
    	}
    
    .bub5 {
    	top: 310px;
    	left: 100px;
    	}
    .bub5 p {
    	font-size: .95em;
    	width: 7em;
    	height: 7em;
    	}
    .bub5 a {
    	height: 56.5%;
    	padding-top: 43.5%;
    	background: #5DF465;
    	color: #800080;
    	}
    
    .bub6 {
    	top: 340px;
    	left: 15px;
    	}
    .bub6 p {
    	width: 6.5em;
    	height: 6.5em;
    	}
    .bub6 p span {
    	font-size: .9em;
    	}
    .bub6 a {
    	height: 73%;
    	padding-top: 27%;
    	background: #FF9843;
    	color: #964000;
    	}
    </style>
    </head>
    
    <body>
    
    <div class="bubbles">
    	<div class="bub0"><p><a href="#">a<br />aaaaaaaaa</a></p></div>
    	<div class="bub1"><p><a href="#">aaaaaaaa<br />aaaaaaaa</a></p></div>
    	<div class="bub2"><p><a href="#">aaaa<br />aaaaaa</a></p></div>
    	<div class="bub3"><p><a href="#">aaaaa</a></p></div>
    	<div class="bub4"><p><a href="#">aaaaaaaaa</a></p></div>
    	<div class="bub6"><p><a href="#">aaa<br /><span>aaaaaaaaa</span></a></p></div>
    	<div class="bub5"><p><a href="#">aaaaaaaaa</a></p></div>
    </div>
    
    </body>
    </html>
    Test: bubbles-nw-2.htm
    O.k. in Chrome, FF23/25, Opera and IE10.
    Doesn't help for Safari-Win.
    ___________
    *) To get it 100% zoomable, the positioning should also be given in em's. Depending of the design, maybe a max-width/height is needed to stay inside the bubble-container.
    Last edited by Paul O'B; Nov 6, 2013 at 16:49.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Looking good now Francky

  10. #10
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Only the poor lte IE 8 visitors...



    bubbles?
    opacity?


    =====
    The opacity for IE8 and before can be restored by adding a MS-filter:
    HTML Code:
    <!--[if lte IE 8]>
    	<style type="text/css">
    		.bubbles a { 
    			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* first! */
    			filter: alpha(opacity=50); /* second! */
    			}
    		.bubbles a:hover,
    		.bubbles a:focus {
    			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* first! */
    			filter: alpha(opacity=90); /* second! */
    			}
    	</style>
    <![endif]-->
    ======
    For the circles in IE8 and before I tried IE-CSS3 and css3PIE.
    • IE-CSS3 doesn't work in this case (positioning rounded squares all over the page).
    • css3PIE can make the circles just as desired, but unfortunately the PIE.htc is interfering with the MSfilters: the opacity doesn't work anymore.

    =======
    So the choice is:
    1. MSfilters but no PIE: Squares with opacity (and other hover-opacity), or
    2. PIE but no MSfilters: Circles without transparency.

    I think I prefer the last one. To give for lte IE 8 the impression of the opacity-change, you have to set all backgrounds and colors for each bubble, plus for all their hover variants in a Conditional Comment:

    HTML Code:
    <!--[if lte IE 8]>
    	<style type="text/css">
    		.bubbles a { 
    			behavior: url(http://clba.nl/PIE.htc); /* for circle */
    			border: 0; /* a border is disturbing the hover... */
    			}
    		.bub0 a { background: #E3F3FE; color: #87B1D1; }
    		.bub1 a { background: #DDFEEA; color: #8DC590; }
    		.bub2 a { background: #FFF9D2; color: #BAB187; }
    		.bub3 a { background: #F9DCFF; color: #EA8CFF; }
    		.bub4 a { background: #EDEDED; color: #B6B6B6; }
    		.bub5 a { background: #AEF9B2; color: #BF7FBF; }
    		.bub6 a { background: #FFCBA1; color: #CA9F7F; }
    
    		.bub0 a:hover, bub0 a:focus { background: #CCE9FD; color: #2773AD; }
    		.bub1 a:hover, bub1 a:focus { background: #C3FED9; color: #339738; }
    		.bub2 a:hover, bub2 a:focus { background: #FFF4AE; color: #837327; }
    		.bub3 a:hover, bub3 a:focus { background: #F1C0FD; color: #DA30FF; }
    		.bub4 a:hover, bub4 a:focus { background: #DFDFDF; color: #7C7C7C; }
    		.bub5 a:hover, bub5 a:focus { background: #6DF574; color: #8C198C; }
    		.bub6 a:hover, bub6 a:focus { background: #FFA255; color: #A05319; }
       </style>
    <![endif]-->

    Note: in IE7 the color change at focus doesn't work, only the focus-outline is visible (but enough for mouse-less visitors). IE8 not tested for that.

  11. #11
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    too good @Francky ; guys, can u remove the code or replace it with some other names, as i don't like it to be indexed. thanks
    All those who wander aren't lost.

  12. #12
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    I see Paul O'B has already depurated the code-fragments above.
    I've changed the names in the test pages, and added a "noindex, nofollow" meta (though the links in this forum get automatically a rel="nofollow").
    Must be triple disappeared without trace.
    Cheers!


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
  •