Remove oval border-radius when 2 digit numbers show up
Tags: html,css,css3
Problem :
I'm trying to set a perfect circle and manage to do that when I have to show the numbers from 1 to 9 but it gets messed up when two digits are shown. I can't seem to figure a way out.
Here's the html:
<span>8</span>
<span>9</span>
<span>10</span>
The CSS:
span{
float: left;
font-size: 10px;
position: relative;
border: 1px solid #000;
border-radius: 50%;
padding:5px 10px;
margin: 5px;
}
See how the border radius around 10 messes up and becomes an oval :(
Example: http://jsfiddle.net/aKmF6/21/
Solution :
You need to define height and width, try this:
span {
font-size: 10px;
position: relative;
border: 1px solid #000;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
}
CSS Howto..
The way you have written your css, you need to set the css id to your node and not a styleclass in your controller. Background A node can have both...
background-image: url('image path'); Put this block of code in your CSS to set the background image....
You can use positioning and z-index controls such as these: #pic { z-index:100; position: absolute; top:0; left:0; } #pic2 { z-index:999; position: absolute; top:0; left:100px; } By applying these ID's...
it's the margin on the P tags inside those divs which is creating the vertical space. set container div p {margin:0} and it all goes away.
I do some tweaking from your site. Try changing your .cont's height to calc(100vh - 300px). .cont { height: calc(100vh - 300px); } It gets the browsers window height and...
For styles wp_register_style( 'namespace', 'http://locationofcss.com/mycss.css' ); Then use: wp_enqueue_style('namespace'); wherever you want the css to load. Scripts are as above but the quicker way for loading jquery is just to...
I was thinking that I might have to use jQuery, so my targeting question would help here too. With jQuery you can iterate through each label, filtering out any...
You're hiding the parent element by calling: #content-body {display:none} So all of the children will be hidden as well regardless of how you target them. What you need to do...
You should use: <link rel="stylesheet" href="http://url" type="text/css" /> to include style sheets. <link rel="http://url"> is an invalid method to include styles. See also: MDN: <link>...
Started this before you edited your question with more info, but I believe that the one missing piece you're after is the text-align: justify in the 'outer'. .outer{ background: red;...
How I would handle this is to have the user be able to provide a get parameter to select the css file form a server, e.g. http://www.YourSite.com/page/?css-file=http://www.site.com/path/to/file.css And based on...
Can you please provide a JSFiddle of your work? Without it I can only give you the jQuery example: draggable effect. $(document).ready(function(){ $('#car').draggable(); ); I have also seen the use...
use jquery dotdotdot plugin to achieve this for multi lines. If it is for single line then it can be easily done with CSS alone. $("div").dotdotdot() DEMO Here is the...
Let's take one example, I suspect by far the most commonly used of those listed, line-height. The CSS Inline Layout Module Level 3, Section 2. Line Heights and Baseline Alignment...
You will have to use AJAX to dynamically change color through Jquery.
Does this help?: http://jsfiddle.net/eNDPG/1/
You can use borders to achieve something like that. jsfiddle Maybe not the best answer but a start point if you insist on pure css. Edit: Updated JsFiddle Demo here...
Add this: li { white-space: nowrap; } display:inline; on your li element is causing the 3rd one to flow to the next line. ...
I had found the solution in this article. The solution is adding clipPathUnits="objectBoundingBox" to the clipPath element, and then change the value of the points attribute of the polygon element...
Just add *{box-sizing: border-box} *{box-sizing: border-box} body { margin: 90px 0px 0px 0px; padding: 0; background-color: #FFF501; border: thick solid #FF0B0F; } #cabecalho { position: fixed; top: 0; left: 0;...
Try this way $(document).ready(function(){ var ac = $("#ac").text().split(' '); $("#ac").text(ac[0]) }) ...
Assuming they do not have to be in IMG tags... HTML: <div class="thumb1"> </div> CSS: .thumb1 { background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */...
I think you want li:hover { background-color: New Color; } Here is a really simple dropdown menu I made Html <div id="newsletter" class="navigation"> <span style="display:block;" id="newsletterMain" href="index.html">Newsletter</span> <a style="margin-top:19px; border-top:...
I think the best and the cleanest solution is to add this functionality on the server side. Check the user-agent request header to decide which files to send. You can...
I have used setTimeout function to achieve your task... var timer, thisid; $('td').mouseenter(function(){ thisid = $(this); timer = setTimeout(function(){ $(thisid).parent('tr').addClass('blueBgColor'); },2000); }).mouseleave(function(){ clearTimeout(timer); }); and for your reference check this...
Copy-paste solution from comments: You have to load font at least once in your code before showing it. Event if you use it in css. Just put load line somewhere...
Create the font folder and save all the font files @font-face { font-family: 'Archer-Semibold'; src: url('fonts/archer-semibold-pro.eot'); src: url('fonts/archer-semibold-pro.eot?#iefix') format('embedded-opentype'), url('fonts/archer-semibold-pro.woff') format('woff'), url('fonts/archer-semibold-pro.ttf')...
#container > div{ -webkit-user-select:none; } input[type=checkbox] { display:none; } label span{ background: #D9D9D9; height: 40px; width: 40px; border-radius: 20px; display:inline-block; vertical-align: middle; padding: 0 0 0 0px; cursor:pointer; border:1px...
Wrap the text you want made diagonal in another element, e.g. a <div> and then do a CSS transform on that element; see MDN.
If you do not have dynamic text inside, you can use letter spacing letter-spacing:9px; http://jsfiddle.net/sQ9ck/2/ or word-spacing word-spacing:70px; http://jsfiddle.net/sQ9ck/6/ Or a combination of both letter-spacing:5px; word-spacing:44px; http://jsfiddle.net/sQ9ck/10/...