I have 3 column on my web page like facebook as well as in this example.
https://benfrain.com/playground/scroll-test.html
What i want is when i start scrolling down all columns should scroll down and if anyone of these columns reach at end of its data that column should stop scrolling there while other columns are still scrolling. Now Suppose if first and third column reached to its end and stopped scrolling but second column still have some data down and still scrolling , When i start scrolling up, first and third column also need to start scrolling up immediately and will stop again whenever first and second column again reached to its full top.
How can i achieve this.
I build this page with reactjs and bootstrap .
$(function() {
for (var i = 0; i < 20; i++) {
$('.content').append('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae pretium ante. Pellentesque eu quam non eros fermentum euismod. Sed turpis ligula, hendrerit at erat at, mattis commodo tortor. Sed eleifend velit interdum augue faucibus luctus. Nulla facilisi. Fusce facilisis at enim ac euismod. Vestibulum a lobortis velit. Sed ac erat ac sapien rhoncus tristique. Aliquam eget diam non justo sollicitudin egestas. Cras aliquam egestas nunc sed fermentum. Donec nec consectetur neque. Proin arcu ligula, tincidunt a augue in, dictum pharetra nisi.</p>');
}
});
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
position: relative;
}
#container {
background-color: #f1f1f1;
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
}
#inner {
display: table;
height: 100%;
}
#inner>div {
display: table-cell;
}
#palette {
min-width: 180px;
max-width: 180px;
width: 180px !important;
background-color: pink;
}
#list {
width: 55%;
min-width: 350px;
background-color: cyan;
}
#editor {
width: 45%;
min-width: 400px;
background-color: magenta;
}
.content {
overflow: auto;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="inner">
<div id="palette">palette</div>
<div id="list">
<div class="content"></div>
</div>
<div id="editor">
<div class="content"></div>
</div>
</div>
</div>
Related
I want .content to scroll vertically and hide it's horizontal overflow, .preview and .editor should share the parent's width evenly.
.wrap {
display: flex;
background: gray;
}
.content {
overflow-x: hidden;
overflow-y: auto;
}
.editor textarea {
width: 100%;
height: 100%;
resize: none;
}
.editor {
flex: 1;
}
.preview {
flex: 1;
}
<div class='wrap'>
<div class='editor'>
<textarea></textarea>
</div>
<div class='preview'>
<div class='content'>
LongcontentLongcontentLongcontent
</div>
</div>
</div>
Some bad news for you:
Note: The overflow property only works for block elements with a specified height.
https://www.w3schools.com/cssref/pr_pos_overflow.asp
The 50% issue is caused by box-sizing and default styling of text-area elements; it is overflowing its .editor container, making it look larger than 50%;
Here is some code to do what I believe you're trying to do:
.wrap {
display: flex;
background: gray;
}
.content {
overflow-x: hidden;
overflow-y: auto;
/* without specifying a height, the content will never scroll vertically when using overflow-y:auto, because it will continue to grow to it's content's height otherwise */
max-height: 150px;
}
.editor textarea {
width: 100%;
height: 100%;
resize: none;
box-sizing:border-box; /* prevents drawing outside it's parent */
}
/* without forcing 50% width, flex will let a container's content grow to its content's size. Try with/without */
.editor, .preview {width: 50%}
.editor {
flex: 1;
}
.preview {
flex: 1;
}
<div class='wrap'>
<div class='editor'>
<textarea></textarea>
</div>
<div class='preview'>
<div class='content'>
THISCONTENTGETSCUTOFF_X_LongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontentLongcontent
THIS CONTENT WRAPS AND SCROLLS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac fermentum nunc. In vestibulum suscipit quam, ac mattis velit convallis quis. Phasellus ut justo id nunc placerat varius. Curabitur feugiat vulputate facilisis. Nulla est leo, posuere aliquet ligula at, ultricies placerat felis. Curabitur nec tincidunt arcu, sit amet varius nunc. Cras varius risus a tellus auctor egestas. Pellentesque sagittis tortor ac massa facilisis porta. Proin arcu nisl, facilisis non orci ut, tempor tincidunt arcu. Aenean luctus lacinia sapien, at sagittis enim pharetra non. Phasellus blandit pharetra hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam at feugiat diam, ut porttitor quam.
</div>
</div>
</div>
When the right panel is expanded, I want to fade out the content of the page and add css position to the background to make it slide to the left, is it possible? I can't modify the content when the panel is expanded because it doesn't receive an active class. Tried an "add class" in the JS for the content but didn't work.
https://codepen.io/darcyvoutt/pen/rhtfk
<div class="nav">
Left Panel
Right Panel
</div>
<div class="panel-left">
<div class="panel-content">
<div class="close"></div>
<div class="bottom">
Some content here.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
</div>
</div>
<div class="panel-right">
<div class="panel-content">
<div class="close"></div>
<p>Right Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<div class="content">
<h2>Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #84D5C5;
line-height: 1.5em;
font-size: 15px;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1, h2, h3 { margin-bottom: 0.5em; }
ul { margin: 30px 40px; }
li { margin: 5px 0; }
////////////////////////
// Mixins
////////////////////////
.transition(#property) {
-webkit-transition: #property;
transition: #property;
}
.boxStyle() {
background: #ffffff;
padding: 50px;
}
.panels() {
z-index: 10;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
}
.panelClose() {
#size: 15px;
#margin: 5px;
line-height: #size;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: #margin;
top: #margin;
height: #size;
width: #size;
content: "✖";
}
////////////////////////
// Panels & Reveal
////////////////////////
.panel {
#transition: all 1.5s ease-in-out;
padding: 20px;
&-content {
position: relative;
background: #efefef;
padding: 30px 50px;
overflow-y: auto;
height: 100%;
.close {
.panelClose();
&:before { .panelClose(); }
}
}
&-left {
.panels();
.transition(#transition);
left: -100%;
width: 45%;
&.expanded { left: 50px; }
}
&-right {
.panels();
.transition(#transition);
right: -100%;
width: 50%;
&.expanded { right: 0; }
}
}
.reveal {
&-left {
float: left;
}
&-right {
float: right;
}
}
////////////////////////
// Layout
////////////////////////
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
button {
padding: 4px 6px;
}
a {
font-weight: bold;
color: #222;
}
}
.content {
.boxStyle();
margin: 50px auto;
position: relative;
width: 90%;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
JS
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) { $(panel).removeClass('expanded'); }
});
});
}
revealPanel('.reveal-right','.panel-right', '.close');
revealPanel('.reveal-left','.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) { $('.panel-left').addClass('expanded'); }
if (e.keyCode == 82) { $('.panel-right').addClass('expanded'); }
});
});
You can add a class on the expand/close of the right panel that will:
fade the main content by changing the opacity CSS from 1 to 0.3 (for example)
move it to the right using the right from 0 to 50% (to match your right panel)
The transition rule in the .content CSS will animate the change.
(You only mention the right panel in your question, but it can be adapted for the left panel also).
See the working snippet:
// Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click', function() {
$(panel).addClass('expanded');
$(".content").addClass('hidefor-'+panel.substr(1));
});
// Close panel
$(buttonClose).on('click', function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-right');
});
// ESC to close Panel
$(document).bind("keydown", function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-right');
}
});
});
}
revealPanel('.reveal-right','.panel-right', '.close');
revealPanel('.reveal-left','.panel-left', '.close');
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown", function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-right').addClass('expanded');
$(".content").addClass('hidefor-panel-right');
}
});
});
.content {
background: #ffffff;
padding: 50px;
margin: 50px auto;
position: relative;
width: 90%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
opacity:1;
right:0;
}
.content.hidefor-panel-right {
opacity:0.3;
right: 50%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console", Monaco, monospace;
background: #84d5c5;
line-height: 1.5em;
font-size: 15px;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,
h2,
h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
background: #efefef;
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #000000;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-right {
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
right: -100%;
width: 50%;
}
.panel-right.expanded {
right: 0;
}
.reveal-left {
float: left;
}
.reveal-right {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
Left Panel
Right Panel
</div>
<div class="panel-left">
<div class="panel-content">
<div class="close"></div>
<div class="bottom">
Some content here.
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum, orci ut sagittis tristique, diam nisi dapibus elit, quis volutpat tortor dui interdum lacus. Proin commodo nibh arcu, sed pellentesque nunc facilisis in. Sed id dui sed dui adipiscing interdum at id lectus. Nullam auctor, sem tincidunt aliquam posuere, tellus neque tempus est, sed pulvinar mi quam et erat. Suspendisse venenatis scelerisque ultrices. Cras congue arcu quam, vitae hendrerit est aliquet ut. Pellentesque et iaculis diam, eu adipiscing mauris. Vivamus porta, nisi sed tempor ullamcorper, massa enim tincidunt metus, ut rutrum nulla tellus vitae leo. In ac elementum elit. Ut ultricies eros luctus massa feugiat, vel mattis felis sollicitudin. Proin tellus arcu, consequat vitae est quis, tempus tempus sapien.
</p><p>
Phasellus sed velit quis dolor tristique interdum. Nullam interdum, metus ultricies tincidunt pharetra, leo purus porttitor velit, non tincidunt mauris nibh quis ipsum. Donec eget elit tristique, porttitor tortor id, vestibulum nulla. Nam in libero nec erat pretium pharetra ut ut neque. Nunc tincidunt, augue interdum vulputate laoreet, magna eros mollis nunc, cursus laoreet nulla lorem ut nibh. Donec arcu nunc, viverra quis pellentesque a, posuere a mauris. Vestibulum sollicitudin justo in sapien elementum adipiscing. Nulla sit amet diam vel massa tristique aliquam eu sit amet metus. Cras ac nunc enim. Sed at velit sed mauris lobortis accumsan id ac nisi. Duis ut vestibulum quam. Sed quis lacinia est.
</p><p>
Praesent quam lorem, faucibus sit amet risus et, bibendum vestibulum nunc. Integer vestibulum nunc a magna ti</p>
</div>
</div>
<div class="panel-right">
<div class="panel-content">
<div class="close"></div>
<p>Right Panel</p>
<div class="bottom">
Some content here.
</div>
</div>
</div>
<div class="content">
<h2>Side Panels Test</h2>
<p>This is a prototype test to create two side panels that are controlled by CSS in terms of their animation. Click either the "Left Panel" or "Right Panel" buttons to reveal the panel. Then click on the <code>✖</code> close or use the keyboard shortcuts as seen below:</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>L</code> - Open Right panel</li>
<li><code>R</code> - Open Left panel</li>
</ul>
</div>
My page has toggled content that is preventing the other page content from being selectable or clickable. Is there a way to keep my general page layout the same, but still give users the ability to select the text and links within the "page-content" div?
I can add a positive z-index value to that "page-content" div, which would appear to solve the problem, but of course that covers up the toggled content, defeating the purpose.
function myFunction() {
var x = document.getElementById("toggleDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container {
width: 600px;
height: 350px;
border: 2px solid gray;
padding: 10px;
}
.page-content {
position: absolute;
width: inherit;
}
.toggle-wrapper {
width: 100%;
height: 100%;
border: 1px solid red;
position: relative;
}
.button-1 {
background-color: beige;
position: absolute;
right: 0;
bottom: 0;
}
#toggleDiv {
width: 95%;
height: 95%;
width: 600px;
height: 450px;
margin: 0 auto;
margin-top: 50px;
}
.link-box {
border: 1px solid blue;
width: 75%;
height: 225px;
margin-top: 100px;
margin-left: 12.5%;
box-sizing: border-box;
text-align: center;
background-color: beige;
}
.link-box a {
width: 40%;
margin-left: 7%;
border: 1px solid black;
text-align: center;
float: left;
height: 100px;
margin-bottom: 25px;
}
<div class="container">
<div class="page-content">
<p>The hidden toggled div is preventing you from selecting the text or clicking the link.</p>
<p>Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.</p>
LINK
</div>
<!--page-content-->
<div class="toggle-wrapper">
<button class="button-1" onclick="myFunction()">toggle</button>
<div id="toggleDIV" style="display: none;">
<div class="link-box">
<p>Toggle Content </p>
<a href="#">
<p>Link 1</p>
</a>
<a href="#">
<p>Link 2</p>
</a>
<button onclick="myFunction()">Cancel</button>
</div>
<!--link-box-->
</div>
<!--#toggleDiv-->
</div>
<!--toggle-wrapper-->
</div>
<!--container-->
I'd change the display of your popup a bit by removing the parent's block display, and setting the position of the inner link div to an absolute position so that it's removed from the flow of the document and doesn't block the elements behind it. Like this:
function myFunction() {
var x = document.getElementById("toggleDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
.container {
width: 600px;
height: 350px;
border: 2px solid gray;
padding: 10px;
position: relative;
}
.page-content {
position: absolute;
width: inherit;
}
.button-1 {
background-color: beige;
position: absolute;
right: 0;
bottom: 0;
}
#toggleDiv {
width: 600px;
height: 450px;
margin: 0 auto;
margin-top: 50px;
}
.link-box {
border: 1px solid blue;
width: 75%;
height: 225px;
box-sizing: border-box;
text-align: center;
background-color: beige;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.link-box a {
width: 40%;
margin-left: 7%;
border: 1px solid black;
text-align: center;
float: left;
height: 100px;
margin-bottom: 25px;
}
<div class="container">
<button class="button-1" onclick="myFunction()">toggle</button>
<div class="page-content">
<p>The hidden toggled div is preventing you from selecting the text or clicking the link.</p>
<p>Praesent sit amet turpis fringilla urna maximus pharetra quis faucibus est. Nunc ligula turpis, interdum at libero sed, auctor gravida justo. Phasellus odio dolor, pulvinar pellentesque egestas in, scelerisque ac orci. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tempor, ipsum et porttitor fringilla, neque risus lacinia purus, et congue purus erat non nisi. Pellentesque urna neque, varius egestas risus sit amet, mollis iaculis lacus. Sed
sit amet quam a tortor malesuada pharetra quis ac mi. In a risus feugiat, consectetur lacus ut, posuere elit. Etiam a magna vehicula, volutpat quam quis, interdum tellus. Sed dictum vulputate consequat.</p>
LINK
</div>
<!--page-content-->
<div class="toggle-wrapper">
<div id="toggleDIV" style="display: none;">
<div class="link-box">
<p>Toggle Content </p>
<a href="#">
<p>Link 1</p>
</a>
<a href="#">
<p>Link 2</p>
</a>
<button onclick="myFunction()">Cancel</button>
</div>
<!--link-box-->
</div>
<!--#toggleDiv-->
</div>
<!--toggle-wrapper-->
</div>
<!--container-->
I'm struggling with trying to achieve the attached layout. I am trying to get my pop-up card to sit above the background div but the content is being cut off where the background div ends.
Your help is very much appreciated :) About Me Desired Layout
/*About Me Section*/
.about-me {
position: relative;
padding-top: 10%;
height: 500px;
margin-top: -7%;
z-index: -1;
background-color: #E5460E;
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 -100%);
}
.about-card {
position: absolute;
top: 20%;
left: 0;
margin: 0auto;
z-index: 1000000;
width: 80%;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}
<body>
<div class="about-me">
<div class="about-card">
<div class="story">
<div class="story-photo">
<img class="story-me" src="About-Me.png">
</div>
<h3 class="story-title">My Story</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lobortis orci. Vivamus iaculis lobortis dolor. Suspendisse ultricies nulla et ex aliquam laoreet. Donec nunc risus, posuere interdum efficitur id, dignissim eget enim. Duis bibendum ipsum eu malesuada porta.
<br>
Vivamus non neque orci. Aenean varius dolor posuere est fermentum porttitor. Maecenas id porttitor felis. Morbi facilisis, dui in semper consequat, nulla dolor semper massa, ac vehicula felis tortor nec eros. Sed quis ante eu diam efficitur laoreet.
</p>
</div>
</div>
</body>
This is because your content div (.about-card) is within the .about-me div and is getting cut off by the clip-path in your CSS. Make a separate div within .about-me called .about-me-background and give it the styling instead:
/*About Me Section*/
.about-me-background {
position: relative;
padding-top: 10%;
height: 500px;
margin-top: -7%;
z-index: -1;
background-color: #E5460E;
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 -100%);
}
.about-card {
position: absolute;
top: 20%;
left: 0;
margin: 0auto;
z-index: 1000000;
width: 80%;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}
<body>
<div class="about-me">
<div class="about-me-background">
</div>
<div class="about-card">
<div class="story">
<div class="story-photo">
<img class="story-me" src="About-Me.png">
</div>
<h3 class="story-title">My Story</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lobortis orci. Vivamus iaculis lobortis dolor. Suspendisse ultricies nulla et ex aliquam laoreet. Donec nunc risus, posuere interdum efficitur id, dignissim eget enim. Duis bibendum ipsum eu malesuada porta.
<br>
Vivamus non neque orci. Aenean varius dolor posuere est fermentum porttitor. Maecenas id porttitor felis. Morbi facilisis, dui in semper consequat, nulla dolor semper massa, ac vehicula felis tortor nec eros. Sed quis ante eu diam efficitur laoreet.
</p>
</div>
</div>
</body>
Now you will see that .about-card extends below the red background.
Dude! Try to make it simple by using the structure which follows header, footer, sections, etc. and develop your code.
try this snippet and hope this works well for you!.
body{
margin:auto;
}
header{
height: 70%;
width: 100%;
background:red;
}
footer{
height: 30%;
width: 100%;
position:absolute;
background:#fff;
}
#insidebox{ /*align your css based on your requirement*/
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px; /* adjust accordingly */
background: red;
border:1px solid;
background:white;
}
.rotateCSS{
/*css goes here for rorating the text*/
}
<body>
<header>
<section id="rotateCSS">
<div> About Me </div>
</section>
</header>
<footer>
<section>
</section>
</footer>
<section id="insidebox">
<div>
hello for box in center
</div>
</section>
</body>
try this, I put the HTML as ...
<div class="about">
<p>ABOUT ME</p>
</div>
<div class="about__content">
...
</div>
then use position: absolute to lay over
Hope to be helpful to you, bro
-
just a demo: CodePen
I have an element that always needs to be vertically aligned with it's sibling element no matter what the window width is. I'm hoping to be able to do this with CSS, but seems like it may need to be done with JavaScript. If that's the case, jQuery is okay and it just needs to support modern browsers (IE 11+).
The tricky part about this is that it needs to be at 50% of the image and not the entire container.
Please note: the markup or styling cannot be changed on the parent or sibling of div.icon.
https://jsfiddle.net/thebluehorse/srp7g2cf/
.container {
position: relative;
}
.slide {
float: left;
height: 100%;
min-height: 1px;
}
img {
width: 100%;
display: block;
}
.icon {
height: 8vw;
width: 8vw;
background: blue;
position: absolute;
top: 50%;
}
body {
font-size: 100%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="container">
<div class="list clearfix">
<div class="slide">
<img src="http://placehold.it/1800x750">
</div>
</div>
<div class="icon"></div>
<ul>
<li>Lorem ipsum dolor sit amet, et hymenaeos elit orci, rutrum dolor magna pellentesque ante euismod magna, sodales turpis quos class condimentum. Integer in vel etiam. Etiam pellentesque nibh phasellus sed, eget ipsum enim sed in et at, non ligula quis
egestas sed quis. Lectus vitae, lobortis vestibulum maecenas auctor lorem eros, luctus vitae aliquam aliquam ipsum ligula nascetur, habitasse eu lectus imperdiet leo. Ut est fusce class conubia nunc felis, proin aliquam vitae nunc accumsan orci.
A eu erat in.</li>
<li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis
taciti cras a.</li>
</ul>
</div>
One option is to use calc() in order to subtract half of the element's height from top: 50%:
.icon {
position: absolute;
top: calc(50% - 4vw);
height: 8vw;
width: 8vw;
}
Of course you could also just displace the element using a negative margin equal to half of the element's height:
.icon {
position: absolute;
top: 50%;
margin-top: -4vw;
height: 8vw;
width: 8vw;
}
Based on the comments, since you're using the slick library, you would need to append the .icon element to the slider so that it is absolutely positioned relative to it.
You can listen to the init event and then append the icon accordingly:
Updated Example
$('.list').on('init', function(event, slick) {
var $icon = $(this).closest('.container').find('.icon');
$(this).append($icon);
});
If I got you right you want the icon to be vertically centered, if so just set top and bottom to 0, and add margin: auto. see updated code below.
.icon {
height: 8vw;
width: 8vw;
background: blue;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
you don't need jQuery.
just replace style for .icon with next:
.icon {
height: 8vw;
width: 8vw;
position: absolute;
top: 50%;
}
.icon:before {
background: blue;
content: '';
height:100%;
width:100%;
position: relative;
display: block;
top: -50%;
}
https://jsfiddle.net/srp7g2cf/5/