I am trying to set the width of an element progress to be the width between two other elements. Here is the HTML code I am using
<span class="current_rank"><?php echo $this->current_rank;?></span>
<div class="progress">
<div class="progress-bar" role="progressbar"></div>
</div>
<span class="next_rank"><?php echo $this->next_rank;?></span>
I am trying to get the width of the progress bar to be the width between the two <span>'s
Is this possible with CSS?
Update
.progress {
width: 550px;
height: 15px;
margin-bottom: 10px;
overflow: hidden;
background-color: #666;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-bar {
width: 0;
height: 100%;
font-size: 12px;
line-height: 15px;
color: #333;
text-align: center;
background-color: #ffd700;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-webkit-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.VIP_ranking > .current_rank {
margin-left: 30px;
margin-right: 25px;
}
.VIP_ranking > .next_rank {
float: right;
margin-right: 22.5px;
}
.VIP_ranking > div.progress{
position:absolute;
display:inline;
margin-left: 10px;
}
There are several CSS only solutions, but it really depends what are the requirements, in terms of browsers compatibility.
CSS calc function - you can use it if you know the width of the span elements, either the absolute width or the width in percentage. For example: width: calc(100% - 200px) or calc(80%). This solution will work in IE9+, Chrome and FF
Using display:flex; and justifying your content. You can read more about it here. You will not need to know the width of the spans, but this solution will only be compatible in IE10+, Chrome and FF.
Related
I'm looking for a way to transition the Orange button in all four directions,
not just the right and bottom directions if anyone can assist me with
the code.
div {
position: relative;
left: 90px;
top: 24px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: Orange;
padding: 20px;
width: 170px;
height: 48px;
transition: width 1s, height 1s, transform 1s; /* I want it to transition to the top and left directions */
}
div:hover {
width: 255px;
height: 72px;
}
<div></div>
add transform and scale , then with transform-origin you can change direction when transition.
div {
position: relative;
left: 200px;
top: 100px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: Orange;
padding: 20px;
width: 170px;
height: 48px;
transition: transform 1s;
transform-origin: center;
}
div:hover {
transform-origin: center;
transform: scale(1.5,1.5);
}
<div></div>
I've this code :
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
}
<span>
<p>25</p>
<p>08</p>
</span>
I want to make a perfect circle on my span. I try a border-radius: 50%; but it does not work.
Thanks for the help !
You can do this by giving the span a fixed width and height:
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
<span>
<p>25</p>
<p>08</p>
</span>
You need a predefined width and height on the span to be able to make it round.
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width:40px;
height:40px;
padding-left:10px;
box-sizing: border-box;
}
<span>
<p>25</p>
<p>08</p>
</span>
add line-height and width:
span {
background-color: #F00;
display: inline-block;
border-radius: 50%;
width: 50px;
line-height: 25px;
text-align: center;
}
Use this code.
HTML:
<span>
<p>25</p>
</span>
<span>
<p>08</p>
</span>
CSS:
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
border-radius: 50% and padding
document.addEventListener('DOMContentLoaded', () => {
let el = document.querySelector('#wrapper .container');
setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);
#wrapper {
display: flex;
justify-content: center;
}
#wrapper .container {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
will-change: margin-top, box-shadow, transform;
user-select: none;
cursor: pointer;
}
#wrapper .container:hover:not(:active) {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1),
0 2px 10px 0px rgba(0, 0, 0, 0.08),
0 0px 10px 0px rgba(0, 0, 0, 0.08);
}
#wrapper .container:active {
transform: scale(1.4) translateY(5px);
box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2),
0 18px 28px 2px rgba(0, 0,0 , 0.14),
0 7px 34px 6px rgba(0, 0, 0, 0.12);
}
<div id="wrapper">
<div class="container">
<span>10</span>
<span>3</span>
</div>
</div>
It looks like you incorrectly nested paragraph elements inside of span, which is against HTML5 spec, as span is being defined there as an element, which Content Model is described as Phrasing Content, and that:
Most elements that are categorized as Phrasing Content can only contain elements that are themselves categorized as phrasing content, not any flow content.
And because paragraph element doesn't belong to Phrasing Content list, you can use div instead of span for this purpose, only if you care to be semantically correct.
So coming back to your problem, it can be rewritten as so:
HTML:
<div>
<p>25</p>
<p>08</p>
</div>
CSS:
p {
margin: 0;
text-align:center;
}
div {
background-color: red;
display: inline-block;
border-radius: 50%;
width:50px;
height:50px;
line-height:25px;
}
Where general rule for achieving the circle by using border radius set to 50%, is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css.
Here is JsFiddle presenting that.
While I was fiddling with this 'Fancy 3D Button' example, I found that the width seemed to be hard-coded to fit the text's width.
Here is the HTML / CSS:
body {
background-image: url(http://subtlepatterns.com/patterns/ricepaper.png)
}
a {
position: relative;
color: rgba(255, 255, 255, 1);
text-decoration: none;
background-color: rgba(219, 87, 5, 1);
font-family: 'Yanone Kaffeesatz';
font-weight: 700;
font-size: 3em;
display: block;
padding: 4px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
-moz-box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
margin: 100px auto;
width: 160px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
a:active {
-webkit-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
-moz-box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
position: relative;
top: 6px;
}
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>
Push me!
If I remove the width property, the button would fill the page width.
Is there any way to make the button's width fit to the text, automatically?
If you are developing to a modern browser.
https://caniuse.com/#search=fit%20content
You can use:
width: fit-content;
Remove the width and display: block and then add display: inline-block to the button. To have it remain centered you can either add text-align: center; on the body or do the same on a newly created container.
The advantage of this approach (as opossed to centering with auto margins) is that the button will remain centered regardless of how much text it has.
Example: http://cssdeck.com/labs/2u4kf6dv
I like Roger Cruz's answer of:
width: fit-content;
and I just want to add that you can use
padding: 0px 10px;
to add a nice 10px padding on the right and left side of the text in the button. Otherwise the text would be right up along the edge of the button and that wouldn't look good.
Pretty late and not sure if this was available when the question was asked, set width: auto;
Seems to do the trick
Keeping the element's size relative to its content can also be done with display: inline-flex and display: table
The centering can be done with..
text-align: center; on the parent (or above, it's inherited)
display: flex; and justify-content: center; on the parent
position: absolute; left: 50%; transform: translateX(-50%); on
the element with position: relative; (at least) on the parent.
Here's a flexbox guide from CSS Tricks
Here's an article on centering from CSS Tricks.
Keeping an element only as wide as its content..
Can use display: table;
Or inline-anything including inline-flex as used in my snippet
example below.
Keep in mind that when centering with flexbox's justify-content: center; when the text wraps the text will align left. So you will still need text-align: center; if your site is responsive and you expect lines to wrap.
More examples in this stack
answer
body {
display: flex;
flex-direction: column;
height: 100vh;
padding: 20px;
}
.container {
display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
height: 50%;
}
.container.c1 {
text-align: center; /* needed if the text wraps */
/* text-align is inherited, it can be put on the parent or the target element */
}
.container.c2 {
/* without text-align: center; */
}
.button {
padding: 5px 10px;
font-size: 30px;
text-decoration: none;
color: hsla(0, 0%, 90%, 1);
background: linear-gradient(hsla(21, 85%, 51%, 1), hsla(21, 85%, 61%, 1));
border-radius: 10px;
box-shadow: 2px 2px 15px -5px hsla(0, 0%, 0%, 1);
}
.button:hover {
background: linear-gradient(hsl(207.5, 84.8%, 51%), hsla(207, 84%, 62%, 1));
transition: all 0.2s linear;
}
.button.b1 {
display: inline-flex; /* element only as wide as content */
}
.button.b2 {
display: table; /* element only as wide as content */
}
<div class="container c1">
<a class="button b1" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Before And After Wrap</a>
</div>
<div class="container c2">
<a class="button b2" href="https://stackoverflow.com/questions/27722872/">This Text Is Centered Only Before Wrap</a>
</div>
Fiddle
https://jsfiddle.net/Hastig/02fbs3pv/
If you are aiming for maximum browser support, modern approach is to place button in a div with display:flex; and flex-direction:row; The same trick will work for height with flex-direction:column; or both height and width(will require 2 divs)
This seems to solve the issue:
display: inline-block;
width: auto;
Try to add display:inline; to the CSS property of a button.
just add display: inline-block; property and removed width.
Try add width: 100% for tag button
I've got a problem with my progressbar..
In chrome, the value of the progress bar is red.. I did that with CSS...
But in Mozilla the value of the progress bar is just kinda grey..
progress[value] {
width: 250px;
height: 10px;
}
progress[value] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 250px;
height: 24px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-bar {
background-color: #eee;
border-radius: 5px;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-moz-progress-value {
background-color:#ff0000;
-moz-border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
opacity:0.6;
}
progress[value]::-webkit-progress-value {
background:red;
border-radius: 5px;
background-size: 35px 20px, 100% 100%, 100% 100%;
opacity:0.6;
}
The -moz- value of the progress bar must be red, thanks in advance!
Reference from css-tricks:
"Firefox provides a single pseudo class (-moz-progress-bar) we can use to target the progress bar value. This means that we cannot style the background of the container in Firefox."
Like said, the -moz-progress-bar refers to the value itself, so making it red should make the value as what you wanted. -moz-progress-value doesn't exist.
I'd like to know why my class .top does not work for my second DIV wrapper top? I would expect to have 200px between the bottom of the picture on the right and the top of the red DIV but it's not working. See JSFIddle
HTML
<div class="wrapper top">
<div class="block-1">
<p><span>ddfsfsdsfds</p>
<p>fdsfsdfs.</p>
<p>dfsdfdsfds.</p>
</div>
<div class="block-2"><img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></div>
</div><!-- End wrapper -->
<div class="wrapper top">
<div class="block-100pc">
block-100pc
</div>
</div>
CSS
body {
background: #F2F2F2;
}
.top {
margin-top: 200px;
}
.wrapper {
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
}
.block-1 {
float: left;
box-sizing: border-box;
padding: 20px;
width: 60%;
text-align: justify;
background-clip: border-box;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.block-1 span {
color: #124191;
font-weight: bold;
}
.block-2 {
float: right;
overflow: hidden;
box-sizing: border-box;
width: 35%;
padding: 20px;
background-clip: border-box;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
text-align: justify;
}
.block-100pc {
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: 20px;
background-clip: border-box;
background: #fff;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
text-align: justify;
clear: both;
background: red;
}
That is because of the floated elements. They do not "count into" the height of their container, unless they are cleared.
There are several clearing techniques you can use, for example setting overflow: hidden on the container:
.wrapper {
overflow: hidden;
}
jsFiddle Demo
.block-1 {
margin-top: 200px;
}
or
.top {
margin-bottom: 200px;
}
either one should work
The margin-top doesn't work in your case because the two block that are above it are floated. the margin-top property applies to the top of the parent.
In order to see a top margin, you will have to apply a margin-top= height of the hieghest floated div + the margin you want.
You have some broken code in your fiddle, I've updated it with some fixes. Another thing is that you are not taking into account your padding when you've set the width of block-1 and block-2, therefor they are overlapping. Fix your block-1 width down to a lower percent to allow for the padding on the blocks. Here is an updated fiddle: http://jsfiddle.net/pB5kq/5/
<div class="wrapper top">
<div class="block-1">
<p><span>ddfsfsdsfds</span></p>
<p>fdsfsdfs.</p>
<p>dfsdfdsfds.</p>
</div>
<div class="block-2">
<img src="images/136147555-e1329752650296-287x300.jpg" alt="136147555-e1329752650296-287x300" width="287" height="300"></img>
</div>
<div class="wrapper top">
<div class="block-100pc">
block-100pc
</div>
</div>
Along with the other answers regarding floating divs and clearing, this should help.