I would like to surround a number in a circle like in this image:
Is this possible and how is it achieved?
Here's a demo on JSFiddle and a snippet:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
<div class="numberCircle">30</div>
My answer is a good starting point, some of the other answers provide flexibility for different situations. If you care about IE8, look at the old version of my answer.
The problem with most of the other answers here is you need to tweak the size of the outer container so that it is the perfect size based on the font size and number of characters to be displayed. If you are mixing 1 digit numbers and 4 digit numbers, it won't work. If the ratio between the font size and the circle size isn't perfect, you'll either end up with an oval or a small number vertically aligned at the top of a large circle. This should work fine for any amount of text and any size circle. Just set the width and line-height to the same value:
.numberCircle {
width: 120px;
line-height: 120px;
border-radius: 50%;
text-align: center;
font-size: 32px;
border: 2px solid #666;
}
<div class="numberCircle">1</div>
<div class="numberCircle">100</div>
<div class="numberCircle">10000</div>
<div class="numberCircle">1000000</div>
If you need to make the content longer or shorter, all you need to do is adjust the width of the container for a better fit.
See it on JSFiddle.
For circle sizes varying based on the content this should work:
.numberCircle {
display: inline-block;
line-height: 0px;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 8px;
margin-right: 8px;
}
<span class="numberCircle"><span>30</span></span>
<span class="numberCircle"><span>1</span></span>
<span class="numberCircle"><span>5435</span></span>
<span class="numberCircle"><span>2</span></span>
<span class="numberCircle"><span>100</span></span>
It relies on the width of the content plus the margin-'s to determine the radius, then extends the height to match using the padding-'s. The margin-'s would need to be adjusted based on the font-size.
Update to remove inner element:
.numberCircle {
display: inline-block;
border-radius: 50%;
border: 2px solid;
font-size: 32px;
}
.numberCircle:before,
.numberCircle:after {
content: '\200B';
display: inline-block;
line-height: 0px;
padding-top: 50%;
padding-bottom: 50%;
}
.numberCircle:before {
padding-left: 8px;
}
.numberCircle:after {
padding-right: 8px;
}
<span class="numberCircle">30</span>
<span class="numberCircle">1</span>
<span class="numberCircle">5435</span>
<span class="numberCircle">2</span>
<span class="numberCircle">100</span>
Uses pseudo-elements to force the height. Need the zero width space for vertical alignment. Moved the line-height:0px from the outer to the pseudo so that it is at least visible when degrading for IE8.
If it's 20 and lower, you can just use the unicode characters ① ② ... ⑳
http://www.alanwood.net/unicode/enclosed_alphanumerics.html
the easiest way is using bootstrap and badge class
<span class="badge">1</span>
This version does not rely on hard-coded, fixed values but sizes relative to the font-size of the div.
http://jsfiddle.net/qod1vstv/
CSS:
.numberCircle {
font: 32px Arial, sans-serif;
width: 2em;
height: 2em;
box-sizing: initial;
background: #fff;
border: 0.1em solid #666;
color: #666;
text-align: center;
border-radius: 50%;
line-height: 2em;
box-sizing: content-box;
}
HTML:
<div class="numberCircle">30</div>
<div class="numberCircle" style="font-size: 60px">1</div>
<div class="numberCircle" style="font-size: 12px">2</div>
You can use the border-radius for this:
<html>
<head>
<style type="text/css">
.round
{
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
border: 1px solid #000;
}
</style>
</head>
<body>
<span class="round">30</span>
</body>
</html>
Play with the border radius and the padding values until you are satisfied with the result.
But this won't work in all browsers. I guess IE still does not support rounded corners.
I am surprised nobody used flex which is easier to understand, so I put my version of answer here:
To create a circle, make sure width equals height
To adapt to font-size of number in the circle, use em rather than px
To center the number in the circle, use flex with justify-content: center; align-items: center;
if the number grows (>1000 for example), increase the width and height at same time
Here is an example:
.circled-number {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
}
.circled-number--big {
color: #666;
border: 2px solid #666;
border-radius: 50%;
font-size: 1rem;
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
}
<div class="circled-number">
30
</div>
<div class="circled-number--big">
3000000
</div>
Late to the party, but here is a bootstrap-only solution that has worked for me. I'm using Bootstrap 4:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="row mt-4">
<div class="col-md-12">
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">1</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">2</span>
<span class="bg-dark text-white rounded-circle px-3 py-1 mx-2 h3">3</span>
</div>
</div>
</body>
You basically add bg-dark text-white rounded-circle px-3 py-1 mx-2 h3 classes to your <span> (or whatever) element and you're done.
Note that you might need to adjust margin and padding classes if your content has more than one digits.
My solution here - this easily allows for different sizes and colors and ties into a CMS for editorial control. For IE degrading to squares.
HTML:
<div class="circular-label label-outer label-size-large label-color-pink">
<div class="label-inner">
<span>Fashion & Beauty</span>
</div>
</div>
CSS:
.circular-label {
overflow: hidden;
z-index: 100;
vertical-align: middle;
font-size: 11px;
-webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.label-inner {
width: 85%;
height: 85%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px dotted white;
vertical-align: middle;
margin: auto;
top: 5%;
position: relative;
overflow: hidden;
}
.label-inner > span {
display: table;
text-align: center;
vertical-align: middle;
font-weight: bold;
text-transform: uppercase;
width: 100%;
position: absolute;
margin: auto;
margin-top: 38%;
font-family:'ProximaNovaLtSemibold';
font-size: 13px;
line-height: 1.0em;
}
.circular-label.label-size-large {
width: 110px;
height: 110px;
-moz-border-radius: 55px;
-webkit-border-radius: 55px;
border-radius: 55px;
margin-top:-55px;
}
.circular-label.label-size-med {
width: 76px;
height: 76px;
-moz-border-radius: 38px;
-webkit-border-radius: 38px;
border-radius: 38px;
margin-top:-38px;
}
.circular-label.label-size-med .label-inner > span {
margin-top: 33%;
}
.circular-label.label-size-small {
width: 66px;
height: 66px;
-moz-border-radius: 33px;
-webkit-border-radius: 33px;
border-radius: 33px;
margin-top:-33px;
}
It's not too difficult to see how to do this. The bigger question is whether it is possible to make the dimensions of the circle scale to content.
Currently I don't think it is possible. Anyone?
Here's a demo on JSFiddle and a snippet:
/* Creating a number within a circle using CSS */
.numberCircle {
font-family: "OpenSans-Semibold", Arial, "Helvetica Neue", Helvetica, sans-serif;
display: inline-block;
color: #fff;
text-align: center;
line-height: 0px;
border-radius: 50%;
font-size: 12px;
min-width: 38px;
min-height: 38px;
}
.numberCircle span {
display: inline-block;
padding-top: 50%;
padding-bottom: 50%;
margin-left: 1px;
margin-right: 1px;
}
/* Some Back Ground Colors */
.clrGreen {
background: #51a529;
}
.clrRose {
background: #e6568b;
}
.clrOrange {
background: #ec8234;
}
.clrBlueciel {
background: #21adfc;
}
.clrMauve {
background: #7b5d99;
}
<span class="numberCircle clrGreen"><span>8</span></span>
<span class="numberCircle clrRose"><span>80</span></span>
<span class="numberCircle clrOrange"><span>800</span></span>
<span class="numberCircle clrMauve"><span>8000</span></span>
.numberCircle {
border-radius: 50%;
width: 40px;
height: 40px;
display: block;
float: left;
border: 2px solid #000000;
color: #000000;
text-align: center;
margin-right: 5px;
}
<h3><span class="numberCircle">1</span> Regiones del Interior</h3>
Late to the party but here's the solution I went with https://codepen.io/jnbruno/pen/vNpPpW
Required no extra work.
Thanks John Noel Bruno
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
font-size: 24px;
line-height: 1.33;
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0px;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.42857;
}
<div class="panel-body">
<h4>Normal Circle Buttons</h4>
<button type="button" class="btn btn-default btn-circle">
<i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-primary btn-circle">
<i class="fa fa-list"></i>
</button>
</div>
Do something like this in your css
div {
width: 10em; height: 10em;
-webkit-border-radius: 5em; -moz-border-radius: 5em;
}
p {
text-align: center; margin-top: 4.5em;
}
Use the paragraph tag to write the text. Hope that helps
Improving the first answer just get rid of the padding and add line-height and vertical-align:
.numberCircle {
border-radius: 50%;
width: 36px;
height: 36px;
line-height: 36px;
vertical-align:middle;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
The answer of thirtydot is right but is missing a little point. You need to add position: relative , if you want to have centered value in the circle and include also different range of number.
For example 123;
HTML:
<div class="numberCircle">30</div>
CSS:
.numberCircle {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
width: 36px;
height: 36px;
padding: 8px;
position: relative;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
but an easiest solution is to use Bootstrap
<span class="badge" style ="float:right">123</span>
Heres my way of doing it, using square method. upside is it works with different values, but you need 2 spans.
.circle {
display: inline-block;
border: 1px solid black;
border-radius: 50%;
position: relative;
padding: 5px;
}
.circle::after {
content: '';
display: block;
padding-bottom: 100%;
height: 0;
opacity: 0;
}
.num {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.width_holder {
display: block;
height: 0;
overflow: hidden;
}
<div class="circle">
<span class="width_holder">1</span>
<span class="num">1</span>
</div>
<div class="circle">
<span class="width_holder">11</span>
<span class="num">11</span>
</div>
<div class="circle">
<span class="width_holder">11111</span>
<span class="num">11111</span>
</div>
<div class="circle">
<span class="width_holder">11111111</span>
<span class="num">11111111</span>
</div>
You can use
span.red {
background: red;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.grey {
background: #cccccc;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #fff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.green {
background: #5EA226;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.blue {
background: #5178D0;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
span.pink {
background: #EF0BD8;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
color: #ffffff;
display: inline-block;
font-weight: bold;
line-height: 1.6em;
margin-right: 15px;
text-align: center;
width: 1.6em;
}
<h1><span class="grey">1</span>A grey circle with number inside</h1>
<h1><span class="red">2</span>A red circle with number inside</h1>
<h1><span class="blue">3</span>A blue circle with number inside</h1>
<h1><span class="green">4</span>A green circle with number inside</h1>
<h1><span class="pink">5</span>A pink circle with number inside</h1>
Thank to https://wpsites.net/web-design/colored-numbered-circles-using-pure-css-html/
Something like this could work (for numbers 0 to 99):
.circle {
border: 0.1em solid grey;
border-radius: 100%;
height: 2em;
width: 2em;
text-align: center;
}
.circle p {
margin-top: 0.10em;
font-size: 1.5em;
font-weight: bold;
font-family: sans-serif;
color: grey;
}
<body>
<div class="circle">
<p>30</p>
</div>
</body>
You work like with a standard block, that is a square
This is feature of CSS 3 and it is not very well suporrted, you can count on firefox and safari for sure.
.circle {
width: 10em;
height: 10em;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
border: 1px solid black;
}
<div class="circle"><span>1234</span></div>
How can I align a div in a wrapper on the right side when the div width is auto?
Example:
$("span").click(function() {
$(".calendarNotificationWrapper").append("<div class='calendarNotification'>New added notification</div>");
});
.calendarNotificationWrapper {
position: fixed;
right: 40px;
bottom: 40px;
display: block;
width: auto;
z-index: 1000000;
text-align: right;
}
.calendarNotification {
width: auto;
line-height: 20px;
z-index: 10000000;
padding: 20px;
font-weight: bold;
color: #FFF;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
display: table;
margin-top: 10px;
position: relative;
}
<span>Add a notification</span>
<div class="calendarNotificationWrapper">
<div class="calendarNotification">
This div should be aligned right
</div>
<div class="calendarNotification">
That is a notification message with a very very long text
</div>
<div class="calendarNotification">
This div should also be aligned right
</div>
</div>
Add
margin-left:auto;
to .calendarNotification
I have a prompt-box div that has a max-height of 80% of the screen.
Inside of it, I have a ul which holds a bunch of li elements depending on how many the user adds.
How do I configure this so that once that prompt-box hits a certain size, new items can be added to the list but the contents just scroll instead of overflowing like this?
Thanks!
Edit: Adding html & css
<div className='prompt-box'>
<p className='title'>What's in your future?</p>
<ul className='options-holder'>
{
this.state.items.map(item => (
<li key={item.id} className='option'>
<div className='circle' />
<p className='item-text'>{ item.text }</p>
</li>
))
}
<li key={0} className='option form'>
<div className='circle' />
<form className='new-item-form' onSubmit={this.handleSubmit}>
<input className='new-item-input' placeholder='Type something and press return...' onChange={this.handleChange} value={this.state.text} />
</form>
</li>
</ul>
<button className='confirm-button'>Continue</button>
</div>
.prompt-box {
#include absolute-center;
background: #1E1E1E;
width: 35%;
margin: 0 auto;
border-radius: 7px;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #ccc;
font-family: 'Circular Book';
max-height: 80%;
overflow-y: auto;
}
.prompt-box .title {
text-align: center;
font-size: 30px;
margin-top: 30px;
margin-bottom: 25px;
}
.prompt-box .options-holder {
list-style: none;
border-radius: 3px; // not currently working
padding: 0;
width: 95%;
margin: 12px auto;
}
.prompt-box .option {
background: #303030;
padding: 18px;
border-bottom: 1px solid rgba(196, 196, 196, 0.1);
}
.prompt-box .option.form {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.prompt-box .item-text {
color: white;
font-size: 24px;
margin: 0;
display: inline-block;
padding: 0 18px;
}
.prompt-box .new-item-form .new-item-input {
background: transparent;
border-style: none;
font-size: 24px;
padding-left: 18px;
color: white;
width: 80%;
&:focus { outline: none; }
}
.prompt-box .confirm-button {
width: 95%;
margin: 22px auto 18px auto;
}
You haven't shown us any HTML/CSS code for us to reproduce and test a fix for the issue, but adding something like this should work, to allow that container to scroll vertically when its height is exceeded:
.prompt-box {
overflow-y: auto;
}
Try a overflow: scroll; style rule on your div.prompt-box. (You're already giving it a max height, so the extra contents should have a vertical scroll bar).
I threw a max-height and an overflow-y: scroll on the ul and it did the trick.
i have a slideshow built on my landing page but, what i am wanting to do is have that slideshow scale down and scale in relation to the page. i have managed to do this with all other divs/content it is just this pesky slideshow that's not doing as it is told. It is probably something very simple but i have been staring at this site a bit TOO much now.
css:
.slideshow {
margin: 0px 5px 5px 5px;
position: relative;
width: 920px;
height: 610px;
}
#slide2, #slide3, #slide4, #slide5, #slide6, #slide7, #slide8 {
position: absolute;
width: 520px;
height: 156px;
padding: 227px 200px 227px 200px;
text-align: center;
color: #FFF;
}
#slide1 {
position: absolute;
width: 520px;
height: 20px;
padding: 295px 200px 295px 200px;
text-align: center;
color: #FFF;
}
Snippet of HTML:
<!--Slideshow-->
<div class="slideshow">
<!--We design and communicate-->
<div id="slide1">
<span style="line-height: 120%; color: #FFF; font-size: 20px; font-weight: normal;">
We are a design and communication agency.
</span>
</div>
<div id="slide3"><a href="about/how-we-work.htm">
<span style="line-height: 120%; color: #FFF; font-size: 20px; font-weight: normal;">
We create.
<br>
<br>
branding / web design / packaging / events / press launches / interiors / installations
<br>
<br>
<span style="border-bottom: solid 3px #FFF;">
our process
</span>
</span>
</a></div>
<!--Bloom and Blossom-->
<div id="slide2"></div>
<!--Elkin-->
<div id="slide4"></div>
<!--GKFW-->
<div id="slide6"></div>
<!--Swarovski-->
<div id="slide7"></div>
<!--ASOS-->
<div id="slide8"></div>
</div>
my aim is to have this taking up 100% width like all the other divs.
Thanks if anyone can help and apologies in advance for some appalling coding! hah u__u been out the game too long.
this is the MQ stylesheet that i have:
.slideshow {
margin: 0 5px 5px 5px;
position: relative;
width:98%;
}
#slide2, #slide3, #slide4, #slide6, #slide7, #slide8 {
position: absolute;
width: 98%;
margin: 0px 5px 5px 0;
text-align: center;
color: #FFF;
}
#slide1 {
position: absolute;
width: 98%;
height: 20px;
margin: 0 5px 5px 0;
text-align: center;
color: #FFF;
}
there is also a wrapper which is 100% width
You fixed heights and widths in pixels. Change them to percentages.
Pixels doesn't scale down. A pixel is a pixel and percentage is the relative one.
So fix heights and widths in percentages
We're coming to the end of a huge site redesign, so I'm testing and checking, cross-browser and all that. I was so proud of my beautiful forms with image hovering and checked it in IE8 only to see that the padding and margin for the text was all messed up.
Here's a link to an image displaying the problem: http://i.imgur.com/F6zPP.jpg
It's not a huge deal, just extremely annoying from a designer's point of view and probably the user's too.
Here's a jsfiddle to see what the form looks like: http://jsfiddle.net/kennyk3/qL96P/
And here's the HTML/CSS for the form:
<div id='account'>
<form id='login' action='signin.php' method='post' accept-charset='UTF-8'>
<fieldset class='topform'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div id='front_login_text'>
<label for='email'>Email:</label>
<input type='text' name='email' id='email' class='textInput' maxlength='50' />
<label for='password'>Password:</label>
<input type='password' name='password' id='password' class='textInput' maxlength='50' />
</div>
<input type='submit' name='Submit' value='' class='loginsubmit' />
<p class='remtext'><input type='checkbox' class='rememberme' name='remember' value='remember' />Remember me on this computer</p>
<p class='notamember'><strong>Not a Member?</strong> <a href='/register.php'>Sign Up Today!</a></p>
</fieldset>
</form>
<p class='forgotpw'>Forgot Your Password? <a href=''><strong>Click Here to Reset it.</strong></a></p>
</div>
<div class='break'></div>
<div id='button'>
<a href='' class='toursprite' title='Take the Tour'>Take the Tour</a>
</div>
.topform {
padding: 60px 0 0 20px ;
border: none;
}
.textInput
{
width: 190px;
height: 39px;
background: url(../images/textfield-bg.png) no-repeat;
border: none;
color: #929292;
padding: 0 20px 0 10px;
margin: 5px 0 0 0;
overflow: hidden;
}
.textInput:hover {
background: url(../images/textfield-hover.png) no-repeat;
}
#account label {
float: left;
text-align: right;
width: 60px;
font-size: 14px;
margin: 12px 10px 0 0;
color: #929292;
}
#account fieldset {
width: 300px;
}
#front_login_text input:focus, #front_login_text textarea:focus {
outline: 0;
background: url(../images/textfield-hover.png) no-repeat;
}
#side_login_text input:focus, #side_login_text textarea:focus {
outline: 0;
background: url(../images/textfield-hover-small.png) no-repeat;
}
#side_optin_text input:focus, #side_optin_text textarea:focus {
outline: 0;
background: url(../images/textfield-hover-small.png) no-repeat;
}
.loginsubmit {
float: right;
margin: 10px 5px 0 0;
width: 70px;
height: 35px;
background: url(../images/login-btn.png) center no-repeat;
border: 0 none;
cursor: pointer;
}
.loginsubmit:hover {
float: right;
margin: 10px 5px 0 0;
width: 70px;
height: 35px;
background: url(../images/login-btn-hover.png) center no-repeat;
border: 0 none;
cursor: pointer;
}
.loginsubmit:active {
float: right;
margin: 10px 5px 0 0;
width: 70px;
height: 35px;
background: url(../images/login-btn-active.png) center no-repeat;
border: 0 none;
cursor: pointer;
}
When dealing with cross browser compatible forms. Make sure you define line-height for the fields. It can make all the difference and may fix your inconsistencies.
If you set the line-height to be something like 200% or 250%, it should still display in the center for Chrome and in IE should be much closer to the center. I just tried it on your forms.
It's not as clean as a browser specific CSS fix, but it might serve your needs.
.textInput
{
width: 190px;
height: 39px;
background: url(http://i.imgur.com/sEdWU.png) no-repeat;
border: none;
color: #929292;
padding: 0px 20px 0 10px;
margin: 5px 0 0 0;
overflow: hidden;
line-height:220%;
}
IE8 reads margins funny and sometimes collapses them. Rather than redoing anything do this CSS hack:
.textInput
{
width: 190px;
height: 39px;
background: url(http://i.imgur.com/sEdWU.png) no-repeat;
border: none;
color: #929292;
padding: 0 20px 0 10px;
margin: 5px 0 0 0;
padding: 10px 20px 0 10px\9;
overflow: hidden;
}