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?
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.
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).
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.
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).
They can be used as hook to get rid of the hoverable/clickable outside parts of the circles in Firefox.
[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).
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.
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:
MSfilters but no PIE: Squares with opacity (and other hover-opacity), or
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:
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!