I am trying to have my chipped edge match the box size. I tried box-sizing in a number of situations but could not make it work.
.box {
background-color: #009fbd;
width: 100%;
}
.box p {
color: #fff;
}
.chipped-corner:before {
content: '';
position: absolute;
bottom: 5px;
left: 15px;
display: block;
height: 0;
width: 100%;
border-top: 7px solid #009fbd;
border-right: 7px solid transparent;
box-sizing: border-box;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-4 col-sm-3">
<div class="text-center chipped-corner">
<div class="box">
<div>
<p>Pulp Fiction</p>
<p>Best Movie Ever.</p>
</div>
</div>
</div>
</div>
something like this:
set relative style to same elem
.box {
background-color: #009fbd;
width: 100%;
}
.box p {
color: #fff;
}
.chipped-corner{
position: relative;
}
.chipped-corner:before {
content: '';
position: absolute;
left: 0;
bottom: -7px;
display: block;
height: 0;
width: 100%;
border-top: 7px solid red;
border-right: 7px solid transparent;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-4 col-sm-3">
<div class="text-center chipped-corner">
<div class="box">
<div>
<p>Pulp Fiction</p>
<p>Best Movie Ever.</p>
</div>
</div>
</div>
</div>
The issue is not with border-box. The issue is with the bootstrap column class you added.
It comes with 15px of padding on both sides you need to remove.
You need to reset the left position of the :before element to 0.
That should get you close to what you're looking for.
Related
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
If you specify `bottom: 0` for position: sticky, why is it doing something different from the specs?
(3 answers)
Closed 11 months ago.
I can't get #up-arrow to stick to the bottom of .container.
.container {
height: 100vh;
width: 100vh;
background-color: yellow;
}
#up-arrow {
width: 45px;
height: 45px;
border: 2px solid #23ADF8;
border-radius: 23.5px;
background-color: #23ADF8;
position: -webkit-sticky;
position: sticky;
bottom: 0;
}
#up-arrow:hover {
background-color: white;
}
#up-arrow:hover img {
filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
<div class="container">
<div id="up-arrow">
<a href="#top">
<img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
</a>
</div>
</div>
The element #up-arrow will not stick to the bottom of the container with the current layout.
Because, sticky element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).
Here the element #up-arrow is at the top of the container, hence the element will not be able to stick to bottom on scroll.
Add some content on top of #up-arrow to see sticky working.
Sample Implementation
.container {
min-height: 100vh;
width: 100vh;
background-color: yellow;
}
#up-arrow {
width: 45px;
height: 45px;
border: 2px solid #23ADF8;
border-radius: 23.5px;
background-color: #23ADF8;
position: -webkit-sticky;
position: sticky;
bottom: 0;
}
#up-arrow:hover {
background-color: white;
}
#up-arrow:hover img {
filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
#an-element {
height: 100vh;
}
<div class="container">
<div id="an-element"></div>
<div id="up-arrow">
<a href="#top">
<img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
</a>
</div>
</div>
OR
use position: relative; parent and position: absolute; child
Working Fiddle
.container {
height: 100vh;
width: 100vh;
background-color: yellow;
position: relative;
}
#up-arrow {
width: 45px;
height: 45px;
border: 2px solid #23ADF8;
border-radius: 23.5px;
background-color: #23ADF8;
position: absolute;
bottom: 0;
}
#up-arrow:hover {
background-color: white;
}
#up-arrow:hover img {
filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
<div class="container">
<div id="up-arrow">
<a href="#top">
<img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
</a>
</div>
</div>
as you haven't wrote any other content sitcky position may not work fine.
please review below stuff and you might get what you want,
.container {
height: 300vh;
width: 100vh;
background-color: yellow;
}
#up-arrow {
position: -webkit-sticky;
position: sticky;
bottom: 0;
width: 45px;
height: 45px;
border: 2px solid #23ADF8;
border-radius: 23.5px;
background-color: #23ADF8;
}
#up-arrow:hover {
background-color: white;
}
#up-arrow:hover img {
filter: invert(63%) sepia(35%) saturate(5648%) hue-rotate(174deg) brightness(102%) contrast(95%);
}
<div class="container">
<div style="background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
<div class="sticky">Sticky Section</div>
<div style="background: pink;">Scroll</div>
<div style="height: 300px; background: green;"></div>
<div class="sticky">Sticky Section</div>
<div style="background: red;">Scroll</div>
<div style="height: 300px; background: orange;"></div>
<div class="sticky">Sticky Section</div>
<div id="up-arrow">
<a href="#top">
<img src="https://mandoemedia.com/wp-content/uploads/2022/03/up.svg">
</a>
</div>
<div style="background: pink;">Scroll</div>
<div style="height: 300px; background: green;"></div>
<div class="sticky">Sticky Section</div>
</div>
Note: I have made sticky at bottom position and for your understanding how bottom positioned sticky works I've also added some stuff below sticky positioned content.
Whenever content below sticky position renders position of screen will be initial(normal).
References: https://www.w3schools.com/howto/howto_css_sticky_element.asp
I am trying to arrange my <div>s one below the other but they still end up on the same line, I tried using row and col approach but still it's not working, Answers on SO also didn't work.
Currently my code is like this
.dragAndDropBox{
position: absolute;
width: 80%;
height: 100%;
border: 1px solid #fff;
background-color: gainsboro;
border-radius: 5px;
}
.dragAndDropBox:hover{
position: absolute;
width: 80%;
height: 100%;
border: 1px solid #fff;
background-color: gray;
border-radius: 5px;
}
.dragAndDropBox .dragAndDropUpload{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.dragAndDropBox .dragAndDropProgressBar{
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 10%;
outline: none;
}
.dragAndDropBox .dragAndDropText{
padding-top: 2%;
text-align: center;
line-height: 1rem;
color: #3b3b3b;
font-family: Arial
}
<div class="uploadBox w-100">
<div class="uploadDropBox">
<div class="dragAndDropBox">
<input
accept="image/*"
class="dragAndDropUpload"
type="file"
/>
<div class="dragAndDropText">Drag / Browse</div>
<div
bsstyle="success"
class="dragAndDropProgressBar mt-1 progress">
<div
role="progressbar"
class="progress-bar progress-bar-striped"
style="width: 0%;"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
/>
</div>
</div>
</div>
<div class="uploadedBox w-100">
<div>Filename Delete View</div>
</div>
</div>
I am using Bootstrap 4.3.1
The <div>s have position: absolute which puts them on top of each other.
I would suggest adding position: relative to .dragAndDropBox so all the absolutely positioned elements have a relative element to refer to.
Here's the fiddle: https://jsfiddle.net/yjdkne3b/
.dragAndDropBox {
position: relative;
width: 80%;
height: 200px;
border: 1px solid #fff;
background-color: gainsboro;
border-radius: 5px;
}
.dragAndDropBox:hover {
background-color: gray;
}
.dragAndDropBox .dragAndDropUpload {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.dragAndDropBox .dragAndDropProgressBar {
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 10%;
outline: none;
}
.dragAndDropBox .dragAndDropText {
padding-top: 2%;
text-align: center;
line-height: 1rem;
color: #3b3b3b;
}
<div class="uploadBox w-100">
<div class="uploadDropBox">
<div class="dragAndDropBox">
<input accept="image/*" class="dragAndDropUpload" type="file" />
<div class="dragAndDropText">Drag / Browse</div>
<div bsstyle="success" class="dragAndDropProgressBar mt-1 progress">
<div role="progressbar" class="progress-bar progress-bar-striped" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
</div>
</div>
</div>
<div class="uploadedBox w-100">
<div>Filename Delete View</div>
</div>
</div>
I hope this is the solution you are looking for.
Also, you don't have to repeat the properties from the element on hover. If only the background changes on hover it's ok to change just that and the other properties will remain the same. :)
Use <br> as a line break (end-of-line).
I think it is because of the "position: absolute" in your CSS. This makes block elements only use as much space as they need.
You can read more about this here: Does adding a position: absolute to a block element make it behave like an inline?
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 am trying to create a vertical line with a text in the middle. I don't know how to achieve this in css.
See image
Actually, many ways.
One of them:
html
<div class="wrapper">
<div class="line"></div>
<div class="wordwrapper">
<div class="word">or</div>
</div>
</div>​
css
.wrapper {
position: relative;
width: 250px;
height: 300px;
border: 1px dashed #ccc;
margin: 10px;
}
.line {
position: absolute;
left: 49%;
top: 0;
bottom: 0;
width: 1px;
background: #ccc;
z-index: 1;
}
.wordwrapper {
text-align: center;
height: 12px;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -12px;
z-index: 2;
}
.word {
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px;
font: bold 12px arial,sans-serif;
background: #fff;
}
​
See example: http://jsfiddle.net/zmBrR/22/
Here's a way to do it with no background image. It's pretty reliant on a fixed height; you'd have to use display: table-cell to have it align vertically perfectly.
http://jsfiddle.net/mstauffer/uyTB7/
HTML:
<div class="container">
<div class="side">Left side</div>
<div class="or">
<div class="or-line"></div>
<div class="or-label">Or</div>
</div>
<div class="side">Right side</div>
</div>
​CSS:
.container {
padding: 1em;
}
.side, .or {
float: left;
height: 6em;
text-align: center;
}
.side {
width: 40%;
}
.or {
position: relative;
width: 20%;
}
.or-line {
float: left;
width: 50%;
border-right: 1px solid #aaa;
height: 6em;
}
.or-label {
background: #fff;
color: #aaa;
height: 1em;
left: 50%;
margin-left: -1.25em;
margin-top: 2em;
padding: .5em;
position: absolute;
text-transform: uppercase;
width: 1em;
}
​
Essentially, you're using .or-line to create a line at 50%; you're setting .or to position: relative; to contain the absolutely positioned .or-label; and you're manually positioning .or-label at 50% in the middle, and then adjusting it back across the line with a negative left margin. Then you're also expanding its size with padding and bumping it down vertically with the margin-top.
this is the solution with flex box:
https://jsfiddle.net/1z0runv9/1/
.wrapper {
width: 200px;
height: 200px;
display: flex;
justify-content: center;
}
.or-separator {
display: flex;
flex-direction: column;
align-items: center;
color: #d3d7da;
}
.vertical-line {
border-left: 1px solid #d3d7da;
flex-grow: 1;
width: 1px;
}
<div class="wrapper">
<div class="or-separator">
<div class="vertical-line"></div>
<div>Or</div>
<div class="vertical-line"></div>
</div>
</div>
Put a <div> around the markup and use CSS like this:-
<div class="verticalLine">
some other content
</div>
in cSS:-
.verticalLine {
border-left:thick solid #ff0000;
}
OR you can try this:-
<style type="text/css">
#your_col {
border-left: 1px solid black;
}
</style>
<div id="your_col">
Your content here
</div>
You can use jquery to do the same thing. Import jquery cdn in your HTML document
select the required item and write a javascript code for that.
consider this example
<!DOCTYPE html>
<html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Todo list</title>
<style type="text/css">
.completed{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="container">
<h1>Todo List</h1>
<input type="text" >
<ul>
'enter code here'
<li>aaa </li>
<li>bbb </li>
<li>ccc </li>
</ul>
</div>
<script type="text/javascript" >
`enter code here`
$("li").click(function () {
$(this).css("color","gray");
$(this).css("text-decoration","line-through");
});
or
$("li").click(function () {
$(this).toggleClass("completed");
});
</script>
</body>
</html>
In this example line is passed over the list(li) elements.
Regardless of the question asked, i am here going for a rather simple approach in both directions.
.demo-body{
height: 400px;
}
.line-wrapper{
background: black;
width: 2px;
height: 100%;
position: relative;
}
.line-wrapper .word{
position: absolute;
background: white;
top: 50%;
transform: translate(52%,-50%);
right: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
.line-wrapper .word.vertical{
writing-mode: tb-rl;
}
<div class="demo-body">
<!-- HORIZONTAL TEXT -->
<div class="line-wrapper">
<div class="word">OR</div>
</div>
<br>
<!-- VERTICAL TEXT -->
<div class="line-wrapper">
<div class="word vertical">OR</div>
</div>
</div>
you can archive it by using flexbox for example
body {
position: relative;
height: 100vh;
}
.vertical {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
transform: translateX(-10px);
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
color: #999;
}
.vertical .line {
width: 1px;
flex: 1;
background: #999;
}
<div class="vertical">
<div class="line"></div>
<div class="text">OR</div>
<div class="line"></div>
</div>
Using CSS, how can I create a partial border as per image below
I can get the complete border with:
border: 1px solid #f5f5f5;
but only want to show maybe 30px at the top and botton of the vertical border with nothing imbetween?
can this be acheived?
Thanks as always,
There is a CSS solution, but it's complicated and also requires HTML markup:
#box {
width: 200px;
height: 200px;
margin: 30px;
position: relative;
}
#box > div.corner {
display: block;
position: absolute;
width: 50px;
height: 50px;
}
.top {
top: 0px;
border-top-style: solid;
}
.bottom {
bottom: 0px;
border-bottom-style: solid;
}
.left {
left: 0px;
border-left-style: solid;
}
.right {
right: 0px;
border-right-style: solid;
}
<div id="box">
<div class="corner top left"></div>
<div class="corner top right"></div>
<div class="content">content</div>
<div class="corner bottom left"></div>
<div class="corner bottom right"></div>
</div>
DEMO