With the below code, I am trying to make an overlay for a "progress bar" with text, I need the flex to make it responsive,
BUT the only way I know to make an overlay is to use things like fixed or absolute position, which breaks the layout, is there a way to keep it responsive and have an overlay with dynamic width (for displaying progress).
.master{
display: flex;
}
.item{
border-right: 1px solid black;
padding-right: 5px;
display: inline-block;
text-align: center;
padding: 15px 0;
flex-grow: 1;
flex-basis: 0;
}
<div style='border:1px solid black;margin: 0 auto;'>
<div class='master'>
<span class="item">a</span>
<span class="item">b</span>
<span class="item">c</span>
</div>
<div id='overlay' style='background-color:red;opacity:0.7;width:100%;height:100%;'></div>
</div>
Absolute position will not break the layout...assuming you have set the positioning context on the parent?
.parent {
position: relative;
}
.master {
display: flex;
}
.item {
border-right: 1px solid black;
padding-right: 5px;
display: inline-block;
text-align: center;
padding: 15px 0;
flex-grow: 1;
flex-basis: 0;
}
#overlay {
position: absolute;
background-color: red;
opacity: 0.7;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div class="parent">
<div class="master">
<span class="item">a</span>
<span class="item">b</span>
<span class="item">c</span>
</div>
<div id="overlay"></div>
</div>
Related
This question already has an answer here:
How to create uneven rounded sides on a div?
(1 answer)
Closed 10 months ago.
I'm trying to create a web element like this, but am having trouble figuring out how to make a curved border between two divs. I understand the functionality of border-radius (very bad implementation in codepen below), bit wanted to see if anyone had ideas on how to implement the picture above? I thought about having a border-radius with a much larger radius, then hiding overflow, but not sure if that makes sense.
https://codepen.io/unsure-of-name/pen/LYeBdbX
.circle {
height: 100px;
width: 100px;
background-color: #eee;
border-radius: 100px;
box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.2), 0 0px 20px 0 rgba(0, 0, 0, 0.19);
display: inline-block;
vertical-align: top;
position: relative;
z-index: 2;
}
.bar {
display: inline-block;
margin-top: 25px;
background-color: #eee;
margin-left: -50px;
padding-left: 50px;
height: 50px;
text-align: center;
positive: relative;
z-index: 1;
}
.bar div:nth-child(1) {
background-color: red;
border-radius: 10px;
}
.bar div:nth-child(2) {
background-color: #bbb;
}
.bar div:nth-child(3),
.bar div:nth-child(4) {
background-color: #eee;
border-right: 1px solid black;
}
.bar div {
display: inline-block;
vertical-align: middle;
text-align: center;
line-height: 50px;
}
.row {
}
.row > div {
}
<div class='container'>
<div class='row'>
<div class='circle'>
</div>
<div class='bar'>
<div>
Group 1
</div>
<div>
Description
</div>
<div>
Cell 1
</div>
<div>
Cell 2
</div>
</div>
</div>
<div class='row'>
<div class='circle'>
</div>
<div class='bar'>
<div>
Group 1
</div>
<div>
Description
</div>
<div>
Cell 1
</div>
<div>
Cell 2
</div>
</div>
</div>
</div>
Thanks!
That's some very confusing css you have written. The css below will get you what you want. You still have to organize the rest of it. Hope this helps.
.row{
display: flex;
align-items: center;
}
.bar {
display: inline-block;
background-color: #eee;
margin-left: -50px;
padding-left: 50px;
height: 50px;
display: flex;
text-align: center;
positive: relative;
z-index: 1;
}
.bar div{
padding: 0 10px;
width: 100px;
}
.bar div:nth-child(1) {
position: relative;
background: red;
color: black;
height: 50px;
}
.bar div:nth-child(1)::before{
content: '';
width: 20px;
height: 100%;
position: absolute;
bottom: 0;
right: -5px;
background: red;
border-radius: 100%;
}
You can try using ellipse to define the how 'curvy' the side should look
#box1 {
background: red;
width: 10rem;
height: 3rem;
padding: 0.5rem;
clip-path: ellipse(10rem 7.5rem at left);
}
.wrapper {
background: blue;
width: 20rem;
}
<div class="wrapper">
<div id="box1">
</div>
</div>
This may be a begginer question, but I just can't seem to figure it out.
HTML:
<div id = "upper">
<input id = "leftBigArrow" class = "button" type="button">
<div id = "picBox">
<img id = "bigPic" src="images/IMG_1744.JPG" alt="">
<div id = "overlay">
<div id = "olText">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>
<input id = "rightBigArrow" class = "button" type="button">
</div>
CSS:
#upper {
display: flex;
background: white;
box-shadow: 0px 0px 7px 2px #313131;
}
#picBox {
width: 800px;
height: 600px;
background-color: #8D918D;
display: flex;
}
#pigPic {
object-fit: contain;
object-position: center;
z-index: 1;
}
#overlay {
align-self: flex-end;
width: 100%;
height: 20%;
background-color: black;
color: white;
opacity: 0.6;
margin: 0;
font-size: 80%;
z-index: 2;
}
#olText {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
h1, p {
margin-left: 20px;
}
h1 {
margin-top: 0;
margin-bottom: 10px;
}
p {
margin-top: 0;
margin-bottom: 0;
}
In #picBox I have 2 items, an image (#bigPic) with object-fit attribute and a div with a div with 2 text items (#overlay). I want to have the overlay over the image. Overlay height is 20% at the bottom of #picBox and the 2 text items in #olText need to be arranged as css shows. If I use position absolute and relative, it messes up the object-fit. So how can I make this work as I intended?
In CSS, if you want to overlay an element, that element's position (in this case #picBox) needs to be set to relative first. Then the position of the element you want on top (#overlay) should be set to absolute. See the example below.
#upper {
display: flex;
background: white;
box-shadow: 0px 0px 7px 2px #313131;
}
#picBox {
width: 800px;
height: 600px;
background-color: #8D918D;
display: flex;
position: relative;
}
#pigPic {
object-fit: contain;
object-position: center;
z-index: 1;
}
#overlay {
align-self: flex-end;
width: 100%;
height: 20%;
background-color: black;
color: white;
opacity: 0.6;
margin: 0;
font-size: 80%;
z-index: 2;
position: absolute;
}
#olText {
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
h1,
p {
margin-left: 20px;
}
h1 {
margin-top: 0;
margin-bottom: 10px;
}
p {
margin-top: 0;
margin-bottom: 0;
}
<div id="upper">
<input id="leftBigArrow" class="button" type="button">
<div id="picBox">
<img id="bigPic" src="https://www.w3schools.com/tags/img_pink_flowers.jpg" alt="">
<div id="overlay">
<div id="olText">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
</div>
<input id="rightBigArrow" class="button" type="button">
</div>
I'm trying to add page-to-top code to a page. Everything works fine except for the positioning of the "to top" button.
I've shown the problem in this jsfiddle. You can see the To Top in the lower right. I need it to be in the lower right of the middle div.
My code is below. I looked up the fixed position description and it says it aligns to the viewport. Is there a way to override that so it aligns to a specific div?
.layout {
float: left;
width: 150px;
height: 200px;
border: 1px solid red;
}
#toTop {
padding: 5px 3px;
position: fixed;
bottom: 0;
right: 5px;
z-index: 100;
}
<div>
<div class="layout">Left column</div>
<div class="layout">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
You should add position: relative; to .layout and position: absolute; to #toTop. The absolute positioned element will have its relative parent as base
.layout {float:left; width:150px;height:200px;border:1px solid red;position: relative;}
div > span { position: absolute; right: 0; bottom: 0; }
https://jsfiddle.net/oe9fqv3p/13/
This will do it for you.
I added the relative position and in the div > span positioned it absolute and right 0 and bottom 0
I have changed couple of styles in your CSS code. The example is here
https://jsfiddle.net/2yms90qz/
Though i am not sure if you want something like this. Please let me know.
I have removed float from your divs and added inline-block as display. Also changed some position value to achieve the result.
.layout {display: inline-block; width:150px;height:200px;border:1px solid red;}
.middle {
position: relative
}
#toTop {
/* padding: 5px 3px; */
position: absolute;
bottom: 0;
right: 0;
z-index:100;
}
<div>
<div class="layout">Left column</div>
<div class="layout middle">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
.layout should be positioned and .top should be absolute.
.layout{
position:relative;
}
.top{
position :absolute
}
please see
https://jsfiddle.net/ainouss/39ezf0yj/1/
If you want to keep that "To Top" button always visible on the bottom of the viewport, then you would have to position it relative to the viewport in a way that it matches the location you want, relative to the parent.
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: fixed;
bottom: 10px;
z-index: 100;
right: calc(35vw + 10px);
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
Note, however, that as you pointed out in your comment, this means the "To Top" would still be visible even when you scroll past that first .container element.
To avoid that, if you just want that button to be at the bottom of its column, even if that's outside of the viewport and the user needs to scroll down to get to it, then you should use position: absolute instead and also add position: relative to .layout:
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: absolute;
bottom: 10px;
right: 10px;
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
To get the best of both worlds, and make the "To Top" button stay at the bottom of the viewport until the end of the first .container is reached, and remain inside it when the user scrolls past it, you could use position: sticky:
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
position: -webkit-sticky;
position: -ms-sticky;
position: sticky;
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
top: calc(100vh - 49px);
float: right;
outline: none;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
The only problem with this approach could be browser support.
In that case, if you really need this feature/behaviour, you could implement your own sticky element using JS and listening for the onscroll and 'onresize' events.
Alternatively, you can use JS to check if position: fixed is supported and apply one solution or another:
const hasSticky = (() => {
const el = document.createElement('div');
el.style.cssText = "position:sticky;position:-webkit-sticky;position:-ms-sticky;";
return el.style.cssText.indexOf('sticky')!==-1;
})();
if (hasSticky) {
document.getElementById('totop').classList.add('sticky');
}
body {
margin: 0;
font-family: monospace;
}
.container {
display: flex;
height: 200vh;
width: 90vw;
border: 3px solid red;
margin: 10px auto;
}
.layout {
position: relative;
border-left: 3px solid red;
width: 33.33333333%;
text-align: center;
padding: 10px;
}
.layout:first-child{
border-left: none;
}
#totop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: absolute;
bottom: 10px;
right: 10px;
outline: none;
}
#totop.sticky {
position: -webkit-sticky;
position: -ms-sticky;
position: sticky;
bottom: auto;
top: calc(100vh - 49px);
right: auto;
float: right;
}
#totop:hover {
background: red;
color: white;
}
<div class="container">
<div class="layout">Left column</div>
<div class="layout">Middle column
<button id="totop">TO TOP</button>
</div>
<div class="layout">Right column</div>
</div>
<div class="container">
<div class="layout">Something else here.</div>
<div>
I changed the scroll code I was using to look for the last button on the page and to hide the To Top button when it reached it. Here is my updated jsfiddle and code. The numbers are not quite correct but I'm just posting this in case someone else runs across this problem. I'm not sure if it is the best solution but I've tested it here and it seems to work fine. My tnaks to all who replied.
<style>
.container {
display: flex;
height: 150vh;
width: 100vw;
}
.layout {float:left; width:150px;height:250px;border:1px solid red;}
.layout-middle {position:relative;float:left; width:150px;height:250px;border:1px solid red;}
#toTop {
font-family: monospace;
border: 3px solid red;
background: white;
padding: 10px;
position: fixed;
bottom: 60px;
z-index: 100;
right: calc(45.33333333% + 10px);
outline: none;
}
</style>
<div class="container">
<div class="layout">Left column</div>
<div class="layout-middle">Middle column
<span id="toTop">To Top</span>
</div>
<div class="layout">Right column</div>
</div>
<div><button id="button-isvisible">Button</button></div>
<script>
$(document).ready(function($){
var offset = 20;
var duration = 500;
$(window).scroll(function() {
var continue_button_pos = $('#button-isvisible').offset();
var button_top = continue_button_pos.top - 350 ;
if ($(this).scrollTop() > button_top) {
$('#toTop').fadeOut(duration);
} else if ($(this).scrollTop() > offset) {
$('#toTop').fadeIn(duration);
} else {
$('#toTop').fadeOut(duration);
}
});
});
</script>
I checked various links to achieve this. One of them was: from stack overflow
Below is my code:
.a-deal {
position: relative;
}
.deal-hd {
float: left;
}
.deal-arw {
float: right;
padding: 10px;
background: grey;
}
.deal-hd:after {
content: '';
width: 100%;
border-bottom: solid 1px #d6d6d6;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="a-deal clearfix">
<h2 class="deal-hd">ebay Top Deals</h2>
<!-- <div class="mark"></div> -->
<div class="deal-arw">
˂
˃
</div>
</div>
Requirements:
line to come exactly at the center of two divs using pseudo selectors only
width of line should be scalable. That means in case, if any of the div size increase, the line should take the remaining space only.
You can just use display: flex and flex: 1 on deal-hd so it takes free width and add pseudo-element.
.a-deal {
display: flex;
align-items: center;
}
.deal-hd {
flex: 1;
display: flex;
align-items: center;
margin: 0;
}
.deal-hd:after {
content: '';
height: 1px;
background: black;
flex: 1;
margin: 0 10px;
}
<div class="a-deal clearfix">
<h2 class="deal-hd">ebay Top Deals</h2>
<div class="deal-arw">
˂
˃
</div>
</div>
You can use flex for this. No need to use floats. Using floats you have to write more css to align the items vertically center using transform and position.
And I will also suggest to use :pseudo selector of the parent .a-deal not the heading .deal-hd
Stack Snippet
.a-deal {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.deal-hd {
margin: 0;
background: #fff;
z-index: 9;
padding-right: 10px;
}
.deal-arw {
padding: 10px;
background: grey;
z-index: 9;
padding-left: 10px;
}
.a-deal:after {
content: '';
width: 100%;
border-bottom: solid 1px #d6d6d6;
position: absolute;
left: 0;
top: 50%;
z-index: 1;
}
<div class="a-deal clearfix">
<h2 class="deal-hd">ebay Top Deals</h2>
<!-- <div class="mark"></div> -->
<div class="deal-arw">
˂
˃
</div>
</div>
If I didn't make parent container be inline-block style
The inner arrow will be aligned in the center position which is I expected.
However, there will be a line-break for the following text.
If I make the parent container be inline-block style
HTML
<div class="queue-view-entry-line" name="Name">
<div class="mycompany-document" style="/* display: inline-block; */">
<div class="arrow-right">
</div>
</div>
<span class="entry-label">File Name</span><span class="entry-value">Planned Payment Dates 2017
</span>
</div>
CSS rules
div{
.mycompany-document{
background: #F7F7F7;
border: 1px solid #AAAAAA;
left: 64px;
top: 64px;
width: 32px;
height: 32px;
vertical-align: middle;
border-radius: 5px;
letter-spacing: 1px;
text-align: center;
display: table-cell;
.arrow-right{
margin: auto;
vertical-align: middle;
display:inline-block;
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
}
}
I recommend you give flexbox a try. It will quickly be your best friend!
I didn't feel like wrestling with your HTML, so I created a new example to show how you could achieve the desired effect.
Check out this fiddle.
https://jsfiddle.net/omucfbzh/
<div class="box">
<h2>Documents</h2>
<div class="others">
<div class="arrow-container">
<div> > </div>
</div>
<p>Planned Payment Dates 2017</p>
</div>
</div>
.box {
background-color: orange;
display: flex;
flex-direction: column;
padding: 7.5px;
}
.others {
display: flex;
}
.arrow-container {
background-color: grey;
border-radius: 5px;
height: 50px;
width: 50px;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}