I am working on an application and have ran into some CSS styling issues. I am battling against position: sticky and have found myself stuck in a hole I'm not sure how to escape from.
My desired end result is to have a page that is scrollable, but I want the <nav> (white background), <div id='top'> (yellow background), and <div class='selector'> (pink background) to be "sticky" at the top as the user scrolls the page (visual representation of desired result).
The charts will be constant in sizing, but the list of questions will be an undetermined length. As the user scrolls through the list of questions, I want them to always have easy access to the search bar and breadcrumb heading.
What am I doing wrong?? Right now the yellow section behaves as expected up until a certain point, then it randomly decides to scroll away and ignore the sticky. (I'm not even sure where to begin with the pink section, especially since I can't figure out the first part!)
Any help and explanations would be much appreciated to help me learn for the future.
const dok = document.getElementById('dokChart').getContext('2d');
const dokChart = new Chart(dok, {
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5],
backgroundColor: ['rgb(244, 238, 252)', 'rgb(211, 186, 243)', 'rgb(188, 151, 237)', 'rgb(155, 98, 228)'],
},
],
labels: ['DOK 1', 'DOK 2', 'DOK 3', 'DOK 4'],
},
options: {
maintainAspectRatio: false,
animation: {
duration: 0
},
plugins: {
datalabels: {
formatter: (value) => {
return ' ' + value + ' questions';
}
},
legend: {
display: false,
},
}
}
});
const attempts = document.getElementById('attemptsChart').getContext('2d');
const attemptsChart = new Chart(attempts, {
type: 'bar',
data: {
labels: ['1st', '2nd', '3rd', '4th+'],
datasets: [
{
label: 'Attempt Progression',
backgroundColor: 'rgba(173, 173, 173)',
data: [0.75, 1, 1.75, 2, 3],
},
],
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
categorySpacing: 0
}]
},
plugins: {
datalabels: {
anchor: 'center',
align: 'center',
color: '#666',
font: {
weight: 'normal',
},
},
legend: {
display: false,
},
},
},
});
nav {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 65px;
padding: 0px 20px;
box-sizing: border-box;
font-size: 20px;
color: #5F6368;
background-color: white;
border-bottom: 1px solid lightgray}
body {
margin: 0;
position: absolute;
top: 65px; left: 0px;
width: 100%;
height: calc(100vh - 65px);
background-color: #FCFCFC;
display: grid;
grid-template-rows: 96px minmax(120px, 1fr);
grid-template-areas:
"top"
"content"}
/* --------[TITLE FEATURE]-------- */
#top {
grid-area: top;
display: flex;
position: sticky;
top: 65px;
justify-content: space-between;
align-items: center;
margin: 0px 40px;
font-size: 38px;
color: #484848;
background-color: yellow;
border-bottom: 1px solid lightgray}
#breadcrumb {
color: #484848;
font-size: 14px;
margin: 10px 40px;}
#breadcrumb ul {
padding: 0;
margin: 0;
list-style: none;}
#breadcrumb li {display: inline}
#breadcrumb li:not(:last-child)::after {
content: '▸';
margin: 0px 10px;}
#breadcrumb a {
text-decoration: none;
color: #581F98;
font-weight: 800}
/* --------[CHARTS]-------- */
#content {
margin: 20px 40px 0px 40px}
#content .charts {
display: flex;
width: 100%;
border-bottom: 1px solid lightgray}
.charts .DOK {
width: 50%;
padding: 20px;
box-sizing: border-box;
border-right: 1px solid lightgray}
.charts .attempts {
width: 50%;
padding: 20px;
box-sizing: border-box;}
/* ------ [TOP CONTROLS] ------ */
.selector {
background-color: pink;
display: flex;
align-items: center;
padding: 20px 0px;}
.selector .title {font-weight: 800}
.selector input[type='search'] {
flex: 1;
font-size: 16px;
box-sizing: border-box;
width: 100%;
border-radius: 6px;
margin: 0px 20px;
padding: 8px 20px;
border: 1px solid black;}
.selector button {
margin-top: -6px;
font-size: 16px}
/* ------ [QUESTIONS] ------ */
#content .questions {
background-color: green;
padding: 20px;}
/* Question box style */
#content .questions section {
min-height: 200px;
margin-bottom: 30px; /* Space under each question */
border: 1px solid lightgray;
background-color: white;
border-radius: 16px;
padding: 20px;
cursor: pointer;}
#content .questions section:hover {border: 2px solid #D4BBF1;}
/* Question excerpt style */
.questions section .excerpt {
padding-bottom: 24px; /* Space under excerpt */
font-size: 14px;
font-style: italic;}
/* Main question style */
.questions section .question {
padding-bottom: 16px; /* Space under question */
font-weight: 800;}
/* Answer choice style */
.questions section li {
margin-bottom: 10px; /* Space under each answer option */
list-style: none;}
.questions section ul {margin: 0px;}
/* Spacing for checkbox in answer */
.questions section input[type='checkbox'] {margin-right: 10px;}
/* Coloring for correct answer */
.questions section li.correct {
color: #34CB4A;
font-weight: 800;}
<head>
<link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<nav></nav>
</head>
<body>
<div id='top'>
<div class='title'>📓 Curriculum</div>
<div id='breadcrumb'>
<ul>
<li><a href='?'>Main</a></li>
<li><a href='?view=attendance'>Curriculum</a></li>
<li><a href='?view=attendance'>Assessments</a></li>
<li>Compare/Contrast</li>
</ul>
</div>
</div>
<div id='content'>
<div class='charts'>
<div class='DOK'><canvas id="dokChart"></canvas></div>
<div class='attempts'><canvas id="attemptsChart"></canvas></div>
</div>
<div class='selector'>
<div class='title'>16 Saved Questions:</div>
<input type='search' placeholder='Search question bank...'>
<button class='button purple-btn'>Create Question</button>
</div>
<div class='questions'>
<section>
<div class='excerpt'>Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
<section>
<div class='excerpt'>Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
<section>
<div class='excerpt'> I was a sickly, delicate boy, suffered much from asthma, and frequently had to be taken away on trips to find a place where I could breathe. One of my memories is of my father walking up and down the room with me in his arms at night when I was a very small person, and of sitting up in bed gasping, with my father and mother trying to help me. I went very little to school. I never went to the public schools, as my own children later did, both at the "Cove School" at Oyster Bay and at the "Ford School" in Washington. For a few months, I attended Professor McMullen's school in Twentieth Street near the house where I was born, but most of the time I had tutors. As I have already said, my aunt taught me when I was small.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
</div>
</div>
</body>
Yes, the functionality you are looking for is done with position: sticky. For this property to function, the following is needed: Apply the position: sticky and a property top, left, right, botton, with a coarse. I leave a code of the effect for a better understanding:
.styck_1{
position: sticky;
top: 2px;
}
.styck_2{
position: sticky;
top: 98px;
}
.styck_3{
position: sticky;
top: 193px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position styck</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body class="container">
<div class="bg-warning p-4 mt-3 styck_1">
<h1>Text 1</h1>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<div class="bg-primary p-4 styck_2">
<h1>Text 2</h1>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<div class="bg-success p-4 styck_3">
<h1>Text 2</h1>
</div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima eligendi est non ipsam ullam voluptas fugiat dignissimos illum consectetur tempora at, soluta hic beatae praesentium nostrum excepturi totam incidunt commodi. </p>
</body>
</html>
Now let's fix the problem in your html. There is a property in your html that causes conflict. Here the code and then the explanation.
const dok = document.getElementById('dokChart').getContext('2d');
const dokChart = new Chart(dok, {
type: 'doughnut',
data: {
datasets: [
{
data: [10, 20, 15, 5],
backgroundColor: ['rgb(244, 238, 252)', 'rgb(211, 186, 243)', 'rgb(188, 151, 237)', 'rgb(155, 98, 228)'],
},
],
labels: ['DOK 1', 'DOK 2', 'DOK 3', 'DOK 4'],
},
options: {
maintainAspectRatio: false,
animation: {
duration: 0
},
plugins: {
datalabels: {
formatter: (value) => {
return ' ' + value + ' questions';
}
},
legend: {
display: false,
},
}
}
});
const attempts = document.getElementById('attemptsChart').getContext('2d');
const attemptsChart = new Chart(attempts, {
type: 'bar',
data: {
labels: ['1st', '2nd', '3rd', '4th+'],
datasets: [
{
label: 'Attempt Progression',
backgroundColor: 'rgba(173, 173, 173)',
data: [0.75, 1, 1.75, 2, 3],
},
],
},
options: {
animation: {
duration: 0
},
scales: {
xAxes: [{
categorySpacing: 0
}]
},
plugins: {
datalabels: {
anchor: 'center',
align: 'center',
color: '#666',
font: {
weight: 'normal',
},
},
legend: {
display: false,
},
},
},
});
nav {
position: fixed;
top: 0; left: 0;
width: 100vw; height: 65px;
padding: 0px 20px;
box-sizing: border-box;
font-size: 20px;
color: #5F6368;
background-color: white;
border-bottom: 1px solid lightgray}
body {
margin: 0;
position: absolute;
top: 65px; left: 0px;
width: 100%;
/*height: calc(100vh - 65px);*/
background-color: #FCFCFC;
display: grid;
grid-template-rows: 96px minmax(120px, 1fr);
grid-template-areas:
"top"
"content"}
/* --------[TITLE FEATURE]-------- */
#top {
grid-area: top;
display: flex;
position: sticky;
top: 65px;
justify-content: space-between;
align-items: center;
margin: 0px 40px;
font-size: 38px;
color: #484848;
background-color: yellow;
border-bottom: 1px solid lightgray}
#breadcrumb {
color: #484848;
font-size: 14px;
margin: 10px 40px;}
#breadcrumb ul {
padding: 0;
margin: 0;
list-style: none;}
#breadcrumb li {display: inline}
#breadcrumb li:not(:last-child)::after {
content: '▸';
margin: 0px 10px;}
#breadcrumb a {
text-decoration: none;
color: #581F98;
font-weight: 800}
/* --------[CHARTS]-------- */
#content {
margin: 20px 40px 0px 40px}
#content .charts {
display: flex;
width: 100%;
border-bottom: 1px solid lightgray}
.charts .DOK {
width: 50%;
padding: 20px;
box-sizing: border-box;
border-right: 1px solid lightgray}
.charts .attempts {
width: 50%;
padding: 20px;
box-sizing: border-box;}
/* ------ [TOP CONTROLS] ------ */
.selector {
background-color: pink;
display: flex;
align-items: center;
padding: 20px 0px;
position: sticky;
top: 161px;}
.selector .title {font-weight: 800}
.selector input[type='search'] {
flex: 1;
font-size: 16px;
box-sizing: border-box;
width: 100%;
border-radius: 6px;
margin: 0px 20px;
padding: 8px 20px;
border: 1px solid black;}
.selector button {
margin-top: -6px;
font-size: 16px}
/* ------ [QUESTIONS] ------ */
#content .questions {
background-color: green;
padding: 20px;}
/* Question box style */
#content .questions section {
min-height: 200px;
margin-bottom: 30px; /* Space under each question */
border: 1px solid lightgray;
background-color: white;
border-radius: 16px;
padding: 20px;
cursor: pointer;}
#content .questions section:hover {border: 2px solid #D4BBF1;}
/* Question excerpt style */
.questions section .excerpt {
padding-bottom: 24px; /* Space under excerpt */
font-size: 14px;
font-style: italic;}
/* Main question style */
.questions section .question {
padding-bottom: 16px; /* Space under question */
font-weight: 800;}
/* Answer choice style */
.questions section li {
margin-bottom: 10px; /* Space under each answer option */
list-style: none;}
.questions section ul {margin: 0px;}
/* Spacing for checkbox in answer */
.questions section input[type='checkbox'] {margin-right: 10px;}
/* Coloring for correct answer */
.questions section li.correct {
color: #34CB4A;
font-weight: 800;}
<head>
<link rel="stylesheet" href="https://classcolonies.com/resources/style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<nav></nav>
</head>
<body>
<div id='top'>
<div class='title'>📓 Curriculum</div>
<div id='breadcrumb'>
<ul>
<li><a href='?'>Main</a></li>
<li><a href='?view=attendance'>Curriculum</a></li>
<li><a href='?view=attendance'>Assessments</a></li>
<li>Compare/Contrast</li>
</ul>
</div>
</div>
<div id='content'>
<div class='charts'>
<div class='DOK'><canvas id="dokChart"></canvas></div>
<div class='attempts'><canvas id="attemptsChart"></canvas></div>
</div>
<div class='selector'>
<div class='title'>16 Saved Questions:</div>
<input type='search' placeholder='Search question bank...'>
<button class='button purple-btn'>Create Question</button>
</div>
<div class='questions'>
<section>
<div class='excerpt'>Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
<section>
<div class='excerpt'>Before you begin slicing the apples, you must first wash your hands. Cutting apples without washing your hands is not only gross, it could spread virus and germs to other people.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
<section>
<div class='excerpt'> I was a sickly, delicate boy, suffered much from asthma, and frequently had to be taken away on trips to find a place where I could breathe. One of my memories is of my father walking up and down the room with me in his arms at night when I was a very small person, and of sitting up in bed gasping, with my father and mother trying to help me. I went very little to school. I never went to the public schools, as my own children later did, both at the "Cove School" at Oyster Bay and at the "Ford School" in Washington. For a few months, I attended Professor McMullen's school in Twentieth Street near the house where I was born, but most of the time I had tutors. As I have already said, my aunt taught me when I was small.</div>
<div class='question'>What does the personification of the dough suggest?</div>
<ul>
<li class='correct'><label><input type='checkbox' checked disabled>to repair something.</label></li>
<li><label><input type='checkbox' disabled>to replace something.</label></li>
<li><label><input type='checkbox' disabled>to remove something.</label></li>
<li><label><input type='checkbox' disabled>to redo something.</label></li>
</ul>
</section>
</div>
</div>
</body>
Run the code in full screen
Height property height: calc(100vh - 65px); in body css was affecting how position sticky works
I have just created a grid layout with old techniques (float and inline elements). It works enough nicely. Briefly I have a top-level wrapper class to center and limit size content. There are 2 main sections, each one with a header (20%) ,and the remainder (80%) is subdivided in different ways. There is even an elastic gutter (in em) setted with padding. I have designed the layout with in mind a good separation between content and presentation for high code maintainability and for this rason there is some redundant tag (especially divs).
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float layout plus wrapping rows using inline-block</title>
<!-- the base styles and "housekeeping" styles are in here: -->
<link rel="stylesheet" href="css/grid-base.css">
<!-- the HTML5 shiv, to help older browsers understand styling
on newer HTML5 elements: -->
<script src="js/html5shiv.min.js"></script>
<style>
/* grid styling */
.row {
margin: 0 -.6875em;
padding: 0;
list-style: none;
}
.row:after {
content: '';
display: block;
clear: both;
}
.row-quartet > * {
width: 25%;
}
.row-trio > * {
width: 33.3333%;
}
.col {
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0 .6875em 1.375em;
}
.col:last-child {
float: right;
}
.row-wrapping {
font-size: 0;
margin: 0 -11px;
margin: 0 -.6875rem;
}
.row-wrapping > * {
float: none;
vertical-align: top;
display: inline-block;
font-size: 16px;
font-size: 1rem;
}
/* content styling */
.subcategory {
margin-top: 1.5em;
border-bottom: 1px solid #8e3339;
}
.subcategory-featured {
width: 50%;
}
.subcategory-content {
width: 80%;
}
.subcategory-header {
width: 20%;
}
.story {
padding: .6875em;
background-color: #eee;
}
.story + .story {
margin-top: 1.375em;
}
.story img {
width: 100%;
}
</style>
</head>
<body>
<header class="masthead">
<div class="wrapper">
<h1>Important News</h1>
</div>
</header>
<nav role="navigation" class="navbar">
<div class="wrapper">
<ul class="navlist">
<li>Home</li>
<li>World</li>
<li>Local</li>
<li>Sports</li>
</ul>
</div>
</nav>
<main class="wrapper">
<section class="subcategory">
<div class="row">
<header class="col subcategory-header">
<h2>Lorem ipsum</h2>
</header>
<div class="col subcategory-content">
<div class="row row-quartet">
<div class="col subcategory-featured">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Cras suscipit nec leo id.</h3>
<p>Autem repudiandae aliquid tempora quos reprehenderit architecto, sequi repellat.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Perferendis, ipsam!</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Curabitur mattis purus nec velit.</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
</div>
<ul class="row row-quartet row-wrapping">
<li class="col">
<div class="story">
<h3>Perferendis, ipsam! Dolor sit amet consectetur</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam mattis eros id posuere.</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Proin leo felis, semper nec</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam vitae risus tortor. Sed!</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Perferendis, ipsam!</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam mattis eros id posuere.</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Proin leo felis, semper nec</h3>
</div>
</li>
<li class="col">
<div class="story">
<h3>Aliquam vitae risus tortor. Sed!</h3>
</div>
</li>
</div>
</div>
</div>
</section>
<section class="subcategory">
<div class="row">
<header class="col subcategory-header">
<h2>Dolor sit amet</h2>
</header>
<div class="col subcategory-content">
<div class="row row-trio">
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Ut sit amet mi massa</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<h3>Nunc mollis sit amet nunc</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
<article class="story">
<h3>Duis sed ante enim. Cras</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
<div class="col">
<article class="story">
<img src="http://placehold.it/600x300" alt="Dummy image">
<h3>Animi, explicabo, ipsum</h3>
<p>Neque magnam vero obcaecati facere nobis sint dolore accusamus vitae consequuntur ad necessitatibus, laborum molestiae.</p>
</article>
</div>
</div>
</div>
</div>
</section>
</main>
</body>
</html>
And the extern .css:
body {
margin: 0;
line-height: 1.375;
font-family: Georgia, Times New Roman, Times, serif;
}
h1,h2,h3,h4,h5,h6 {
font-family: Avenir Next, Avenir, Franklin Gothic, Trebuchet MS, Arial, sans-serif;
margin-top: 0;
}
a {
color: #8E3339;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
/* here's our wrapper */
.wrapper {
width: 95%;
max-width: 76em;
margin: 0 auto;
}
/* masthead styling */
.masthead {
background-color: #8E3339;
}
.masthead h1 {
margin: 0;
padding: 0.5em 0;
color: #fff;
text-shadow: -.1em .1em 0 rgba(0,0,0,0.3);
}
/* navbar styling */
.navbar {
background-color: #5E2126;
margin-bottom: 1.375em;
}
nav {
display: block;
}
.navbar ul {
font-family: 'Avenir Next', Avenir, Corbel, 'Franklin Gothic', 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
list-style: none;
padding: 0;
margin: 0;
background-color: #752A2F;
display: flex;
overflow: hidden;
}
.navbar li {
float: left;
text-transform: uppercase;
text-align: center;
box-sizing: border-box;
flex: 1 1 auto;
border-left: 1px solid #8E3339;
}
.navbar li:first-child {
border-left: 0;
}
.navbar li a {
display: block;
text-decoration: none;
line-height: 1.75em;
padding: 1em 2em;
color: #fff;
}
https://jsfiddle.net/36q59rav/
To improve the code I introduced in a second moment (A sort of progressive enhancement) the power of flexbox, to add several embellishments as box of equal height that is a tricky feature to have with float (in actual fact there was already flexbox for the navbar with float like fallback).
I'm using Modernizr to test specific flexbox support (class flexbox and flexwrap). I have reached an awesome result in Firefox (for my limited experience) but with my big surprise when I test the code in Google Chrome there is a visual mistake: the second nested row of first section is overlapped to first row and I'm not able to understand why.
Here is the code:
https://jsfiddle.net/rs7n8hLm/
You can see the same problem in the jsfiddle browser.
Advice is also appreciated because I'm in a blind alley, and I'm very available if some line of code is obscure.
Thanks in advance.
Here a screenshot of the problem.
https://ibb.co/jkNKRnY
I have 3 components in a row and I want their buttons be aligned at the bottom of containers. However each container has different text so it's height is not fixed and we don't want to strict the height.
How can I achieve alignment of the containers only by css and compatible with IE9 as well?
.container-of-3 > div{
float: left;
width: 33.33333333333%;
> img{
margin-left: calc((100% - 90px)/2);
}
}
.button-link{
background-color: #69be28;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
<div class="container-of-3">
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5 class="">Hybrid Cloud</h5>
<p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet</p>
<div class="text-align__center">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
</div>
http://codepen.io/neginbasiri/pen/mPYzKx
Same height is not necessary to make this done)
Just set position relative on outermost parent and set position: absolute with only bottom: 0 for your button without specifying left and right.
.container-of-3 {
position: relative;
padding-bottom: 40px;
overflow: hidden;
}
.container-of-3 > div{
float: left;
width: 33.33333333333%;
> img{
margin-left: calc((100% - 90px)/2);
}
}
.div-content {
text-align: center;
}
.button-holder {
width: 33.33333333333%;
position: absolute;
text-align: center;
bottom: 0;
}
.button-link{
background-color: #69be28;
display: inline-block;
vertical-align: top;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
<div class="container-of-3">
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5 class="">Hybrid Cloud</h5>
<p class="">Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut.
Tibique percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. Nusquam oportere
vituperata id cum, adipisci persecuti an pro. Eu vim facer graecis, id nec dicta integre interpretaris</p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet, ius fastidii similique argumentum in, porro putent consetetur vix ut. Tibique
percipitur ex vim, vim id idque soleat tibique, has te erant doctus complectitur. </p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
<div>
<div class="div-content">
<img src="http://placehold.it/90x90" class="" alt="">
<h5>Hybrid Cloud</h5>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="text-align__center button-holder">
<a href="http://www.hotmail.com" class="button-link" target="_blank">
<i class="fa fa-chevron-right"></i>
Read More</a>
</div>
</div>
</div>
You can use display: table for the container and display: table-cell for the three columns, this way they are all the same height. Then fix the button to the bottom and you're done :)
.container-of-3 {
display: table;
}
.container-of-3 > div{
width: 33.33333333333%;
display:table-cell;
height: 100%;
padding-bottom: 20px;
position: relative;
}
check out this fiddle: https://jsfiddle.net/br6c5way/
Floats will not really help you here since they don't match heights. You'll want to change the divs to a table table cell approach. Then position absolute the buttons so they are always aligned the same. Since Firefox 30 or so all browsers handle position relative on table cell elements. The positioning below aren't exact so you'll want to try out different amounts of padding and positioning that work for you.
.container-of-3 {
display:table;
table-layout: fixed;
width:100%
> div {
display: table-cell;
position: relative;
vertical-align:top;
padding-bottom:50px;
> img{
margin-left: calc((100% - 90px)/2);
}
}
}
.button-link{
position: absolute;
bottom: 10px;
left: 0;
background-color: #69be28;
color: #fff;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 1rem;
text-decoration: none;
border-radius: 5px;
}
Well, this is my first question here!
I've been having a problem in making background-attachment: fixed; happen on a <div> which is also assigned this property :- transform: translateZ(-1px) scale(2);. Actually on the first slide, the background image is rendering correctly, but on the rest slides, the image is not visible.
Also, the scroll bar is not working when I click or drag it.
I've tried a lot of times on google and it's been two days. At last I tried Stackoverflow, 'cause I was not able to get the specific answer which I wanted.
If I missed some link then please do help and pardon me.
Here's the page which I'm making - http://mynk-9.github.io/test/
[edit] Now, I've also added the code.
<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling Effect</title>
<style>
body {
margin: 0px;
padding: 0px;
}
div.parallax-page {
position: relative;
height: 100vh;
width: 100vw;
overflow-y: auto;
overflow-x: hidden;
perspective: 1px;
-webkit-perspective-origin-x: 50%;
perspective-origin-x: 50%;
}
div.parallax-page > div.group {
position: relative;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
div.parallax-page > div.group {
margin-bottom: calc(100vh);
}
div.parallax-page > div.group:last-child {
margin-bottom: -25vh;
}
div.parallax-page > div.group > div.background {
transform: translateZ(-1px) scale(2);
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100%;
/*background-attachment: fixed;*/
}
div.parallax-page > div.group > div.slide {
position: absolute;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0.5);
}
div.parallax-page::-webkit-scrollbar {
/*display: none;*/
}
/* using formula -> scale = 1 + (translateZ * -1) / perspective */
</style>
</head>
<body>
<div class="parallax-page">
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-2.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-3.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
<div class="group">
<div class="background" style="background-image: url('sample-wallpaper-5.svg');"></div>
<div class="slide">
<h1 style="text-align: center;">A magical scroll!!</h1>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
opacity: 0.7;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image */
.bgimg-1 {
background-image: url('https://pixabay.com/static/uploads/photo/2016/01/19/17/16/rainbow-background-1149610_960_720.jpg');
min-height: 100%;
}
/* Second image */
.bgimg-2 {
background-image: url("https://i.ytimg.com/vi/4AA4qYGunr4/maxresdefault.jpg");
min-height: 400px;
}
/* Adjust the position of the parallax image text */
.w3-display-middle {bottom: 45%;}
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
</style>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<ul class="w3-navbar" id="myNavbar">
<li>HOME</li>
<li class="w3-hide-small w3-right">
<i class="fa fa-search"></i>
</li>
</ul>
</div>
<!-- First Parallax Image with Text -->
<div class="bgimg-1 w3-opacity w3-display-container">
<div class="w3-display-middle">
<span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
<h3 class="w3-center">ABOUT ME</h3>
<p class="w3-center"><em>I love photography</em></p>
<p>We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container">
<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-light-grey w3-wide">PORTFOLIO</span>
</div>
</div>
<footer class="w3-container w3-theme-dark w3-padding-16">
<p>Powered by csandreas1</p>
</footer>
</body>
</html>