I am trying to make a progress indicator for a Gantt chart, showing actual progress against target progress, a bit like this:
The black bar is the target, and the red is actual progress.
Sample code (it's generated on the fly) is this:
<div style='border: 1px solid red; position:relative; text-align:right'>
<div class='progressBarRed' style='width:40%; float:left'></div>
<div class='progressBarEmpty' style='width:60%; float:left;'></div>
<div class='progressBarTarget' style='width:75%;'></div>
</div>
and the CSS is:
/* Gant Bar
-----------------------------------------------*/
div.progressBarEmpty
{
height:18px;
position:relative;
background: #dddddd;
}
div.progressBarGreen
{
position:relative;
top:0px;left:0px;
height:18px;
background: #009900;
z-index:0;
}
div.progressBarRed
{
position:relative;
top:0px;left:0px;
height:18px;
background: #ee0000;
z-index:0;
}
div.progressBarTarget
{
position:absolute;
top:7px;left:0px;
height:4px;
background-color:#000000;
border-style: none;
z-index:1;
}
The problem I'm having is that I can't get the red border to sit around the bars, like this:
It works with an empty bar, but when I introduce the red bar (and the float) the border collapses.
JSFiddle is here: https://jsfiddle.net/bdgriffiths/funnx3uz/
You can make the same with just one element. Add z-index: -1; to the pseudo-element to take it to the bottom of everything.
Hover over the bar to see the red progress bar.
Fiddle
div {
height: 25px;
border: 1px solid red;
width: 100%;
position: relative;
}
div:before {
content: '';
position: absolute;
height: 5px;
width: 75%;
top: 10px;
background-color: black;
}
div:after {
content: '';
position: absolute;
height: 100%;
width: 0%;
background-color: red;
z-index: -1;
}
div:hover:after {
width: 75%;
transition: 1s ease;
}
<div></div>
Add overflow: auto; style to your div:
<div style='border: 1px solid red; overflow: auto; position:relative; text-align:right'>
<div class='progressBarRed' style='width:40%; float:left'></div>
<div class='progressBarEmpty' style='width:60%; float:left;'></div>
<div class='progressBarTarget' style='width:75%;'></div>
</div>
Basically if You are using "float div" inside another div it causes that inner div's height (with float style) is not added to outter div's height so in Your example the outter div has 0 height. overflow causes that it's inner div's height is added to outter div's height.
Related
I am currently working on a drag and drop web app with vue.js
In this app, we have some special designed borders on an input HTML element.
The designs look like this: (ignore the grey vertical line. This is drawn dynamically)
I have tried something like creating a sibling div an make it a little bit larger than the input, set it with z-index behind the input and set a color. But the problem is that the light blue border-right and border-left will always take 100% of the height. I need something like 75% or 80%.
The "overlapping" border can also be on the top, right or left on an element
Does anyone have a clue for the best way to solve this problem responsive?
border-image with gradient is what you need:
input {
border:2px solid;
padding:10px;
background:pink;
}
.one {
border-image:linear-gradient(to right, red 80%,blue 0) 2;
}
.two {
border-image:linear-gradient(to bottom,red 70%,blue 0) 2;
}
<input type="text" class="one">
<input type="text" class="two">
You can use :after and :before for the borders that cover the remaining 20%.
<div><input value="Text"/></div>
CSS:
input {
padding:20px;
border: 5px solid lightblue;
border-bottom: 5px solid gray;
position:relative;
display:block;
}
div:before {
content:' ';
width:5px;
height: 14px;
background:gray;
position:absolute;
display:block;
bottom:0;
left:0;
z-index:999;
}
div:after {
content:' ';
width:5px;
height: 14px;
background:gray;
position:absolute;
display:block;
bottom:0;
right:0;
z-index:999;
}
div {position: relative;width:fit-content;}
See example: https://codepen.io/MistaPrime/pen/XWryOOy
I would probably style the wrapping element and add psuedo elements on it.
https://codepen.io/slackday/pen/wvwQOvq
<html>
<head>
<title>How to create a overlapping border with different colors and widths / heights on a input element?</title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
.site {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.input-wrapper {
position: relative;
}
.input-wrapper::before,
.input-wrapper::after {
height: 20%; /* adjust height of how much it should overlap */
width: 1px; /* same width as your input border */
position: absolute;
bottom: 0;
z-index: 1;
content: '';
background-color: #ccc; /** same color as bottom border */
}
.input-wrapper::before {
left: 0;
}
.input-wrapper::after {
right: 0;
}
input {
border: solid 1px aqua;
border-bottom: solid 1px #ccc;
position: relative; /* to position psuedo elements ::before, ::after */
padding: 1rem;
font-size: 16px;
line-height: 1;
}
input:focus {
outline: none;
}
</style>
<body>
<main class="site">
<div class="input-wrapper">
<input type="text" value="text" placeholder="Aorta" />
</div>
</main>
</body>
</html>
I have a block position absolutely within its parent. The parent has a border left and right. This causes the absolutely positioned block (which also has borders) to be 2px too small.
What is the best way to go about fixing this?
Goal:
I basicly want the two blocks to align. Their borders should basicly look like 1 border. The problem is that even with border-box the child div is smaller and thus doesn't align.
html
<div class="container">
<div class="diagonal"></div>
</div>
css
* {
box-sizing: border-box;
}
body {
background-color:red;
}
.container {
width:1170px;
margin:0 auto;
margin-top:200px;
height:700px;
position:relative;
z-index:3;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
border-width:0 1px 1px 1px;
}
.diagonal {
width:100%;
height:400px;
transform:skewY(-10deg);
position:absolute;
top:-200px;
left:0;
background-color:white;
border-style:solid;
border-color:transparent #D2D8DE;
border-width:0 1px;
z-index:-1;
}
JSFiddle
I think you're looking for this:
* {
box-sizing: border-box;
}
This property tells the browser to account for any border and padding in the value you specify for width and height
EDIT :
If you want to have different borders for inner and outer div and you want them to align, then set .diagonal{ left:-1px; } where 1px is width of inner div's border.
I've changed width and color so that result would be easier to notice. NB: In this case you don't need box-sizing: border-box;
body {
background-color: red;
}
.container {
width: 1170px;
margin: 0 auto;
margin-top: 200px;
height: 700px;
position: relative;
z-index: 3;
background-color: white;
border-style: solid;
border-color: transparent black black black;
border-width: 0 3px 3px 3px;
}
.diagonal {
width: 100%;
height: 400px;
transform: skewY(-10deg);
position: absolute;
top: -200px;
left: -3px;
background-color: white;
border-style: solid;
border-color: transparent blue;
border-width: 0 3px;
z-index: -1;
}
<div class="container">
<div class="diagonal"></div>
</div>
I'm trying to insert a text with the upper side of a box using CSS, but I can't come up with anything to make it happen. this is my code so far:
.boxed{
border: 1px solid grey;
width: 300px;
height: 180px;
}
and this is what I want to do:
how do i insert a text in the upper border of a box?
*im already done with this thanks guys. but my problem now is putting pagination on tabs. can u help me? the rest of the code is in here:
http://jsfiddle.net/3y539gvq/
Set your box to relative positioning and position the label using absolute positioning. Also, I'd recommend setting the background of your container, and inheriting the background in the label CSS to keep the two consistent.
.boxed {
position: relative;
background: white;
border: 1px solid grey;
width: 300px;
height: 180px;
}
.label {
background: inherit;
padding: 0 5px;
position: absolute;
left: 5px;
top: -10px;
}
<div class="boxed">
<span class="label">General Information</span>
</div>
DEMO: http://jsfiddle.net/b7a29fsd/1/
You can use:
.boxed {
... your existing styles ...
position:relative;
}
.boxed:after {
position:absolute;
top:-5px;
left:15px;
padding:3px;
content: "your label text";
background-color: (something to cover up the border underneath)
}
You can put a text within the div you have like so:
<div>
<p> Some text </p>
</div>
CSS:
.boxed{
border: 1px solid grey;
width: 300px;
height: 180px;
position:absolute;
}
.boxed p{
position:relative;
top:-28px;
left:5px;
z-index:1;
background-color:white;
width:80px;
}
}
Example here.
Basically, I want a row of triangles on the top of the page. They should be down facing. I've made the triangle in CSS but for some reason they want to go up and down on top of each other and not in a row like I need them too.
Can someone with more experience in CSS please take a look? Thanks.
HTML:
<div class="triangle-container">
<div class="arrow-down">
</div>
<div class="arrow-down">
</div>
</div>
CSS:
/* BODY */
body
{
background-color: #eee;
height: 100%;
width: 100%;
z-index: 1;
padding: none;
border: none;
margin: none;
}
/* Triangles! */
.triangle-container
{
display: inline;
height: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
}
.arrow-down
{
margin-left:auto;
margin-right:auto;
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid #FF6A00;
}
jsFiddle demo
You must apply display:inline to those elements which you want to be displayed inline, not their container.
In your case, it should be inline-block, because it should be inline element which behaves as block element. Read more here.
Put display:inline-block for the .arrow-down and remove it from .triangle-container:
.triangle-container
{
display: inline; /* Remove this line */
height: auto;
width: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
}
.arrow-down
{
display: inline-block; /* Add this line */
margin-left:auto;
margin-right:auto;
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid #FF6A00;
}
Live demo: jsFiddle
I added a float:left to your .arrow-down class. (and updated a couple of classes)
Fiddle here : http://jsfiddle.net/KwKe8/
I am confused as to have to make it work in CSS only to have a div where the border would be only visible on half it's width.
The border style is a simple 1px solid #000;
However, I want the top of the div's border to not be visible everywhere (on 100% on the div's width),
rather only on the first 50% of the div's width.
I haven't been able to get an example of this anywhere, and it needs to be in percentages, so the usual bag of tricks (image over the second half,...).
If you do not want to mess with the HTML at all, you can do it with an empty pseudoelement, using CSS only. You still need to know the background color, of course (assuming white here):
<span class="half-a-border-on-top">Hello world!</span>
<style>
.half-a-border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-top:after {
padding:0;margin:0;display:block;/* probably not really needed? */
content: "";
width:50%;
height:1.1px;/* slight higher to work around rounding errors(?) on some zoom levels in some browsers. */
background-color:white;
position: absolute;
right:0;
top:-1px;
}
</style>
Result:
Snippet
.half-a-border-on-top {
border-top:1px solid black;
position: relative;
}
.half-a-border-on-top:after {
padding:0;margin:0;display:block;/* probably not really needed? */
content: "";
width:50%;
height:1.1px;
background-color:white;
position: absolute;
right:0;
top:-1px;
}
<span class="half-a-border-on-top">Hello world!</span>
Fiddle:
http://jsfiddle.net/vL1qojj8/
Edit 2023: Now that even Safari seems to fully and properly support linear-gradient, the answer by 红了樱桃绿了吧唧 is probably more elegant, and will work without knowing the background color.
Would this work:
#holder {
border: 1px solid #000;
height: 200px;
width: 200px;
position:relative;
margin:10px;
}
#mask {
position: absolute;
top:-1px;
left:1px;
width:50%;
height: 1px;
background-color:#fff;
}
<div id="holder">
<div id="mask"></div>
</div>
You can use CSS gradient border
.half-a-border-on-top {
border-top: 1px solid;
border-image: linear-gradient(to right, #000 50%, transparent 50%) 100% 1;
}
<span class="half-a-border-on-top">Hello world!</span>
let show you how i edit the code of leo, to put a half border at left in center.
try this:
html code
<div class="half-a-border-on-left">Hello world!</div>
css code
<style>
.half-a-border-on-left {
border-left: 1px solid black;
position: relative;
height: 50px;
background: red;
}
.half-a-border-on-left:after {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left:-1px;
top: -10px;
}
.half-a-border-on-left:before {
padding:0;
margin:0;
content: "";
width: 1px;
height: 10px;
background-color:white;
position: absolute;
left: -1px;
bottom: -5px;
}
</style>
Those are code i use to put a half border thank you leo,
I love Hyderabad
***
.div_1 {
width: 50px;
border-bottom: 2px solid black;
}
.div_2 {
width: max-content;
margin-bottom: 10px;
}
<div class="div_1" ><div class="div_2">I love Hyderabad</div></div>