Finding size of element with border radius

HTML & CSS
1

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?

2

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: [U]css3-circle[/U]

3

While it works on one, i have many circles. and it doesn’t work on others, something like [URL=“http://awesomescreenshot.com/0331wt4593”]this

4

Yes, the absolute position of the surrounding div’s is [U]disturbing[/U] 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: [U]bubbles-nw.htm[/U]
(see source code)

5

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.


<!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

Ah, indeed the site was down (even FTP). But looking at it, just 2 minutes ago (s)he was back. :slight_smile:
Edit: Hmm, down again now. :rolleyes:
Edit Edit: back again… Don’t know what’s happening.

In the testpage [U]bubbles-nw.htm[/U] I did this:

<!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.

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).

7

Good work Francky :slight_smile:

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.:slight_smile:

8

I know the function of the <p>'s! :smiley:

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

[CENTER][/CENTER]

  • Note: Latest Chrome, Opera and IE10 dont’t grab the red outside parts in [U]bubbles-nw.htm[/U], 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).
<!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: [U]bubbles-nw-2.htm[/U]
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.

9

Looking good now Francky :slight_smile:

10

Only the poor lte IE 8 visitors…

[CENTER]

bubbles? :lol:
opacity? :rolleyes:[/CENTER]

=====
The opacity for IE8 and before can be restored by adding a MS-filter:

<!--[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 [U]IE-CSS3[/U] and [URL=“http://css3pie.com/”][U]css3PIE[/U].

  • 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:

<!--[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

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

12

I see Paul O’B has already depurated the code-fragments above. :slight_smile:
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. :wink:
Cheers!