Why is the "Input Status" div block got offset in its parents.
I did try toggle all its css attributes in the web inspector, it seems nothing fix the offset. Where did it come from?
Please have a look this demo: http://jsfiddle.net/pengyanb/Lfvnr9y1/
.containing_tab {
width: 100%;
height: 40pt;
margin-bottom: 20pt;
border: 1px red solid;
}
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
}
.middle_padding {
display: inline-block;
width: 1%;
height: 100%;
margin-left: auto;
margin-right: auto;
border:1px blue solid;
}
<div class="containing_tab">
<div class="status_tab">Input 1 Status</div>
<div class="middle_padding"></div>
<div class="status_tab">Input 2 Status</div>
</div>
I toggled all its css attribute in the web inspector,
Because the vertical-align property for inline elements defaults to baseline. Just change that to top:
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
vertical-align:top;
}
jsFiddle example
remove the height from the .containing_tab
.containing_tab {
width: 100%;
margin-bottom: 20pt;
border: 1px red solid;
}
.status_tab {
display: inline-block;
width: 48%;
height: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
box-shadow: 10px 10px 10px black;
font-family:'MS sans serif, Fallback, sans-serif';
text-shadow:0 0 0 !important;
text-align: center;
line-height: 40pt;
background-color:green;
border:1px blue solid;
}
.middle_padding {
display: inline-block;
width: 1%;
height: 100%;
margin-left: auto;
margin-right: auto;
border:1px blue solid;
}
<div class="containing_tab">
<div class="status_tab">Input 1 Status</div>
<div class="middle_padding"></div>
<div class="status_tab">Input 2 Status</div>
</div>
I'm making a titled box with css.
And my code is something like this.
I've ignored some attributes like width or height in my code.(Because I don't know why stackoverflow keeps telling me that I 've got too many codes here..)
.sponsor_info {
border-radius: 10px;
border: 1px solid #eeeeee;
width:200px;
height:50px;
padding: 0px;
}
.sponsor_info .headbar {
border-radius:10px 10px 0px 0px;
width:200px;
height: 40px;
margin-top: 0px;
background-color: #8BBE26;
}
.sponsor_info .headbar p {
font-size: 20px;
font-family: arial;
color:white;
line-height: 100%;
margin-left: 3%;
margin-top:0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
I can get something like below
The question now is: I don't know why there is some space between the outer grey border and the inner green bar.
.sponsor_info {
height: 200px;
border-radius: 10px;
border: 1px solid #eeeeee;
padding: 0px;
}
.sponsor_info .headbar {
height: 100px;
border-radius: 10px 10px 0px 0px;
margin-top: 0px;
background: #8BBE26;
}
.sponsor_info .headbar p {
line-height: 100px;
margin-left: 3%;
margin-top: 0px;
}
<div class="sponsor_info">
<div class="headbar">
<p>Sponsor Info</p>
</div>
</div>
change it to:
.sponsor_info .headbar p {
line-height: 100%;
margin-left: 3%;
margin-top: 0px;
}
I want to have two buble speech togethers and and with the some extra information.
Image below
This is my code for doing this:
I have a demo for this here: http://jsfiddle.net/pZh4w/
<style>
.bubble
{
position: relative;
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
margin-bottom: 0px;
margin-right: 50px;
}
.test
{
margin-bottom: 0px;
margin-left: 850px;
}
.test1
{
margin-bottom: 20px;
margin-left: 850px;
}
.tes
{
margin-bottom: 0px;
margin-left: 250px;
}
.tes1
{
margin-bottom: 20px;
margin-left: 250px;
}
</style>
Thanks for your help.
Here is something to get you started.
I would suggest the following HTML:
<div class="bubble">
<p>First paragraph</p>
<div class="caption">
<h1>By PEDE</h1>
<h2>From Belgrade,MT</h2>
<h3>September 25,2013</h3>
</div>
</div>
and start with the following CSS:
.bubble-panel {
display: inline-block;
border: 1px dotted #CCCCCC;
height: 250px;
position: relative;
margin: 20px;
}
.bubble {
width: 525px;
height: 130px;
padding: 4px;
background: #FFFFFF;
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
border: #46A5E4 solid 9px;
display:inline-block;
}
.caption {
border: 1px solid red;
width: 20em;
font-size: 14px;
line-height: 1.5;
position: absolute;
bottom: 0px;
right: 0px;
}
.caption h1, .caption h2, .caption h3 {
font-size: 1.00em;
text-align: center;
margin: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/rcNN6/
The net result gives something like:
The speech bubble decoration (the little triangular bit that sticks out) can be built
by following the ideas presented at: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The trick is to wrap the bubble and caption texts in a inline-block wrapper of fixed height. These can then form a 2x2 grid if the screen is wide enough.
Hopefully an easy question.
I have a <p> which has some styling on it to make it look like a UK registration plate.
I want to overlay an input field so the user can type in a reg.
Here's my fiddle
I'm struggling to get the overlay even when changing elements to absolute.
HTML:
<div>
<p class="reg">007 ABC</p>
<input id="vehicleReg" type="text" placeholder="Enter Vehicle Registration" />
</div>
CSS:
.reg {
background-color: #ec0;
background: -webkit-linear-gradient(#ec0, #ca0);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.75);
font-family: number_plate;
display: inline-block;
/*padding: 0 50px 0 100px;*/
width: 220px;
position: relative;
font-size: 28px;
font-weight: bold;
line-height: 50px;
/*margin: 100px;*/
color: black;
/* text-indent: 10px;*/
}
.reg::after {
background-color: rgba(255,255,255,.25);
color: #ec0;
content: "\25CC";
font-family: sans-serif;
font-size: 32px;
left: 0;
height: 50%;
line-height: 70px;
width: 100%;
padding-left: 14px;
position: absolute;
}
.vehicleReg {
position: absolute;
right: 13%;
bottom: 17px;
width: 64%;
height: 31px;
background-color: transparent;
text-align:center;
}
Thanks
A bit slow but the following will keep your little euro image and put the input above your top fade:
html
<div class="reg"><input id="vehicleReg" type="text" placeholder="Reg No" /></div>
css
.reg {
background-color: #ec0;
background: -webkit-linear-gradient(#ec0, #ca0);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.75);
display: inline-block;
/*padding: 0 50px 0 100px;*/
width: 220px;
position: relative;
/*margin: 100px;*/
color: black;
/* text-indent: 10px;*/
text-align:center
}
.reg::after {
text-align:left;
background-color: rgba(255,255,255,.25);
color: #ec0;
content: "\25CC";
font-family: sans-serif;
font-size: 32px;
top:0;
left: 0;
height: 50%;
line-height: 70px;
width: 100%;
padding-left: 14px;
position: absolute;
}
#vehicleReg {
width: 70%;
margin:auto;
background-color: transparent;
border:0;
font-family: number_plate;
font-weight: bold;
line-height: 50px;
font-size: 28px;
text-transform:uppercase;
position:relative; z-index:2;
}
Example
Additionally, you could style the placeholder text.
placeholder {
font-family: number_plate;
font-weight: bold;
font-size: 28px;
text-transform:uppercase;
color:black;
text-align:center;
}
JSFiddle
If you are positioning the input absolutely, you'll need to make it relative to a container div, in this case.
For example:
<div class="container">
<p class="reg">007 ABC</p>
<input id="vehicleReg" type="text" placeholder="Enter Vehicle Registration" />
</div>
.container {
position: relative;
}
See this:
DEMO
Do you mean something like this?
http://jsfiddle.net/zZUDN/8/
<div class="reg">
<input id="vehicleReg" type="text" placeholder="Enter Vehicle Registration" />
</div>
.reg {
border:none;
background-color: #ec0;
background: -webkit-linear-gradient(#ec0, #ca0);
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,.75);
font-family: number_plate;
display: inline-block;
/*padding: 0 50px 0 100px;*/
width: 220px;
position: relative;
font-size: 28px;
font-weight: bold;
line-height: 50px;
/*margin: 100px;*/
color: black;
/* text-indent: 10px;*/
}
.reg::after {
background-color: rgba(255,255,255,.25);
color: #ec0;
content: "\25CC";
font-family: sans-serif;
font-size: 32px;
left: 0;
height: 50%;
line-height: 70px;
width: 100%;
padding-left: 14px;
position: absolute;
}
#vehicleReg {
width:100%;
line-height:45px;
font-size:28px;
border:none;
background-color: transparent;
text-align:center;
}
Slightly unrelated but if you are after the user to type in a registration plate number look into using the input attribute pattern and give it a max length of 8 characters.
<input type="text" pattern="[A-Za-z0-9]{2}[0-9]{2}[ ][A-Za-z]{3}" maxlength="8" />
That enforces the pattern that a registration requires 4 alphanumeric characters a space and 3 characters.
(Part of HTML5 only works in latest browsers. IE are slow to catch up)
Change
.vehicleReg {
position: absolute;
right: 13%;
bottom: 17px;
width: 64%;
height: 31px;
background-color: transparent;
text-align:center;
}
to
#vehicleReg {
position: absolute;
right: 13%;
bottom: 17px;
width: 64%;
height: 31px;
background-color: transparent;
text-align:center;
}
vehicleReg is the id of the input field, not the class.
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>